跟香港

2025-07-15 16:20:18 +08:00
parent 26b52c0175
commit 3b6e0d6912
6 changed files with 81 additions and 42 deletions
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@ -8,6 +8,7 @@
          :index="index"
          :class="item.elTagType"
          @click="handleItem(item)"
+          :style="{color: props.color}"
          >{{ item.label || item.zdmc }}</span>
        <el-tag
          v-else
@ -33,6 +34,10 @@ const props = defineProps({
    type: Array,
    default: null
  },
+  color:{
+    type:String,
+    default:'#fff'
+  },
  tag: false,
  value: [Number, String, Array]
 });
--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue
@ -3,8 +3,8 @@
    <div class="cxbq f14 lh50 tc absolute" v-if="props.item.czzt == '03'">已完成</div>
    <el-button color="#0072ff" size="small" class="btn_qs f14 tc absolute">签收</el-button>
    <div class="avatarBox relative">
-      <div class="marks f12 absolute" :class="changeBg(props.item.yjjb)">
-        <DictTag :tag="false" :value="props.item.czzt" :options="props.dic._GS_ZDR_CZZT" />
+      <div class="marks f12 absolute" :class="changeBg(props.item.yjJb)">
+        <span>{{ changetText(props.item.yjJb) }}</span>
      </div>
      <div>
        <el-image :preview-teleported="true" style="width: 80px; height: 110px" :src="props.item.yjTp" :preview-src-list="[props.item.yjTp]"/>
@ -62,9 +62,24 @@ const changeBg = (type) => {
    case "40":
      return "marks_blue";
    default:
-      return "marks_red";
+      return "marks_blue";
  }
 };
+const changetText = (type) => {
+  switch (type) {
+    case "10":
+      return "处置";
+    case "20":
+      return "提醒";
+    case "30":
+      return "关注";
+    case "40":
+      return "不关注";
+    default:
+      return "不关注";
+  }
+};
+
 </script>

 <style lang="scss" scoped>
@ -120,19 +135,19 @@ const changeBg = (type) => {
    }

    .marks_red {
-      background: rgba(255, 62, 62, 0.75);
+      background: rgba(255, 62, 62, 0.35);
    }

    .marks_orange {
-      background: rgba(255, 155, 62, 0.75);
+      background: rgba(255, 155, 62, 0.35);
    }

    .marks_yellow {
-      background: rgba(255, 239, 62, 0.75);
+      background: rgba(255, 239, 62, 0.35);
    }

    .marks_blue {
-      background: rgba(0, 114, 255, 0.75);
+      background: rgba(0, 114, 255, 0.35);
    }
  }

--- a/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
+++ b/src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue
@ -27,35 +27,36 @@
        <li v-for="(item, index) in personList" :key="index">
          <YjItem :item="item" type="yj" :dic="{D_BZ_YJCZZT}"></YjItem>
        </li>
+        <MOSTY.Empty :show="!loading && personList.length <= 0"></MOSTY.Empty>
      </ul>
    </div>
    <!-- 右边模块 -->
    <div class="rightList">
      <!-- 第一部门 -->
      <div class="model-commom">
-        <div class="hed flex align-center">区域统计</div>
-        <div class="comm-cnt">
-          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
+        <div class="hed flex align-center">预警处置统计</div>
+        <div class="comm-cnt" v-loading="list.YjczDate.loading">
+          <BarHatEcharts echartsId="qylxEcharts" :data="list.YjczDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">布控区域统计</div>
-        <div class="comm-cnt">
+        <div class="comm-cnt" v-loading="list.RylxDate.loading">
          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">感知源统计</div>
-        <div class="comm-cnt">
+        <div class="comm-cnt" v-loading="list.GzyDate.loading">
          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第四部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">预警等级统计</div>
-        <div class="comm-cnt">
+        <div class="comm-cnt" v-loading="loadingyj">
          <WarningCount ref="yjjbRef"></WarningCount>
        </div>
      </div>
@ -98,27 +99,26 @@ const search = reactive({
  ]
 });
 const loading = ref(false)
+const loadingyj = ref(false)
 const list = reactive({
-  // 感知源
-  GzyDate: {
-    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+  // 预警处置统计
+  YjczDate: {
+    loading:false,
+    xDate: [],
    list: [],
  },
+  // 布控区域统计
  RylxDate: {
-    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
-    list: [
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
+    loading:false,
+    xDate: [],
+    list: [],
  },
-  QylxDate: {
-    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
-    list: [
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
+  // 感知源
+  GzyDate: {
+    xDate: [],
+    list: [],
+    loading:false,
  },
- 
 })
 const personList = ref([]);
 const pageNum = ref(1)
@ -149,25 +149,45 @@ const getList = () =>{
 }

 const init = () =>{
-  // 布控区域统计
-  qcckGet({},'/mosty-jmxf/tbYjxx/getYjxxTjYjlx').then(res=>{
-    console.log(res,'====布控区域统计');
+  // 预警处置统计
+  list.YjczDate.loading = true;
+  qcckGet({},'/mosty-jmxf/tbYjxx/getYjCzztTj').then(res=>{
+    list.YjczDate.loading = false;
+    list.YjczDate.xDate = res.map(item=>item.zdmc);
+    list.YjczDate.list = [{ 
+      value: res.map(item=>item.count),
+      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], 
+      hatColor: '#087df9' 
+    }]
  })
-
-  // 感知元统计
-  qcckGet({},'/mosty-jmxf/tbYjxx/getGzyTj').then(res=>{
-    list.GzyDate.xDate = res.map(item=>item.yj_gzymc);
-    list.GzyDate.list = [ 
-      { name: "", 
+  // 布控区域统计
+  list.YjczDate.RylxDate = true;
+  qcckGet({},'/mosty-gsxt/tbGsxtBkQy/getBkQytj').then(res=>{
+    list.YjczDate.RylxDate = false;
+    list.RylxDate.xDate = res.map(item=>item.qymc);
+    list.RylxDate.list = [{ 
      value: res.map(item=>item.num),
      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], 
      hatColor: '#087df9' 
-      }
-    ]
+    }]
+  })
+
+  // 感知元统计
+  list.GzyDate.RylxDate = true;
+  qcckGet({},'/mosty-jmxf/tbYjxx/getGzyTj').then(res=>{
+    list.GzyDate.RylxDate = false;
+    list.GzyDate.xDate = res.map(item=>item.yj_gzymc);
+    list.GzyDate.list = [{ 
+      value: res.map(item=>item.num),
+      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], 
+      hatColor: '#087df9' 
+    }]
  })

  // 预警级别
+  loadingyj.value = true;
  qcckGet({},'/mosty-jmxf/tbYjxx/getYjxxTj').then(res=>{
+    loadingyj.value = false;
    yjjbRef.value.initCharts(res)
  })
 }
--- a/src/views/home/components/yjItem.vue
+++ b/src/views/home/components/yjItem.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
+  <div class="warning-card flex align-center" :class="changeBG(item.yjJb)">
    <div class="warning-image">
      <img :src="item.yjTp" width="80" height="120" alt="" />
    </div>
@ -39,8 +39,7 @@ const changeBG = (str) => {
            return "orange";
        case "30":
            return "yellow";
-        default:
-            return "blue";
+        default:  return "blue";
    }
 };
 </script>
--- a/src/views/home/echarts/barHatEcharts.vue
+++ b/src/views/home/echarts/barHatEcharts.vue
@ -76,7 +76,7 @@ function lineChartFn(xDate,legend,series) {
    },
    grid: {
      top: "25%",
-      right: "5%",
+      right: "8%",
      left: "10%",
      bottom: "22%"
    },