Merge branch 'refs/heads/feature/v5.0/5.0.5' into patch_management

张含笑

2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b

 src/views/wel/components/statistics.vue

@@ -9,97 +9,15 @@
        <img src="/src/assets/images/workbench/st2.png" alt="" />
      </div>
    </div>
    <!-- <div
      class="grid-container"
      v-if="permission.device_statistics_four && !permission.device_statistics_six"
    >
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
          <img :src="test[item].img" :alt="newtitleData[item].name" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</span>
          </div>
        </div>
        <div class="status-list">
          <template v-if="test[item]?.name == '机巢' || test[item]?.name == '无人机'">
            <div
              v-for="statusKey in [4, 0, -1]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
              </span>
            </div>
          </template>
          <template v-else-if="test[item]?.name == '监控设备'">
            <div
              v-for="statusKey in [1, 0]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
              </span>
            </div>
          </template>

          <template v-else>
            <div
              v-for="(status, statusIndex) in newtitleData[item].status_map"
              :key="statusIndex"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusIndex)"
              :style="{ color: getStatusColor(test[item]?.name, statusIndex) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusIndex),
                  color: getStatusColor(test[item]?.name, statusIndex),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count"
                >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
              >
            </div>
          </template>
        </div>
      </div>
    </div> -->
    <div class="grid-container">
    <div class="grid-container" v-if="Object.keys(newtitleData).length > 0">
      <div v-for="(item, index) in Object.keys(newtitleData)" :key="index" class="device-card">
        <div class="device-title">
          <img :src="test[item].img" :alt="newtitleData[item].name" />
          <div class="itemcenter">
            <div>{{ test[item]?.name || '--' }}</div>
            <span class="shu">{{ newtitleData[item].total_num }}</span>
            <span>个</span>
            <span>{{ unitMap[test[item]?.name] }}</span>
          </div>
        </div>
        <div class="status-list">
@@ -121,7 +39,7 @@
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
                {{ unitMap[test[item]?.name] }}
              </span>
            </div>
          </template>
@@ -143,13 +61,13 @@
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机' ? '架' : '个' }}
                {{ unitMap[test[item]?.name] }}
              </span>
            </div>
          </template>
          <template v-else-if="test[item]?.name == '机巢保险'">
            <div
              v-for="statusKey in [1, 0]"
              v-for="statusKey in [1, 0,2]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
@@ -169,6 +87,28 @@
              </span>
            </div>
          </template>
            <template v-else-if="test[item]?.name == '无人机流量'">
            <div
              v-for="statusKey in [ 0,2,1]"
              :key="statusKey"
              class="status-item"
              :class="getStatusStyle(test[item]?.name, statusKey)"
              :style="{ color: getStatusColor(test[item]?.name, statusKey) }"
            >
              <span
                class="indicator"
                :style="{
                  backgroundColor: getStatusBackground(test[item]?.name, statusKey),
                  color: getStatusColor(test[item]?.name, statusKey),
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusKey) }}</span>
              <span class="count">
                {{ newtitleData[item].status_map[statusKey] }}
                {{ test[item]?.name === '无人机流量' ? '架' : '个' }}
              </span>
            </div>
          </template>
          <template v-else>
            <div
              v-for="(status, statusIndex) in newtitleData[item].status_map"
@@ -185,13 +125,18 @@
                }"
              ></span>
              <span class="label">{{ getStatusLabel(test[item]?.name, statusIndex) }}</span>
              <span class="count"
                >{{ status }} {{ test[item]?.name === '无人机' ? '架' : '个' }}</span
              >
              <span class="count">{{ status }} {{ unitMap[test[item]?.name] }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="grid-container" v-else>
      <el-empty>
        <template #description>
          <span class="custom-text">暂无数据</span>
        </template>
      </el-empty>
    </div>
  </div>
</template>
@@ -199,12 +144,12 @@
<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import titleImg1 from '@/assets/images/workbench/st3.png';
import titleImg2 from '@/assets/images/workbench/st4.png';
import titleImg3 from '@/assets/images/workbench/st8.png';
import titleImg4 from '@/assets/images/workbench/st5.png';
import titleImg5 from '@/assets/images/workbench/st6.png';
import titleImg6 from '@/assets/images/workbench/st9.png';
import titleImg1 from '@/assets/images/workbench/st3.svg';
import titleImg2 from '@/assets/images/workbench/st4.svg';
import titleImg3 from '@/assets/images/workbench/st8.svg';
import titleImg4 from '@/assets/images/workbench/st5.svg';
import titleImg5 from '@/assets/images/workbench/st6.svg';
import titleImg6 from '@/assets/images/workbench/st9.svg';
import { getStatics } from '@/api/home/index';
import { useRouter } from 'vue-router';
const router = useRouter();
@@ -267,6 +212,7 @@
const insureStatus = {
  0: '临近到期',
  1: '正常期限',
  2:'保险过期'
};
const moveListStatus = {
  '-1': '离线中',
@@ -275,28 +221,29 @@
// 样式配置对象
const statusStyles = {
  机巢保险: {
    0: { class: 'expired', color: '#7C8091', background: '#7C8091' },
    1: { class: 'normal', color: '#1B94FF', background: '#1B94FF' },
    0: { class: 'expired', color: '#FFA600', background: '#FFA600' },
    1: { class: 'normal', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
     2: { class: 'flying',color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
  },

  无人机流量: {
    0: { class: 'offline', color: '#11CE3E', background: '#11CE3E' },
    1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
    2: { class: 'flying', color: '#7C8091', background: '#7C8091' },
    0: { class: 'offline', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
    1: { class: 'flying', color: 'rgba(255, 36, 36, 1)', background: 'rgba(255, 36, 36, 1)' },
    2: { class: 'flying', color: '#FFA600', background: '#FFA600' },
  },
  监控设备: {
    0: { class: 'offline', color: '#bababa', background: '#bababa' },
    1: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
    0: { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
    1: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
  },
  移动机巢: {
    '-1': { class: 'offline', color: '#bababa', background: '#bababa' },
    4: { class: 'flying', color: '#1B94FF', background: '#1B94FF' },
    '-1': { class: 'offline', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
    4: { class: 'flying', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
  },
  // 默认样式配置
  default: {
    0: { class: 'warning', color: '#1b94ff', background: '#1b94ff' },
    4: { class: 'success', color: '#11ce3e', background: '#11ce3e' },
    '-1': { class: 'success', color: '#bababa', background: '#bababa' },
    0: { class: 'warning', color: 'rgba(0, 180, 69, 1)', background: 'rgba(0, 180, 69, 1)' },
    4: { class: 'success', color: 'rgba(255, 106, 0, 1)', background: 'rgba(255, 106, 0, 1)' },
    '-1': { class: 'success', color: 'rgba(186, 186, 186, 1)', background: 'rgba(186, 186, 186, 1)' },
  },
};

@@ -327,47 +274,44 @@
      return statusSelect[statusCode] || `未知状态(${statusCode})`;
  }
};
// const px = {
// '4':0,
//   '0':1,
//   '-1':2
// }
// const status_map = newtitleData.value.plant_list.status_map
// newtitleData.value.plant_list.status_map = Object.entries(status_map).sort((a,b) => {
//   return px[a[0]] - px[b[0]]
// })
// console.log(Object.entries(status_map).sort((a,b) => {
//   return px[a[0]] - px[b[0]]
// }));

const getStaticsList = () => {
  getStatics(userInfo.value.detail.areaCode).then(res => {
    console.log('permission.value', permission.value);
    console.log('设备', res.data.data);
//  console.log('permission.value', permission.value);
    // console.log('设备', res.data.data);
    if (permission.value?.device_statistics_six) {
      const { move_list, ...filteredData } = res.data.data;
      const { move_list, monitor_list, ...filteredData } = res.data.data;
      newtitleData.value = filteredData;

      return;
    }

    for (let key in res.data.data) {
      if (
        permission.value?.device_statistics_four &&
        (key === 'flow_type_list' || key === 'insure_list')
      )
        continue;
      newtitleData.value[key] = res.data.data[key];
      if (permission.value?.device_statistics_four) {
        const { flow_type_list, insure_list, ...filteredData } = res.data.data;
        newtitleData.value = filteredData;
        return;
      }
    }
  });
};

const unitMap = {
  drone: '架',
  nest: '个',
  monitor: '个',
  mobile: '个',
  无人机流量: '架',
  无人机: '架',
  机巢: '个',
  机巢保险: '个',
  监控设备: '个',
  移动机巢: '个',
};

watch(
  () => [
    userInfo.value.detail?.areaCode,
    permission.value.device_statistics_six,
    permission.value?.device_statistics_four,
  ],
  () => getStaticsList(),
  { immediate: true }
);
onMounted(() => {
  getStaticsList();
});
@@ -375,7 +319,8 @@

<style scoped lang="scss">
.statistics {
  min-height: 174px;
  // height: 174px;
   height: pxToVh(174);
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 10px;
@@ -395,7 +340,7 @@
        font-weight: bold;
        font-size: 16px;
        color: #363636;
        font-family: 'YouSheBiaoTiHei';
        font-family: 'Source Han Sans CN';
      }

      img {
@@ -412,20 +357,32 @@
    padding: 0 14px 0 21px;
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
   height: pxToVh(80);
    display: flex;
   justify-content: space-between;
    justify-content: space-around;
    :deep(.el-empty ){
      width: 60px;
      height: pxToVh(60);
      .el-empty__image{
      width: 60px !important;
       height: pxToVh(60)!important;}
      .custom-text {
        font-size: 12px;
        color: #7c8091;
      }
    }
    .device-card {
      display: flex;
      align-items: center;
      margin-top: 30px;
      margin-left: 10px;

      .device-title {
        display: flex;
        align-items: center;

        img {
          width: 43px;
          height: 44px;
          width: 64px;
          height: 64px;
        }
      }

@@ -434,15 +391,18 @@
        font-weight: 400;
        font-size: 14px;
        color: #343434;

        div {
          margin-top: 5px;
        }
        .shu {
          font-weight: bold;
          font-size: 36px;
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'YouSheBiaoTiHei';
          font-family: 'Source Han Sans CN';
          // font-size: calc(12px + 0.5vw);
          margin-right: 2px;
        }

        span {
@@ -498,8 +458,8 @@
        align-items: center;

        img {
          width: 43px;
          height: 44px;
          width: 64px;
          height: 64px;
        }
      }

@@ -515,7 +475,8 @@
          color: #363636;
          display: inline-block;
          transform: skewX(-5deg);
          font-family: 'YouSheBiaoTiHei';
          font-family: 'Source Han Sans CN';
          margin-right: 2px;
        }

        span {