邓洁: 优化界面

src/assets/styles/index.scss

@@ -154,7 +154,7 @@ body,
   position: static !important;
 
   .el-drawer {
-    width: 900px !important;
+    width: 960px !important;
     background-color: transparent;
     box-shadow: none;
   }
@@ -671,3 +671,11 @@ input[type="number"] {
   background-color: transparent !important;
   color: #60DDDE !important;
 }
+.showNull{
+  font-size:35px;
+  min-height: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #2fb0df;
+}

src/components/content/airInfo/AirInfo.vue

@@ -1,21 +1,19 @@
 <template>
   <div id="air-info">
-    <div class="fan-speed">
+    <div style="height: 21px" v-if="airList.length!==0"></div>
+    <div class="fan-speed" v-if="windSpeed!==0">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info" @click="handleOpenChart">
         <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
       </div>
     </div>
     <item-info
-        v-for="item in airList"
+        v-for="(item,index) in airList"
-        :key="item.equipmentId"
+        :key="index"
         :wp="item"
-        :icon="item.icon"
-        :name="item.name"
-        :unit="item.unit"
         @click="handleOpenAirChart(item)"
     />
-
+    <div style="height: 1px" v-if="airList.length!==0"></div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
                  :modal="false">
@@ -72,7 +70,7 @@ const props = defineProps({
   list: Array,
   airData: Array
 });
-const windSpeed = ref('')
+const windSpeed = ref(0)
 const windSpeedId = ref(0)
 const airTitle = ref('')
 const airList = ref([])
@@ -81,6 +79,7 @@ const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const isAirVisited = ref(false);
 watch(() => props.list, (now) => {
+  console.log('props.list', now)
   airList.value?.forEach(item => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
@@ -378,26 +377,27 @@ const initAirChart = (type, values) => {
 
 <style lang="scss" scoped>
 #air-info {
-  position: absolute;
+  //min-height: 350px;
+  margin-top: 40px;
+  //position: absolute;
   z-index: 100;
   width: 824px;
   //height: 400px;
-  top: 1003px;
+  //top: 1003px;
-  right: 72px;
+  //right: 72px;
   background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 25px 20px 0 21px;
+  //padding: 25px 20px 1px 21px;
 
   .fan-speed {
+    box-sizing: border-box;
     display: flex;
     //height: 40px;
     font-size: 30px;
-    font-family: MicrosoftYaHei;
     color: #ffffff;
-    line-height: 40px;
     align-items: center;
     padding: 5px 0 5px 15px;
     margin-bottom: 25px;
-
+    margin-left: 21px;
     &:hover {
       //width: 790px;
       background: #2E5589;

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -1,45 +1,38 @@
 <template>
-  <div id="item-info">
+  <div id="item-info" v-if="params.wp!==undefined">
     <div class="label">
       <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <span>{{ params.name }}</span>
+      <span>{{ params.wp.name }}</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
       <div id="point" ref="point"></div>
     </div>
     <div class="value-num" :class="{ warning: isWaring }">
-      {{ valueAndUnit }}
+      {{ params.wp.value }} {{ params.wp.unit }}
     </div>
   </div>
 </template>
 
 <script setup>
 const params = defineProps({
-  wp: Object,
+  wp: Object
-  icon: String,
-  name: String,
-  unit: String,
 });
-// const info = {
+
-//   windPId: 0, //编号
+const windIcon = ref();
-//   max: 120, //最大值
-//   value: 40, //测量值
-//   point: 60, //阈值
-// };
-const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
+const isWaring = ref();
-
+// watch(() => params.wp.value, () => {
-function handleOnMounted() {
+//   setValue();
-  setValue();
+// });
-}
+onMounted(() => {
-
+  if (params.wp !== undefined) {
-watch(() => params.wp.value, () => {
+    setValue();
-  setValue();
+    windIcon.value = params.wp.icon
-});
+  }
+})
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
@@ -55,23 +48,25 @@ const setValue = () => {
     value.value.style.background =
         "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
   }
+  isWaring.value = params.wp.value >= params.wp.point;
 }
-let isWaring = computed(() => {
+// let isWaring = computed(() => {
-  return params.wp.value >= params.wp.point;
+//   return params.wp.value >= params.wp.point;
-});
+// });
 
-const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>
 
 <style lang="scss" scoped>
 #item-info {
   display: flex;
   align-items: center;
-  width: 100%;
+  width: 790px;
   padding: 5px 14px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  margin-left: 21px;
 
   &:hover {
+    width: 790px;
     background: #2E5589;
     border-radius: 6px;
 

src/components/content/badGasInfo/BadGasInfo.vue

@@ -3,7 +3,10 @@
       id="bad-gas-info"
       :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
     <div class="title">有害气体</div>
-    <div class="info-list">
+    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="info-list">
       <gas-info-item
           v-for="item in badGasList"
           :key="item.equipmentId"
@@ -11,7 +14,6 @@
           @click="handleOpenChart"
       />
     </div>
-
     <div class="digital-tunnel">
       <el-dialog
           :close-on-click-modal="false"
@@ -355,32 +357,31 @@ const initChart = (type, values) => {
 
 <style lang="scss" scoped>
 #bad-gas-info {
+  margin-top:40px;
   cursor: pointer;
-  position: absolute;
+  //position: absolute;
   width: 824px;
+  min-height: 300px;
   //height: 621px;
-  top: 1441px;
+  //top: 1441px;
-  right: 72px;
+  //right: 72px;
   background-image: url(../../../assets/images/badGasInfo/bg.png);
-
+  padding: 22px 17px 25px 50px;
   .title {
-    width: 128px;
+    font-size: 38px;
-    height: 45px;
-    font-size: 32px;
-    font-family: PingFang-SC, PingFang-SC;
     font-weight: 800;
     color: #38cafb;
     line-height: 45px;
-    margin: 22px 0px 0px 62px;
+    //margin: 22px 0px 0px 62px;
   }
 
   .info-list {
     width: 100%;
-    height: calc(621px - 45px - 22px);
+    //height: calc(621px - 45px - 22px);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    padding: 10px 0px 0px 10px;
+    padding: 16px 0 0 10px;
   }
 }
 </style>

src/components/content/fanInfo/FanInfo.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="fan_info">
     <div class="title">风机</div>
-    <div class="fans">
+    <div v-if="socketData==null||socketData.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
         <div>
           <!-- echarts -->
@@ -470,6 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
 </script>
 
 <style lang="scss" scoped>
+
 :deep( .el-radio__input.is-checked + .el-radio__label) {
   color: #38CAFB;
 }
@@ -516,11 +520,12 @@ input[type="number"] {
 #fan_info {
   //height: 1465px;
   //height: 1000px;
+  min-height: 350px;
   width: 830px;
-  position: absolute;
+  //position: absolute;
   z-index: 100;
-  top: 184px;
+  //top: 184px;
-  left: 68px;
+  //left: 68px;
   padding: 10px 10px 20px 10px;
   background-image: url(../../../assets/images/fanInfo/bg.png);
   color: #2fb0df;
@@ -529,8 +534,8 @@ input[type="number"] {
   .title {
     width: 40%;
     text-align: left;
-    padding: 0 0 0 62px;
+    padding: 0 0 0 50px;
-    font-size: 32px;
+    font-size: 38px;
     font-weight: bold;
     color: #38cafb;
     line-height: 42px;
@@ -553,7 +558,7 @@ input[type="number"] {
 
         .echart {
           height: 270px;
-          width: 30%;
+          width: 34%;
           margin: 0px 0px 0px 10px;
           position: relative;
         }
@@ -659,7 +664,7 @@ input[type="number"] {
               display: flex;
               flex-direction: column;
               justify-content: center;
-              padding: 0 20px;
+              //padding: 0 20px;
               font-size: 28px;
               color: #38cafb;
               line-height: 37px;

src/components/content/fanInfo/FanInfoItem.vue

@@ -97,14 +97,14 @@ let isWaringC = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.abnormal:hover {
+//.abnormal:hover {
-  background: #9C5252 !important;
+//  background: #9C5252 !important;
-  border-radius: 6px;
+//  border-radius: 6px;
-
+//
-  .point {
+//  .point {
-    background: #fff !important;
+//    background: #fff !important;
-  }
+//  }
-}
+//}
 
 .wind-pressure-item {
   display: flex;

src/components/content/usedEle/UsedEle.vue

@@ -59,7 +59,7 @@ const props = defineProps({
 let myEcharts = reactive({});
 const isVisited = ref(false);
 const eleData = ref([])
-const electricityConsumptionMonthly = ref()
+const electricityConsumptionMonthly = ref(0)
 const monthlySavings = ref(4000)
 const length = ref(null);
 const valueA = ref();
@@ -88,16 +88,18 @@ watch(() => props.list, (now) => {
   })
   setValueA()
 }, {deep: true});
-onMounted(()=>{
+onMounted(() => {
   setValueA()
   setValueB()
 })
-const setValueA=()=> {
+const setValueA = () => {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null) return
   let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
   valueA.value.style.height = `${width}px`;
 }
-const setValueB=()=> {
+const setValueB = () => {
-  let width = (4000 * length.value.offsetHeight) / 10000;
+  if (monthlySavings.value === 0 || length.value === null) return
+  let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
@@ -234,15 +236,15 @@ const getImageUrl = (name) => {
 }
 
 #used-ele {
-  //flex:1;
+  margin-top: 40px;
   cursor: pointer;
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  position: absolute;
+  //position: absolute;
-  top: 1220px;
+  //top: 1220px;
   //top: 1680px;
-  left: 68px;
+  //left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
 
@@ -270,6 +272,7 @@ const getImageUrl = (name) => {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .container {
         width: 60px;
         height: 210px;
@@ -288,6 +291,7 @@ const getImageUrl = (name) => {
           transition: width 0.5s linear 0s;
         }
       }
+
       > div:nth-child(2) {
         display: flex;
 

src/components/content/windPressure/WindPressureList.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="wind-pressure">
     <div class="name">风压</div>
-    <div class="list">
+    <div v-if="wpList==null||wpList.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="list">
       <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
                           @click="handleOpenChart(item)"/>
     </div>
@@ -206,21 +209,20 @@ const initChart = (type, values) => {
 #wind-pressure {
   width: 830px;
   //height: 779px;
-  position: absolute;
+  //position: absolute;
-  top: 185px;
+  min-height: 350px;
-  right: 68px;
+  //top: 185px;
+  //right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  padding: 22px 17px 0 23px;
+  padding: 22px 17px 1px 23px;
 
   .name {
-    width: 64px;
+    font-size: 38px;
-    height: 42px;
-    font-size: 32px;
     font-family: MicrosoftYaHei, MicrosoftYaHei;
     font-weight: bold;
     color: #38cafb;
     line-height: 42px;
-    margin-left: 62px;
+    margin-left: 50px;
     margin-bottom: 38px;
   }
 }

src/views/tunnel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
@@ -16,8 +16,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                  item.label
+                    item.label
-                }}
+                  }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -36,21 +36,21 @@
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" />
+                  :transducer-data="largeScreenData"/>
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -77,16 +77,13 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {getUserInfo} from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {initSceneData} from "@/api/tunnelScene";
-import { getSiteDetail } from "../../api/site";
-import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
-
 const authStore = useAuthStore();
 const router = useRouter();
 const selectIndex = ref(-1);
@@ -163,6 +160,7 @@ const getUser = () => {
   getUserInfo().then(res => {
     currentUser.value = res.data.user.userName
     currentUserId.value = res.data.user.userId
+    localStorage.setItem('userId', currentUserId.value)
   })
 }
 const getDefaultSite = (siteId) => {
@@ -187,6 +185,7 @@ const getOtherInfo = () => {
       siteList.value = res.data.siteOption
       currentSiteId.value = res.data.siteOption[0].value
       currentSite.value = res.data.siteOption[0].label
+      localStorage.setItem('site', currentSite.value)
       tunnelList.value = res.data.tunnelOption
       getTunnel(res.data.siteOption[0].value)
     }
@@ -237,7 +236,7 @@ const manageSelect = (index) => {
     }
   } else if (index == '隧道管理') {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/i'+'/' + currentUserId.value);
+      router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
     }
   } else if (index == '用户管理') {
     if (currentSiteId.value) {
@@ -340,13 +339,15 @@ initWebSocket();
 // getTunnelPreview();
 </script>
 <style lang="scss">
-//.el-drawer__body{
+.el-drawer__header {
-//  width: 100%;
+  display: none;
-//  display: flex!important;
+}
-//  flex-direction: column!important;
+
-//  flex: 1;
+.el-drawer__body {
-//  height: 100%;
+  padding: 180px 68px 0 68px;
-//}
+  overflow: hidden;
+}
+
 .el-dropdown__popper.el-popper {
   background: transparent;
   //border: none;

src/views/user/index.vue

@@ -49,7 +49,7 @@
             <el-table-column prop="phoneNumber" label="电话号码" align="center"/>
             <el-table-column prop="state" label="状态" align="center">
               <template #default="scope">
-                {{scope.row.state=="1"?'启用':'停用'}}
+                {{ scope.row.state == "1" ? '启用' : '停用' }}
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -70,7 +70,7 @@
       </div>
       <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
         <el-form-item label="当前站点">
-          <div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
+          <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
         </el-form-item>
         <el-form-item label="输入用户名">
           <el-input v-model="form.userName" placeholder="请输入用户名"/>
@@ -143,12 +143,10 @@ 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";
-import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const title = ref('添加用户')
 const siteId = reactive(router.currentRoute.value.params.siteId)
-const tunnelIndex = ref()
 const username = ref()
 const userIds = ref()
 const showFirst = ref(true)
@@ -161,6 +159,7 @@ const pageInfo = reactive({
 });
 const total = ref(10);
 const isVisited = ref(false);
+const showAdmin = ref(false);
 const form = ref({
   password: '',
   userName: '',
@@ -177,6 +176,13 @@ const formRules = ref({
 const radioList = ref([])
 const tunnelList = ref([])
 const multipleTable = ref()
+onMounted(() => {
+  if (localStorage.getItem('userId') == 2) {
+    showAdmin.value = true
+  } else {
+    showAdmin.value = false
+  }
+})
 const getTunnel = () => {
   getTunnelOption(siteId).then(res => {
     if (res.code === 1000) {
@@ -189,9 +195,7 @@ const handleAddUser = () => {
   reset()
   title.value = '添加用户'
   isVisited.value = true
-  getSiteDetail(siteId).then((res) => {
+  currentSite.value = localStorage.getItem('site')
-    currentSite.value = res.data.siteName
-  });
 }
 const handleEditUser = (row) => {
   reset()
@@ -210,7 +214,7 @@ const handleAll = () => {
   multipleTable.value.toggleAllSelection()
 }
 const handleDelete = () => {
-  if (userIds.value ===undefined) {
+  if (userIds.value === undefined) {
     ElMessage.warning('请先选择用户进行删除')
   } else {
     ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
@@ -282,7 +286,7 @@ const handleSubmit = async (formInstance) => {
       nickName: form.value.nickName,
       password: form.value.password,
       phoneNumber: form.value.phoneNumber,
-      state:form.value.state,
+      state: form.value.state,
       userName: form.value.userName,
       roleIds: [form.value.roleId],
       tunnelList: form.value.tunnelList
@@ -298,8 +302,8 @@ const handleSubmit = async (formInstance) => {
         }
       })
     } else {
-      const editData={
+      const editData = {
-        userId:form.value.userId,
+        userId: form.value.userId,
         ...data
       }
       await editUser(editData).then(res => {