Merge pull request 'dengjie' (#180) from dengjie into dev
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/180
This commit is contained in:
8
src/api/tunnel.js
Normal file
8
src/api/tunnel.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export const getTunnelOption = (siteId) => {
|
||||
return request({
|
||||
url: `/tunnel/tunnel/option/${siteId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
42
src/api/user.js
Normal file
42
src/api/user.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export const getUser = (params) => {
|
||||
return request({
|
||||
url: '/admin/user/tunnel',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
export const getUserDetail = (userId) => {
|
||||
return request({
|
||||
url: `/admin/user/info/${userId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export const editUser = (data) => {
|
||||
return request({
|
||||
url: '/admin/user',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const addUser = (data) => {
|
||||
return request({
|
||||
url: '/admin/user',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const deleteUser = (userId) => {
|
||||
return request({
|
||||
url: `/admin/user/${userId}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export const getRoleOption = () => {
|
||||
return request({
|
||||
url: '/admin/role/option',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
-khtml-user-select: none; /*早期浏览器*/
|
||||
user-select: none;
|
||||
font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial,
|
||||
sans-serif;
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -97,6 +97,7 @@ body,
|
||||
.current-site {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span:first-child {
|
||||
color: #f7b500;
|
||||
margin-right: 20px;
|
||||
@@ -486,43 +487,72 @@ body,
|
||||
background: #072247 !important;
|
||||
border: 1px solid #0F82AF !important;
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
max-width: 202px !important;
|
||||
max-width: 200px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-popper__arrow::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
width: 200px !important;
|
||||
.el-select-dropdown{
|
||||
width: 200px!important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #072247 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #072247 !important;
|
||||
color: #08B7B8 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #08B7B8 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
.el-select-dropdown__item:first-child {
|
||||
.el-select-dropdown__item{
|
||||
>span{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.el-select .el-input .el-select__caret {
|
||||
font-size: 35px!important;
|
||||
}
|
||||
.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{
|
||||
background-color: #064B66!important;
|
||||
width:198px!important;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
|
||||
background-color: #064B66!important;
|
||||
width:200px!important;
|
||||
}
|
||||
.el-select-tags-wrapper{
|
||||
.el-tag{
|
||||
padding: 28px 20px!important;
|
||||
font-size: 35px;
|
||||
.el-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.current-site {
|
||||
.el-select-dropdown {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #08B7B8 !important;
|
||||
.el-select-dropdown__item {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #072247 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #072247 !important;
|
||||
color: #08B7B8 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #08B7B8 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
.el-select-dropdown__item:first-child {
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
color: #08B7B8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -542,8 +572,8 @@ input[type="number"] {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 25px !important;
|
||||
border: 4px solid #05FEFF!important;
|
||||
background-color: transparent!important;
|
||||
border: 4px solid #05FEFF !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
@@ -559,11 +589,11 @@ input[type="number"] {
|
||||
//border-top: 0;
|
||||
border-radius: 25px;
|
||||
top: 6px;
|
||||
left:6px;
|
||||
left: 6px;
|
||||
//left: 12px;
|
||||
font-size: 30px;
|
||||
background: #05FEFF;
|
||||
border-color: transparent!important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
//取消 确定按钮
|
||||
@@ -599,11 +629,13 @@ input[type="number"] {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
.el-pagination.is-background .btn-prev:disabled{
|
||||
background-color: transparent!important;
|
||||
color: #60DDDE!important;
|
||||
|
||||
.el-pagination.is-background .btn-prev:disabled {
|
||||
background-color: transparent !important;
|
||||
color: #60DDDE !important;
|
||||
}
|
||||
.el-pagination.is-background .btn-next:disabled{
|
||||
background-color: transparent!important;
|
||||
color: #60DDDE!important;
|
||||
|
||||
.el-pagination.is-background .btn-next:disabled {
|
||||
background-color: transparent !important;
|
||||
color: #60DDDE !important;
|
||||
}
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
import ItemInfo from "./childComps/ItemInfo.vue";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
|
||||
import * as echarts from 'echarts';
|
||||
import {getEchartsInfo} from "../../../api/largeScreen";
|
||||
|
||||
let myEcharts = reactive({});
|
||||
let myAirEcharts = reactive({});
|
||||
@@ -69,6 +70,7 @@ const props = defineProps({
|
||||
airData: Array
|
||||
});
|
||||
const windSpeed = ref('')
|
||||
const windSpeedId = ref(0)
|
||||
const airTitle = ref('')
|
||||
const airList = ref([])
|
||||
const timeList = ref(["年", "月", "日"]);
|
||||
@@ -91,19 +93,39 @@ watch(() => props.airData, (now) => {
|
||||
getAirInfo(now.sensorList)
|
||||
}
|
||||
}, {deep: true});
|
||||
const handleOpenChart = () => {
|
||||
isWindSpeedVisited.value = true
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
const getChartInfo = (equipmentId) => {
|
||||
getEchartsInfo(equipmentId).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
isWindSpeedVisited.value = true
|
||||
nextTick(() => {
|
||||
initChart(res.data.dates, res.data.values)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleOpenAirChart = (item) => {
|
||||
isAirVisited.value = true
|
||||
airTitle.value = item.name
|
||||
nextTick(() => {
|
||||
initAirChart()
|
||||
const getGasChartInfo = (equipmentId) => {
|
||||
getEchartsInfo(equipmentId).then(res => {
|
||||
if (res?.code === 1000) {
|
||||
isAirVisited.value = true
|
||||
nextTick(() => {
|
||||
initAirChart(res.data.dates, res.data.values)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleOpenChart = () => {
|
||||
// isWindSpeedVisited.value = true
|
||||
getChartInfo(windSpeedId.value)
|
||||
}
|
||||
|
||||
const handleOpenAirChart = (item) => {
|
||||
// isAirVisited.value = true
|
||||
airTitle.value = item.name
|
||||
getGasChartInfo(item.equipmentId)
|
||||
// nextTick(() => {
|
||||
// initAirChart()
|
||||
// })
|
||||
}
|
||||
const timeSelect = (index) => {
|
||||
console.log('选择时间', index)
|
||||
if (index === 0) {
|
||||
@@ -146,13 +168,14 @@ const getAirInfo = (now) => {
|
||||
airObj = changeData(item)
|
||||
airArr.push(airObj)
|
||||
} else if (item.equipmentType === "windSpeed") {
|
||||
windSpeedId.value = item.equipmentId
|
||||
windSpeed.value = item.value
|
||||
}
|
||||
})
|
||||
airArr.push(airArr.shift())
|
||||
airList.value = airArr
|
||||
}
|
||||
const initChart = () => {
|
||||
const initChart = (type, values) => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(document.getElementById('containerWind'));
|
||||
//5.传入数据
|
||||
@@ -190,8 +213,8 @@ const initChart = () => {
|
||||
let content = `
|
||||
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
|
||||
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
|
||||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
|
||||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
|
||||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
|
||||
<div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
|
||||
</div>`;
|
||||
return content;
|
||||
},
|
||||
@@ -211,7 +234,8 @@ const initChart = () => {
|
||||
//X轴
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
|
||||
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
|
||||
data:type,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 45,
|
||||
@@ -232,7 +256,8 @@ const initChart = () => {
|
||||
//配置项
|
||||
series: [
|
||||
{
|
||||
data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
|
||||
// data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
|
||||
data:values,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
@@ -249,7 +274,7 @@ const initChart = () => {
|
||||
myEcharts.resize();
|
||||
}
|
||||
}
|
||||
const initAirChart = () => {
|
||||
const initAirChart = (type, values) => {
|
||||
//3.初始化container容器
|
||||
myAirEcharts = echarts.init(document.getElementById('containerAir'));
|
||||
//5.传入数据
|
||||
@@ -284,7 +309,7 @@ const initAirChart = () => {
|
||||
let content = `
|
||||
<div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
|
||||
<div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
|
||||
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
|
||||
<div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
|
||||
</div>`;
|
||||
return content;
|
||||
},
|
||||
@@ -304,7 +329,8 @@ const initAirChart = () => {
|
||||
//X轴
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
|
||||
// data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
|
||||
data:type,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 45,
|
||||
@@ -325,7 +351,8 @@ const initAirChart = () => {
|
||||
//配置项
|
||||
series: [
|
||||
{
|
||||
data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
|
||||
// data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
|
||||
data:values,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
@@ -385,8 +412,9 @@ const initAirChart = () => {
|
||||
.input-fan {
|
||||
//margin: 0 26px;
|
||||
|
||||
> span:last-child {
|
||||
> span:first-child {
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -354,7 +354,8 @@ input[type="number"] {
|
||||
}
|
||||
|
||||
#fan_info {
|
||||
height: 1465px;
|
||||
//height: 1465px;
|
||||
height: 1000px;
|
||||
width: 830px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
@@ -382,7 +383,8 @@ input[type="number"] {
|
||||
height: calc(100% - 30px);
|
||||
|
||||
.fan-item {
|
||||
height: 33.5%;
|
||||
//height: 33.5%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -60,8 +60,9 @@ let myEcharts = reactive({});
|
||||
const isVisited = ref(false);
|
||||
const eleData = ref([])
|
||||
const electricityConsumptionMonthly = ref()
|
||||
const monthlySavings = ref(55555)
|
||||
const valueA = ref(electricityConsumptionMonthly.value);
|
||||
const monthlySavings = ref(5)
|
||||
const length = ref(null);
|
||||
const valueA = ref();
|
||||
const valueB = ref(monthlySavings.value);
|
||||
const bgImage = computed(() =>
|
||||
isVisited.value
|
||||
@@ -70,6 +71,7 @@ const bgImage = computed(() =>
|
||||
);
|
||||
watch(() => props.eleData, (now) => {
|
||||
getBasicData(now.frequencyChangerList)
|
||||
// setValue()
|
||||
}, {deep: true});
|
||||
watch(() => props.list, (now) => {
|
||||
eleData.value.forEach(item => {
|
||||
@@ -84,7 +86,23 @@ watch(() => props.list, (now) => {
|
||||
}
|
||||
})
|
||||
})
|
||||
// setValue()
|
||||
}, {deep: true});
|
||||
onMounted(()=>{
|
||||
// setValue()
|
||||
})
|
||||
const setValue=()=> {
|
||||
let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
|
||||
console.log('width',electricityConsumptionMonthly.value,width)
|
||||
valueA.value.style.height = `${width}px`;
|
||||
// let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
|
||||
// point.value.style.left = `${flag}px`;
|
||||
// if (width >= flag) {
|
||||
// value.value.style.background = "#F53839";
|
||||
// } else {
|
||||
// value.value.style.background = "#60DDDE";
|
||||
// }
|
||||
}
|
||||
const getBasicData = (data) => {
|
||||
let tranObj = {}
|
||||
let tranArr = []
|
||||
@@ -241,8 +259,8 @@ const getImageUrl = (name) => {
|
||||
height: 373px;
|
||||
color: aliceblue;
|
||||
position: absolute;
|
||||
//top: 1980px;
|
||||
top: 1680px;
|
||||
top: 1220px;
|
||||
//top: 1680px;
|
||||
left: 68px;
|
||||
background-image: url(../../../assets/images/usedEle/bg.png);
|
||||
padding: 21px 62px 35px 62px;
|
||||
|
||||
@@ -51,7 +51,7 @@ const routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
path: '/user/:siteId(\\d+)',
|
||||
name: 'user',
|
||||
component: () => import('@/views/user/index.vue'),
|
||||
meta: {
|
||||
|
||||
@@ -86,6 +86,7 @@ const selectIndex = ref(-1);
|
||||
const showFan = ref(false);
|
||||
const drawerLeft = ref(true);
|
||||
const drawerRight = ref(true);
|
||||
const currentSiteId = ref(0);
|
||||
const currentSite = ref("");
|
||||
const siteList = ref([])
|
||||
const currentUser = ref("");
|
||||
@@ -124,6 +125,7 @@ const getOtherInfo = () => {
|
||||
getLargeScreenInfo().then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
routeList.value = res.data.routeList
|
||||
currentSiteId.value = res.data.siteOption[0].value
|
||||
currentSite.value = res.data.siteOption[0].label
|
||||
siteList.value = res.data.siteOption
|
||||
tunnelId.value = res.data.tunnelOption[0].value
|
||||
@@ -166,13 +168,12 @@ const manageSelect = (index) => {
|
||||
if (index === 0) {
|
||||
router.push("/site");
|
||||
} else if (index === 1) {
|
||||
router.push("/tunnel/1");
|
||||
router.push("/tunnel/"+tunnelId.value);
|
||||
} else if (index === 2) {
|
||||
router.push("/user");
|
||||
router.push("/user/"+currentSiteId.value);
|
||||
}
|
||||
};
|
||||
const handleCommand = (item) => {
|
||||
console.log('commads', item)
|
||||
currentSite.value = item.label
|
||||
getTunnel(item.value)
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn" @click="handleAll">
|
||||
全选
|
||||
</div>
|
||||
<div class="all-btn del-btn" @click="handleMoreDelete">
|
||||
<!-- <div class="all-btn" @click="handleAll">-->
|
||||
<!-- 全选-->
|
||||
<!-- </div>-->
|
||||
<div class="all-btn del-btn" @click="handleDelete">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,26 +22,29 @@
|
||||
<div>
|
||||
<el-input
|
||||
v-model="username"
|
||||
clearable
|
||||
placeholder="输入搜索内容"
|
||||
/>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Search" style="margin-left: 20px">搜索</el-button>
|
||||
<el-button type="primary" :icon="Search" style="margin-left: 20px" @click="getInfo">搜索</el-button>
|
||||
</div>
|
||||
<div>用户管理</div>
|
||||
<div class="add-btn" @click="addUser">添加用户</div>
|
||||
<div class="add-btn" @click="handleAddUser">添加用户</div>
|
||||
</div>
|
||||
<div class="device-table">
|
||||
<el-table stripe ref="multipleTable"
|
||||
<el-table stripe ref="multipleTable" @select="handleSelect"
|
||||
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;margin-top: 80px;"
|
||||
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
||||
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
|
||||
<el-table-column type="selection" width="80"/>
|
||||
<el-table-column prop="account" label="账户" align="center"/>
|
||||
<el-table-column prop="password" label="密码" align="center"/>
|
||||
<el-table-column prop="identity" label="身份" align="center"/>
|
||||
<el-table-column prop="userName" label="账户" align="center"/>
|
||||
<el-table-column prop="nickName" label="昵称" align="center"/>
|
||||
<el-table-column prop="roleName" label="身份" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="电话号码" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;" @click="editUser">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;"
|
||||
@click="handleEditUser(scope.row)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -51,23 +54,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1658px">
|
||||
<div class="siteId">
|
||||
<div class="user-title">
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
|
||||
<el-form-item label="输入账户">
|
||||
<el-input v-model="form.account" placeholder="请输入账户"/>
|
||||
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
|
||||
<el-form-item label="输入用户名称">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="输入密码">
|
||||
<el-form-item label="输入用户昵称">
|
||||
<el-input v-model="form.nickName" placeholder="请输入用户昵称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="输入电话号码">
|
||||
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="输入密码" v-if="title==='添加用户'">
|
||||
<el-input v-model="form.password" placeholder="请输入密码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择身份">
|
||||
<el-checkbox-group v-model="form.identity" @change="handleChangeCheckbox">
|
||||
<el-checkbox v-for="item in checkList" :label="item.label" :key="item.value"/>
|
||||
</el-checkbox-group>
|
||||
<el-radio-group v-model="form.roleId" @change="(val) => {
|
||||
console.log('vaaa',val)
|
||||
if (val >3){
|
||||
getTunnel()
|
||||
}}">
|
||||
<el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择隧道" v-if="checkList.length!==0&&form.roleId>3">
|
||||
<el-select
|
||||
v-model="tunnelIndex"
|
||||
multiple
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择隧道"
|
||||
:fit-input-width="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in checkList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="isVisited=false">
|
||||
@@ -91,66 +120,19 @@
|
||||
|
||||
<script setup>
|
||||
import {Search} from '@element-plus/icons-vue'
|
||||
import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getTunnelOption} from "@/api/tunnel";
|
||||
import {deleteUser, getUserDetail} from "../../api/user";
|
||||
|
||||
const router = useRouter()
|
||||
const title = ref('添加用户')
|
||||
const siteId = reactive(router.currentRoute.value.params.siteId)
|
||||
const tunnelIndex = ref()
|
||||
const username = ref()
|
||||
const userData = ref([
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
},
|
||||
{
|
||||
account: '123343546',
|
||||
password: '243',
|
||||
identity: '超级管理员'
|
||||
}
|
||||
])
|
||||
const userIds = ref()
|
||||
const formInstance = ref()
|
||||
const userData = ref([])
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 6
|
||||
@@ -159,32 +141,190 @@ const total = ref(10);
|
||||
const isVisited = ref(false);
|
||||
const form = ref({
|
||||
password: '',
|
||||
account: '',
|
||||
identity: []
|
||||
userName: '',
|
||||
nickName: '',
|
||||
phoneNumber: '',
|
||||
roleId: [],
|
||||
tunnelIds: []
|
||||
});
|
||||
const formRules = ref({
|
||||
account: [{required: true, message: '请输入站点名称', trigger: 'blur'}],
|
||||
userName: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
|
||||
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
|
||||
})
|
||||
const checkList = ref([
|
||||
{label: "系统管理员", value: 111},
|
||||
{label: "站点管理员", value: 222},
|
||||
{label: "隧道管理员", value: 333},
|
||||
{label: "巡查员", value: 444}
|
||||
])
|
||||
const radioList = ref([])
|
||||
const checkList = ref([])
|
||||
const multipleTable = ref()
|
||||
const addUser = () => {
|
||||
const getTunnel = () => {
|
||||
getTunnelOption(siteId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
checkList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleAddUser = () => {
|
||||
reset()
|
||||
title.value = '添加用户'
|
||||
isVisited.value = true
|
||||
}
|
||||
const editUser = () => {
|
||||
const handleEditUser = (row) => {
|
||||
reset()
|
||||
getUserDetail(row.userId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data.user
|
||||
form.value.roleId = res.data.roleIds[0]
|
||||
}
|
||||
})
|
||||
title.value = '修改用户'
|
||||
isVisited.value = true
|
||||
}
|
||||
const handleAll = () => {
|
||||
multipleTable.value.toggleAllSelection()
|
||||
}
|
||||
const handleDelete = () => {
|
||||
ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteUser(userIds.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getInfo()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
password: '',
|
||||
userName: '',
|
||||
nickName: '',
|
||||
phoneNumber: '',
|
||||
roleId: [],
|
||||
tunnelIds: []
|
||||
}
|
||||
}
|
||||
const getRoleOptionInfo = () => {
|
||||
getRoleOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
radioList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
getRoleOptionInfo()
|
||||
const getInfo = () => {
|
||||
getUser({
|
||||
siteId: siteId,
|
||||
userName: username.value
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('res', res)
|
||||
userData.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
}
|
||||
})
|
||||
}
|
||||
getInfo()
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
const data = {
|
||||
siteId: siteId,
|
||||
roleIds: [form.value.roleId],
|
||||
...form.value
|
||||
}
|
||||
if (title.value === '添加用户') {
|
||||
await addUser(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
getInfo()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await editUser(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
getInfo()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleSelect = async (selection, row) => {
|
||||
if (selection.length !== 0) {
|
||||
// disabled.value = false
|
||||
userIds.value = row.userId
|
||||
if (selection.length > 1) {
|
||||
const del_row = selection.shift();
|
||||
multipleTable.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
} else {
|
||||
// disabled.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header-wrapper .el-checkbox) {
|
||||
display: none
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item:hover) {
|
||||
background-color: #064B66 !important;
|
||||
width: 137px !important;
|
||||
}
|
||||
|
||||
:deep(.el-radio-group) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-radio__label) {
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
:deep(.el-radio__inner) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 25px;
|
||||
border: 4px solid #05FEFF;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-radio__input.is-checked+.el-radio__label) {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.el-radio__input.is-checked .el-radio__inner ) {
|
||||
background: #064B66;
|
||||
border-color: #05FEFF !important;
|
||||
}
|
||||
|
||||
:deep(.el-radio__inner::after) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #05FEFF;
|
||||
}
|
||||
|
||||
.user-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 0 60px 0;
|
||||
font-size: 50px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-block) {
|
||||
background: #064B66;
|
||||
font-size: 30px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.tunnel-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
@@ -393,14 +533,6 @@ const handleAll = () => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox-group) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: #FFFFFF;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
position: absolute;
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
import {fileURLToPath, URL} from 'node:url'
|
||||
import {defineConfig} from 'vite'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
|
||||
import Icons from 'unplugin-icons/vite'
|
||||
import IconsResolver from 'unplugin-icons/resolver'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import Inspect from 'vite-plugin-inspect'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
//自动导入vue相关函数
|
||||
imports: ['vue','vue-router'],
|
||||
imports: ['vue', 'vue-router'],
|
||||
|
||||
resolvers: [
|
||||
ElementPlusResolver(),
|
||||
@@ -57,6 +58,18 @@ export default defineConfig({
|
||||
strictPort: false,
|
||||
open: true,
|
||||
proxy: {
|
||||
// '/api/tunnel': {
|
||||
// // target: 'http://gateway.feashow.cn',
|
||||
// target: 'http://192.168.31.175:8000',
|
||||
// changeOrigin: true,
|
||||
// rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
// },
|
||||
// '/api/admin': {
|
||||
// // target: 'http://gateway.feashow.cn',
|
||||
// target: 'http://192.168.31.175:8000',
|
||||
// changeOrigin: true,
|
||||
// rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
// },
|
||||
'/api': {
|
||||
target: 'http://web-tunnel.feashow.com/api',
|
||||
// target: 'http://192.168.31.175:8000',
|
||||
|
||||
Reference in New Issue
Block a user