Merge pull request 'dengjie' (#180) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/180

src/api/tunnel.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request.js'
+
+export const getTunnelOption = (siteId) => {
+  return request({
+    url: `/tunnel/tunnel/option/${siteId}`,
+    method: 'get'
+  })
+}

src/api/user.js

@@ -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'
+  })
+}

src/assets/styles/index.scss

@@ -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{
-.el-select-dropdown {
+  width: 200px!important;
-  width: 200px !important;
 }
-
+.el-select-dropdown__item{
-.el-select-dropdown__item {
+  >span{
-  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;
+  }
+}
+.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 {
+  .el-select-dropdown__item {
-      color: #08B7B8 !important;
+    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;
+  border: 4px solid #05FEFF !important;
-  background-color: transparent!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;
+.el-pagination.is-background .btn-prev:disabled {
-  color: #60DDDE!important;
+  background-color: transparent !important;
+  color: #60DDDE !important;
 }
-.el-pagination.is-background .btn-next:disabled{
+
-  background-color: transparent!important;
+.el-pagination.is-background .btn-next:disabled {
-  color: #60DDDE!important;
+  background-color: transparent !important;
+  color: #60DDDE !important;
 }

src/components/content/airInfo/AirInfo.vue

@@ -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 = () => {
+const getChartInfo = (equipmentId) => {
-  isWindSpeedVisited.value = true
+  getEchartsInfo(equipmentId).then(res => {
-  nextTick(() => {
+    if (res?.code === 1000) {
-    initChart()
+      isWindSpeedVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data.values)
+      })
+    }
   })
 }
-const handleOpenAirChart = (item) => {
+const getGasChartInfo = (equipmentId) => {
-  isAirVisited.value = true
+  getEchartsInfo(equipmentId).then(res => {
-  airTitle.value = item.name
+    if (res?.code === 1000) {
-  nextTick(() => {
+      isAirVisited.value = true
-    initAirChart()
+      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;"><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%);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;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;
         }
       }
     }

src/components/content/fanInfo/FanInfo.vue

@@ -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;

src/components/content/usedEle/UsedEle.vue

@@ -60,8 +60,9 @@ let myEcharts = reactive({});
 const isVisited = ref(false);
 const eleData = ref([])
 const electricityConsumptionMonthly = ref()
-const monthlySavings = ref(55555)
+const monthlySavings = ref(5)
-const valueA = ref(electricityConsumptionMonthly.value);
+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: 1220px;
-  top: 1680px;
+  //top: 1680px;
   left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;

src/router/index.js

@@ -51,7 +51,7 @@ const routes = [
     }
   },
   {
-    path: '/user',
+    path: '/user/:siteId(\\d+)',
     name: 'user',
     component: () => import('@/views/user/index.vue'),
     meta: {

src/views/tunnel/index.vue

@@ -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)
 }

src/views/user/index.vue

@@ -7,10 +7,10 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
-        <div class="all-btn" @click="handleAll">
+        <!--        <div class="all-btn" @click="handleAll">-->
-          全选
+        <!--          全选-->
-        </div>
+        <!--        </div>-->
-        <div class="all-btn del-btn" @click="handleMoreDelete">
+        <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="userName" label="账户" align="center"/>
-            <el-table-column prop="password" label="密码" align="center"/>
+            <el-table-column prop="nickName" label="昵称" align="center"/>
-            <el-table-column prop="identity" 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>
+              <template #default="scope">
-                <el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;" @click="editUser">
+                <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 :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
-        <el-form-item label="输入账户">
+        <el-form-item label="输入用户名称">
-          <el-input v-model="form.account" placeholder="请输入账户"/>
+          <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-radio-group v-model="form.roleId" @change="(val) => {
-            <el-checkbox v-for="item in checkList" :label="item.label" :key="item.value"/>
+             console.log('vaaa',val)
-          </el-checkbox-group>
+            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([
+const userIds = ref()
-  {
+const formInstance = ref()
-    account: '123343546',
+const userData = ref([])
-    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 pageInfo = reactive({
   pageNum: 1,
   pageSize: 6
@@ -159,32 +141,190 @@ const total = ref(10);
 const isVisited = ref(false);
 const form = ref({
   password: '',
-  account: '',
+  userName: '',
-  identity: []
+  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([
+const radioList = ref([])
-  {label: "系统管理员", value: 111},
+const checkList = ref([])
-  {label: "站点管理员", value: 222},
-  {label: "隧道管理员", value: 333},
-  {label: "巡查员", value: 444}
-])
 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;

vite.config.js

@@ -1,18 +1,19 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
-import { defineConfig } from 'vite'
+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',