解决智慧运维页面的冲突

src/views/IntellOper.vue

@@ -1,16 +1,14 @@
 <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 bus from '@/utils/bus'
-import { jumpPage } from '@/utils'
-import { Label, Setting, View } from '@/utils/tdInstruction'
+import {getPie3DSimple} from "@/utils/chart";
+import {View} from "@/utils/tdInstruction";
 
 const route = useRoute()
 
@@ -18,21 +16,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([])
 
@@ -44,8 +42,8 @@ function reloadRight3() {
       name: '故障',
       value: 1,
       itemStyle: {
-        color: '#f3914b'
-      }
+        color: '#f3914b',
+      },
     },
     {
       name: '提醒',
@@ -69,7 +67,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',
@@ -97,7 +95,7 @@ function reloadRight3() {
       item.itemStyle.opacity = 0
       return item
     })
-  })
+  });
   right3Ref.value.loadChart(option, 'bindListen')
 }
 
@@ -121,25 +119,8 @@ onMounted(() => {
   reloadRight3()
 })
 
-// 底板回调监听
-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])
+function handleDeviceClick(row) {
+  View.changeView(`${route.params.stcd}_${row.deviceName}`)
 }
 </script>
 
@@ -156,8 +137,8 @@ function setStationLabel(type = "测站主页") {
           </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">
@@ -186,60 +167,17 @@ function setStationLabel(type = "测站主页") {
           </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 title="故障报警列表" style="height: 65%">
-        <stripe-table :columns="deviceColumns" :data="deviceData"></stripe-table>
+      <card01 style="height: 33%" title="运维人员统计">
+        <stripe-table :columns="operationsPersonnelColumns" :data="operationsPersonnelData"></stripe-table>
       </card01>
     </template>
-    <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 #rightModule>
+      <card01 title="设备清单">
+        <stripe-table :columns="deviceColumns" :data="deviceData" @row-click="handleDeviceClick"></stripe-table>
+      </card01>
     </template>
   </right-frame>
 </template>
@@ -262,59 +200,4 @@ function setStationLabel(type = "测站主页") {
   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>