跟香港

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]
 });

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)">
+      <div class="marks f12 absolute" :class="changeBg(props.item.yjJb)">
-        <DictTag :tag="false" :value="props.item.czzt" :options="props.dic._GS_ZDR_CZZT" />
+        <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);
     }
   }
 

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="hed flex align-center">预警处置统计</div>
-        <div class="comm-cnt">
+        <div class="comm-cnt" v-loading="list.YjczDate.loading">
-          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
+          <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: {
+  YjczDate: {
-    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+    loading:false,
+    xDate: [],
     list: [],
   },
+  // 布控区域统计
   RylxDate: {
-    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
+    loading:false,
-    list: [
+    xDate: [],
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
+    list: [],
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
-    ],
   },
-  QylxDate: {
+  // 感知源
-    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
+  GzyDate: {
-    list: [
+    xDate: [],
-      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
+    list: [],
-      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
+    loading:false,
-    ],
   },
- 
 })
 const personList = ref([]);
 const pageNum = ref(1)
@@ -149,25 +149,45 @@ const getList = () =>{
 }
 
 const init = () =>{
+  // 预警处置统计
+  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/getYjxxTjYjlx').then(res=>{
+  list.YjczDate.RylxDate = true;
-    console.log(res,'====布控区域统计');
+  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 = [ 
+    list.GzyDate.list = [{ 
-      { name: "", 
+      value: res.map(item=>item.num),
-        value: res.map(item=>item.num),
+      color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], 
-        color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], 
+      hatColor: '#087df9' 
-        hatColor: '#087df9' 
+    }]
-      }
-    ]
   })
 
   // 预警级别
+  loadingyj.value = true;
   qcckGet({},'/mosty-jmxf/tbYjxx/getYjxxTj').then(res=>{
+    loadingyj.value = false;
     yjjbRef.value.initCharts(res)
   })
 }

src/views/backOfficeSystem/JudgmentHome/MeetingRoom/index.vue

@@ -53,7 +53,7 @@
           <el-link type="danger" @click="delDictItem(item.id)"><el-icon><Delete /></el-icon>删除</el-link>
         </div>
       </li>
-       <MOSTY.Empty :show="!pageData.loading && pageData.list.length <= 0"></MOSTY.Empty>
+      <MOSTY.Empty :show="!pageData.loading && pageData.list.length <= 0"></MOSTY.Empty>
     </ul>
     <Pages
       @changeNo="changeNo"

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:
+        default:  return "blue";
-            return "blue";
     }
 };
 </script>

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%"
     },