智慧运维页面

src/views/IntellOper.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-import {onMounted, reactive, ref} from 'vue'
-import {useRoute} from 'vue-router'
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
 import StripeTable from '@/components/StripeTable.vue'
 import ColorTag from '@/components/tag/ColorTag.vue'
-import {getDeviceInfo, getOperationsPersonnelData} from '@/api/device'
+import { getDeviceInfo, getOperationsPersonnelData } from '@/api/device'
 import Chart from '@/components/Chart.vue'
-import {getPie3DSimple} from "@/utils/chart";
-import {View} from "@/utils/tdInstruction";
+import { getPie3DSimple } from '@/utils/chart'
+import bus from '@/utils/bus'
+import { jumpPage } from '@/utils'
+import { Label, Setting, View } from '@/utils/tdInstruction'
 
 const route = useRoute()
 
@@ -16,21 +18,21 @@ const color = ['#005aff', '#f8b551']
 const equipmentStatusData = reactive({
   total: 10,
   onlineTotal: 8,
-  "缺数": 0,
-  "上下限异常": 1,
-  "数据中断": 0,
-  "其他": 1,
+  '缺数': 0,
+  '上下限异常': 1,
+  '数据中断': 0,
+  '其他': 1
 })
 const operationsPersonnelColumns = [
-  {label: '姓名', prop: 'name'},
-  {label: '已处理', prop: 'processed', width: '100'},
-  {label: '未处理', prop: 'untreated', width: '100'},
+  { label: '姓名', prop: 'name' },
+  { label: '已处理', prop: 'processed', width: '100' },
+  { label: '未处理', prop: 'untreated', width: '100' }
 ]
 const operationsPersonnelData = reactive([])
 const deviceColumns = [
-  {label: '设备类型', prop: 'deviceType', width: '110'},
-  {label: '设备名称', prop: 'deviceName'},
-  {label: '运行状态', prop: 'state', width: '90'}
+  { label: '设备类型', prop: 'deviceType', width: '110' },
+  { label: '设备名称', prop: 'deviceName' },
+  { label: '运行状态', prop: 'state', width: '90' }
 ]
 const deviceData = reactive([])
 
@@ -42,8 +44,8 @@ function reloadRight3() {
       name: '故障',
       value: 1,
       itemStyle: {
-        color: '#f3914b',
-      },
+        color: '#f3914b'
+      }
     },
     {
       name: '提醒',
@@ -67,7 +69,7 @@ function reloadRight3() {
       }
     }
   ]
-  const option = getPie3DSimple(optionData, 0.8);
+  const option = getPie3DSimple(optionData, 0.8)
   //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
   option.series.push({
     name: 'pie2d',
@@ -95,7 +97,7 @@ function reloadRight3() {
       item.itemStyle.opacity = 0
       return item
     })
-  });
+  })
   right3Ref.value.loadChart(option, 'bindListen')
 }
 
@@ -119,8 +121,25 @@ onMounted(() => {
   reloadRight3()
 })
 
-function handleDeviceClick(row) {
-  View.changeView(`${route.params.stcd}_${row.deviceName}`)
+// 底板回调监听
+bus.on('handle_ue_response', (data) => {
+  if (data.Category && data.Category === 'ClickPOI' && data.Data.Type === '运维') {
+    // 跳转仪器详情界面
+    jumpPage(`/device/${route.params.stcd}/${data.Data.Name}`)
+  }
+})
+
+const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
+const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
+const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
+const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
+const cultureSrc = ref(new URL('@/assets/images/culture.png', import.meta.url).href)
+
+const labelState = reactive({'测站主页': false, '仪器运维': false})
+
+function setStationLabel(type = "测站主页") {
+  labelState[type] = !labelState[type]
+  Label.setStationLabel(type, labelState[type])
 }
 </script>
 
@@ -137,8 +156,8 @@ function handleDeviceClick(row) {
           </el-col>
           <el-col :span="10">
             <div style="display: flex;justify-content: center;">
-              <div style="position: absolute;bottom:40%;font-size:16px;">设备清单</div>
-              <img :src="imgSrc" style="height: 120px;"/>
+              <!--              <div style="position: absolute;bottom:40%;font-size:16px;">设备清单</div>-->
+              <img :src="imgSrc" style="height: 120px;" />
             </div>
           </el-col>
           <el-col :span="7">
@@ -167,17 +186,60 @@ function handleDeviceClick(row) {
           </el-col>
         </el-row>
       </card01>
+      <card01 title="设备清单" style="height: 65%">
+        <stripe-table :columns="deviceColumns" :data="deviceData"></stripe-table>
+      </card01>
+      <!--      <card01 style="height: 33%" title="运维人员统计">-->
+      <!--        <stripe-table :columns="operationsPersonnelColumns" :data="operationsPersonnelData"></stripe-table>-->
+      <!--      </card01>-->
+    </template>
+    <template #rightModule>
+
       <card01 style="height: 33%" title="维护情况">
         <chart ref="right3Ref"></chart>
       </card01>
-      <card01 style="height: 33%" title="运维人员统计">
-        <stripe-table :columns="operationsPersonnelColumns" :data="operationsPersonnelData"></stripe-table>
+      <card01 title="故障报警列表" style="height: 65%">
+        <stripe-table :columns="deviceColumns" :data="deviceData"></stripe-table>
       </card01>
     </template>
-    <template #rightModule>
-      <card01 title="设备清单">
-        <stripe-table :columns="deviceColumns" :data="deviceData" @row-click="handleDeviceClick"></stripe-table>
-      </card01>
+    <template #btnGroup>
+      <div class="right-btn-container">
+        <div class="right-btn-item"><img :src="homeSrc"></div>
+        <div class="right-btn-item">
+          <img :src="weatherSrc">
+          <div class="right-btn-option-list">
+            <div class="right-btn-option" @click="Setting.setWeather('晴')">晴</div>
+            <div class="right-btn-option" @click="Setting.setWeather('多云')">多云</div>
+            <div class="right-btn-option" @click="Setting.setWeather('阴天')">阴天</div>
+            <div class="right-btn-option" @click="Setting.setWeather('小雨')">小雨</div>
+            <div class="right-btn-option" @click="Setting.setWeather('中雨')">中雨</div>
+            <div class="right-btn-option" @click="Setting.setWeather('大雨')">大雨</div>
+          </div>
+        </div>
+        <div class="right-btn-item">
+          <img :src="flagSrc">
+          <div class="right-btn-option-list">
+            <div class="right-btn-option" @click="setStationLabel('测站主页')">
+              测站标签
+              <Elview v-show="labelState['测站主页']"></Elview>
+              <Hide v-show="!labelState['测站主页']"></Hide>
+            </div>
+            <div class="right-btn-option" @click="setStationLabel('仪器运维')">
+              仪器运维
+              <Elview v-show="labelState['仪器运维']"></Elview>
+              <Hide v-show="!labelState['仪器运维']"></Hide>
+            </div>
+          </div>
+        </div>
+        <div class="right-btn-item">
+          <img :src="walkSrc">
+          <div class="right-btn-option-list">
+            <div class="right-btn-option" @click="View.changeView('远')">远</div>
+            <div class="right-btn-option" @click="View.changeView('近')">近</div>
+          </div>
+        </div>
+        <div class="right-btn-item"><img :src="cultureSrc"></div>
+      </div>
     </template>
   </right-frame>
 </template>
@@ -200,4 +262,59 @@ function handleDeviceClick(row) {
   justify-content: center;
   height: 100%;
 }
+
+.right-btn-container {
+  display: flex;
+  flex-direction: column;
+
+  .right-btn-item {
+    cursor: pointer;
+    position: relative;
+
+    &:hover, &.active {
+
+      img {
+        background-color: rgba(16, 136, 215, 0.6);
+        border-radius: 8px;
+      }
+
+      > .right-btn-option-list {
+        display: block;
+      }
+
+    }
+
+    .right-btn-option-list {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 1.8rem;
+      width: 160px;
+      padding: 0 20px;
+    }
+
+    .right-btn-option {
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      background-color: #394139;
+      text-align: center;
+      color: #fff;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        margin-left: .5rem;
+      }
+
+    }
+
+  }
+}
+
 </style>