UA 整理提交

he wei

2025-04-23 b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf

 src/views/dashboard/index.vue

@@ -1,11 +1,13 @@
<script setup name="Dashboard">
   import { defineComponent } from 'vue';
   import HdwCard from '@/components/HdwCard/index.vue';
  import ycCard from '@/components/ycCard/index.vue';
   import LedNum from '@/components/LedNum/index.vue';
   import mapChart from "@/components/echarts/mapChart.vue";
   import pie from "@/components/echarts/pie.vue";
   import bar from "@/components/echarts/bar.vue";
   import groupBar from "@/components/echarts/groupBar.vue";
  import valuePanel from './components/valuePanel.vue';
  import valuePanel2 from './components/valuePanel2.vue';

   import { ref, watchEffect } from 'vue';
   import useWebsocket from '@/hooks/useWebsocket';
@@ -32,7 +34,7 @@
   //       "closeNum": 2

   const offLine_num = ref(0);
   const unLoad_num = ref(0);
  // const unLoad_num = ref(0);
   const sumLinf_num = ref(0);
   const open_num = ref(0);
   const online_num = ref(0);
@@ -47,7 +49,7 @@

         let locks = [];
         let _offLine = 0,
            _unLoad = 0,
        // _unLoad = 0,
            _sumLinf = 0,
            _open = 0,
            _online = 0,
@@ -57,7 +59,7 @@
            let _list = resLockState.data2;
            locks = _list.allLinfs.filter(v => v.longitude || v.latitude);
            _offLine = _list.offLineNum;
            _unLoad = _list.unLoadNum;
        // _unLoad = _list.unLoadNum;
            _sumLinf = _list.sumLinf;
            _open = _list.openNum;
            _online = _list.onlineNum;
@@ -65,11 +67,11 @@
         }

         offLine_num.value = _offLine;
         unLoad_num.value = _unLoad;
         sumLinf_num.value = _sumLinf;
      // unLoad_num.value = _unLoad;
         open_num.value = _open;
         online_num.value = _online;
         close_num.value = _close;
      sumLinf_num.value = _sumLinf;

         lockDatas.value = locks;

@@ -97,7 +99,7 @@

         let area_num = 0;
         if (resAllAinf.code && resAllAinf.data) {
            area_num = resAllAinf.data2;
        area_num = resAllAinf.data2.stationNum;
         }

         stationNum.value = area_num;
@@ -118,8 +120,8 @@
   });

   function updateStateChart() {
      let labels = ['锁具', '未安装', '开锁', '关锁', '在线', '离线'];
      let datas = [sumLinf_num.value, unLoad_num.value, open_num.value, close_num.value, online_num.value, offLine_num.value];
    let labels = ['锁具', '开锁', '关锁', '在线', '离线'];
    let datas = [sumLinf_num.value, open_num.value, close_num.value, online_num.value, offLine_num.value];
      testBar.value.updateChart(labels, datas);
   }

@@ -220,43 +222,38 @@
    <div class="dashboard-left">
      <div class="left-content-list">
        <div class="left-content-item">
          <hdw-card is-full title="屏柜类型">
          <yc-card is-full title="屏柜类型">
            <pie ref="typePie"></pie>
          </hdw-card>
          </yc-card>
        </div>
        <div class="left-content-item">
          <hdw-card is-full title="设备工作状态">
          <yc-card is-full title="设备工作状态">
            <bar ref="testBar" unit="套"></bar>
          </hdw-card>
          </yc-card>
        </div>
        <div class="left-content-item last">
          <hdw-card is-full title="环境状态">
          <yc-card is-full title="环境状态">
            <div class="env">
              <!-- 烟感 -->
              <div class="item">
              <value-panel2 label="烟感" :value="0"></value-panel2>
              <value-panel2 label="温度" unit="℃" color="#efa10b" :value="0"></value-panel2>
              <value-panel2 label="湿度" color="#55c587" :value="0"></value-panel2>
              <!-- <div class="item">
                <div class="label">烟感</div>
                <div class="value">0</div>
              </div> -->
              </div>
              <!-- 温度 -->
              <div class="item">
                <div class="label">温度</div>
                <div class="value">0</div>
              </div>
              <!-- 湿度 -->
              <div class="item">
                <div class="label">湿度</div>
                <div class="value">0</div>
              </div>
            </div>
          </hdw-card>
          </yc-card>
        </div>
      </div>
    </div>
    <div class="dashboard-middle">
      <div class="middle-content-wrapper">
        <hdw-card>
        <yc-card>
          <div class="number-list-wrapper">
            <div class="number-item">
            <value-panel label="机房" :value="stationNum"></value-panel >
            <value-panel label="锁具" color="#efa10b" :value="sumLinf_num"></value-panel >
            <!-- <div class="number-item">
              <div class="number-label">区域</div>
              <div class="number-value">
                <led-num color="#f00" :num="stationNum"></led-num>
@@ -267,7 +264,7 @@
              <div class="number-value">
                <led-num color="#f00" :num="sumLinf_num"></led-num>
              </div>
            </div>
            </div> -->
            <!-- <div class="number-item">
                                  <div class="number-label">电子卡</div>
                                  <div class="number-value">
@@ -275,9 +272,9 @@
                                  </div>
                                </div> -->
          </div>
        </hdw-card>
        </yc-card>
        <div class="map-wrapper">
          <hdw-card is-full>
          <yc-card is-full>
            <map-chart ref="map" @mapMounted="updateMap">
              <template #tools>
                <div class="map-mark">
@@ -292,30 +289,30 @@
                </div>
              </template>
            </map-chart>
          </hdw-card>
          </yc-card>
        </div>
        <div class="dev-real-info">
          <hdw-card title="实时开锁信息" is-full>
            <el-table :data="rtData" style="width: 100%; height: 100%">
          <yc-card title="实时开锁信息" is-full>
            <el-table :data="rtData" stripe  style="width: 100%; height: 100%">
              <el-table-column prop="ctlTime" label="时间" width="180" />
              <el-table-column prop="lockId" label="锁具ID" width="180" />
              <el-table-column prop="lockName" label="锁具名称" />
              <el-table-column prop="state" label="操作状态" />
            </el-table>
          </hdw-card>
          </yc-card>
        </div>
      </div>
    </div>
    <div class="dashboard-right">
      <div class="left-content-list">
        <div class="left-content-item">
          <hdw-card is-full title="屏柜品牌">
          <yc-card is-full title="屏柜品牌">
            <pie ref="prodPie"></pie>
          </hdw-card>
          </yc-card>
  
        </div>
        <div class="left-content-item">
          <hdw-card is-full title="使用频次">
          <yc-card is-full title="使用频次">
            <template #tools>
              <el-radio-group v-model="rateType" size="small">
                <el-radio-button value="month" label="本月"></el-radio-button>
@@ -324,17 +321,17 @@
              </el-radio-group>
            </template>
            <bar ref="useageRateChart" :rotate="30" unit="次"></bar>
          </hdw-card>
          </yc-card>
        </div>
        <div class="left-content-item last">
          <hdw-card is-full title="告警统计">
            <el-table :data="alarmData" style="width: 100%; height: 100%">
          <yc-card is-full title="告警统计">
            <el-table :data="alarmData" stripe  style="width: 100%; height: 100%">
              <el-table-column prop="ctlTime" label="时间" width="160" />
              <el-table-column prop="lockId" label="锁具ID" width="90" />
              <el-table-column prop="lockName" label="锁具名称" />
              <el-table-column prop="state" label="操作状态" />
            </el-table>
          </hdw-card>
          </yc-card>
        </div>
      </div>
    </div>
@@ -348,17 +345,19 @@
  height: 100%;

  .dashboard-left {
    width: 500px;
    height: 100%;
  }

  .dashboard-middle {
    // width: 500px;
    flex: 1;
    height: 100%;
  }

  .dashboard-middle {
    flex: 1.12;
    height: 100%;
  }

  .dashboard-right {
    width: 500px;
    // width: 500px;
    flex: 1;
    height: 100%;
  }
}
@@ -464,29 +463,7 @@
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  .item {
    flex: 1;
    border-radius: 8px;
    padding: 4px 8px;
    background: #0ff;
    & + .item {
      margin-left: 20px;
    }
      .label {
        color: #333;
       font-weight: bold; 
       margin-bottom: 0.4em;
       text-align: center;
      }
      .value {
        background: #000;
        border-radius: 6px;
        padding: 4px 8px;
        color: #fff;
        font-weight: bold;
        text-align: center;
      }
  }
}
</style>