1. 煤监局粉尘单位管理页面样式调整

2. 球阀设备监测页面调整
3. 亚美大宁局部风机历史数据过滤调整

src/views/vent/home/dustInfoTj/index.vue

@@ -7,51 +7,90 @@
           <div :class="activeIndex == '1' ? 'tabs-item1' : 'tabs-item'" @click="getChange('1')">信息列表</div>
           <div :class="activeIndex == '2' ? 'tabs-item1' : 'tabs-item'" @click="getChange('2')">信息统计</div>
         </div>
-        <!-- 信息列表 -->
-        <div class="content-search" v-if="activeIndex == '1'">
-          <div class="risk-select">
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="查询类别"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="地区分布"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="原煤产量"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="发病等级"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="时间起点"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-            <a-select style="width: 220px" v-model:value="selectVal" allowClear placeholder="时间终点"
-              class="code-mode-select" @change="changeSelect">
-              <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
-            </a-select>
-          </div>
-        </div>
-        <div class="content-table" v-if="activeIndex == '1'">
-          <div class="table-head">
-            <div class="head-item" v-for="(ite, ind) in headList" :key="ind">{{ ite.label }}</div>
+        <div class="table-box" v-if="activeIndex == '1'">
+          <!-- 信息列表 -->
+          <div class="content-search">
+            <div class="risk-select">
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="查询类别"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="地区分布"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="原煤产量"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="发病等级"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="时间起点"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+              <a-select
+                style="width: 220px"
+                v-model:value="selectVal"
+                allowClear
+                placeholder="时间终点"
+                class="code-mode-select"
+                @change="changeSelect"
+              >
+                <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode" />
+              </a-select>
+            </div>
           </div>
-          <div class="table-cont">
-            <div class="cont-item" v-for="(item, index) in contList" :key="index">
-              <div class="item-val">{{ item.id }}</div>
-              <div class="item-val">{{ item.name }}</div>
-              <div class="item-val">{{ item.address }}</div>
-              <div class="item-val">{{ item.production }}</div>
-              <div class="item-val">{{ item.person }}</div>
-              <div class="item-val">{{ item.br }}</div>
-              <div :class="contList.length > 18 ? 'item-val1' : 'item-val'">{{ item.brz }}</div>
+          <div class="content-table" v-if="activeIndex == '1'">
+            <div class="table-head">
+              <div class="head-item" v-for="(ite, ind) in headList" :key="ind">{{ ite.label }}</div>
+            </div>
+            <div class="table-cont">
+              <div class="cont-item" v-for="(item, index) in contList" :key="index">
+                <div class="item-val">{{ item.id }}</div>
+                <div class="item-val">{{ item.name }}</div>
+                <div class="item-val">{{ item.address }}</div>
+                <div class="item-val">{{ item.production }}</div>
+                <div class="item-val">{{ item.person }}</div>
+                <div class="item-val">{{ item.br }}</div>
+                <div :class="contList.length > 18 ? 'item-val1' : 'item-val'">{{ item.brz }}</div>
+              </div>
             </div>
           </div>
         </div>
+
         <!-- 统计信息 -->
         <div v-if="activeIndex == '2'" class="echartBoxs">
           <div class="echart-box">
@@ -61,841 +100,884 @@
             <div class="pieboxall" ref="pieboxall"></div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, defineProps, nextTick } from 'vue';
-import customHeader from '/@/components/vent/customHeader.vue';
-import * as echarts from 'echarts';
-import type { SelectProps } from 'ant-design-vue';
-
-let props = defineProps({
-  airKjStatus: {
-    type: Array,
-    default: () => {
-      return [];
+  import { ref, reactive, watch, defineProps, nextTick } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import * as echarts from 'echarts';
+  import type { SelectProps } from 'ant-design-vue';
+  import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight';
+
+  let props = defineProps({
+    airKjStatus: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  });
+
+  let activeIndex = ref('1');
+  //获取dom元素节点
+  let piebox = ref<any>();
+  let pieboxall = ref<any>();
+  let mineTitle = ref('矿井通风状态监测');
+  let selectVal = ref<string | undefined>(undefined);
+  let selectList = ref<SelectProps['options']>([
+    { value: 'jack', label: 'Jack' },
+    { value: 'lucy', label: 'Lucy' },
+    { value: 'tom', label: 'Tom' },
+  ]);
+  let contList = reactive<any[]>([
+    { id: '1', name: '柳塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '2', name: '寸草塔二矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '3', name: '布尔台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '4', name: '乌兰木伦矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '5', name: '寸草塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '6', name: '石圪台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '7', name: '补连塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '8', name: '哈拉沟矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '9', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '10', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '11', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '12', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '13', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '14', name: '保德矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '15', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '16', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '17', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '18', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '19', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+    { id: '20', name: '保德矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
+  ]);
+  let headList = reactive<any>([
+    { label: '序号' },
+    { label: '矿井名称' },
+    { label: '所属地区市/县' },
+    { label: '原煤产量/百万吨' },
+    { label: '从业人数/人' },
+    { label: '尘肺病累计病例/人' },
+    { label: '本年度尘肺病病例/人' },
+  ]);
+
+  let xData1 = reactive<any[]>(['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市']);
+  let yData1 = reactive<any[]>([
+    { value: 3, name: '西安市' },
+    { value: 14, name: '宝鸡市' },
+    { value: 10, name: '咸阳市' },
+    { value: 4, name: '铜川市' },
+    { value: 5, name: '渭南市' },
+    { value: 9, name: '延安市' },
+    { value: 18, name: '榆林市' },
+    { value: 14, name: '汉中市' },
+    { value: 9, name: '安康市' },
+    { value: 14, name: '商洛市' },
+  ]);
+  let xData2 = reactive<any[]>(['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县', '子洲县']);
+  let yData2 = reactive<any[]>([
+    {
+      name: '横山区',
+      value: 10,
+    },
+    {
+      name: '神木市',
+      value: 10,
+    },
+    {
+      name: '府谷县',
+      value: 10,
+    },
+    {
+      name: '靖边县',
+      value: 10,
+    },
+    {
+      name: '定边县',
+      value: 10,
+    },
+    {
+      name: '绥德县',
+      value: 10,
     },
-  },
-});
-
-let activeIndex = ref('1');
-//获取dom元素节点
-let piebox = ref<any>();
-let pieboxall = ref<any>();
-let mineTitle = ref('矿井通风状态监测');
-let selectVal = ref<string | undefined>(undefined);
-let selectList = ref<SelectProps['options']>([
-  { value: 'jack', label: 'Jack' },
-  { value: 'lucy', label: 'Lucy' },
-  { value: 'tom', label: 'Tom' },
-]);
-let contList = reactive<any[]>([
-  { id: '1', name: '柳塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '2', name: '寸草塔二矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '3', name: '布尔台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '4', name: '乌兰木伦矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '5', name: '寸草塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '6', name: '石圪台矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '7', name: '补连塔矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '8', name: '哈拉沟矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '9', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '10', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '11', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '12', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '13', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '14', name: '保德矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '15', name: '上湾矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '16', name: '活鸡兔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '17', name: '大柳塔井', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '18', name: '锦界矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '19', name: '榆家梁矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-  { id: '20', name: '保德矿', address: '陕西省榆林市', production: 800, person: 1435, br: 1, brz: 1 },
-]);
-let headList = reactive<any>([
-  { label: '序号' },
-  { label: '矿井名称' },
-  { label: '所属地区市/县' },
-  { label: '原煤产量/百万吨' },
-  { label: '从业人数/人' },
-  { label: '尘肺病累计病例/人' },
-  { label: '本年度尘肺病病例/人' },
-]);
-
-let xData1 = reactive<any[]>(['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'])
-let yData1 = reactive<any[]>([
-  { value: 3, name: '西安市' },
-  { value: 14, name: '宝鸡市' },
-  { value: 10, name: '咸阳市' },
-  { value: 4, name: '铜川市' },
-  { value: 5, name: '渭南市' },
-  { value: 9, name: '延安市' },
-  { value: 18, name: '榆林市' },
-  { value: 14, name: '汉中市' },
-  { value: 9, name: '安康市' },
-  { value: 14, name: '商洛市' },
-])
-let xData2 = reactive<any[]>(['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县', '子洲县'])
-let yData2 = reactive<any[]>([
-  {
-    name: '横山区',
-    value: 10,
-  },
-  {
-    name: '神木市',
-    value: 10,
-  },
-  {
-    name: '府谷县',
-    value: 10,
-  },
-  {
-    name: '靖边县',
-    value: 10,
-  },
-  {
-    name: '定边县',
-    value: 10,
-  },
-  {
-    name: '绥德县',
-    value: 10,
-  },
-  {
-    name: '米脂县',
-    value: 10,
-  },
-  {
-    name: '佳县',
-    value: 10,
-  },
-  {
-    name: '吴堡县',
-    value: 10,
-  },
-  {
-    name: '清涧县',
-    value: 10,
-  },
-  {
-    name: '子洲县',
-    value: 10,
-  },
-])
-let title2=ref('榆林市')
-//tabs选项切换
-function getChange(active) {
-  activeIndex.value = active;
-  switch (activeIndex.value) {
-    case '1':
-      break;
-    case '2':
-      getOption();
-      getOptionAll();
-      break;
+    {
+      name: '米脂县',
+      value: 10,
+    },
+    {
+      name: '佳县',
+      value: 10,
+    },
+    {
+      name: '吴堡县',
+      value: 10,
+    },
+    {
+      name: '清涧县',
+      value: 10,
+    },
+    {
+      name: '子洲县',
+      value: 10,
+    },
+  ]);
+  let title2 = ref('榆林市');
+  //tabs选项切换
+  function getChange(active) {
+    activeIndex.value = active;
+    switch (activeIndex.value) {
+      case '1':
+        break;
+      case '2':
+        getOption();
+        getOptionAll();
+        break;
+    }
   }
-}
-//下拉框选项切换
-function changeSelect(val) { }
-function getOption() {
-  nextTick(() => {
-    let myChart = echarts.init(piebox.value);
-    let option = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)',
-      },
-      color: ['#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'],
-      title: {
-        text: '陕西省尘肺病地区比例分析',
-        left: 'center',
-        top: 20,
-        textStyle: {
-          color: '#00d8ff',
-          fontSize: 16,
+  //下拉框选项切换
+  function changeSelect(val) {}
+  function getOption() {
+    nextTick(() => {
+      let myChart = echarts.init(piebox.value);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
         },
-      },
-      legend: {
-        orient: 'vertical',
-        right: 30,
-        align: 'auto',
-        top: 'middle',
-        itemGap: 10,
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
+        color: ['#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'],
+        title: {
+          text: '陕西省尘肺病地区比例分析',
+          left: 'center',
+          top: 50,
+          textStyle: {
+            color: '#00d8ff',
+            fontSize: 30,
+          },
         },
-        icon: 'circle',
-        data: xData1,
-      },
-      series: [
-        {
-          name: '比例分析',
-          type: 'pie',
-          radius: '50%',
-          center: ['45%', '50%'],
-          data: yData1,
+        legend: {
+          orient: 'vertical',
+          right: 150,
+          align: 'auto',
+          top: 'middle',
+          itemGap: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 16,
+          },
+          icon: 'circle',
+          data: xData1,
+        },
+        series: [
+          {
+            name: '比例分析',
+            type: 'pie',
+            radius: '40%',
+            center: ['40%', '50%'],
+            data: yData1,
 
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                fontSize: 12,
-                color: '#fff',
-                formatter: '{b} : {d}%',
-              },
-            },
-            labelLine: {
+            itemStyle: {
               normal: {
-                show: true,
-                length: 50,
-                length2: 50,
-                lineStyle: {
+                label: {
+                  show: true,
+                  fontSize: 14,
+                  fontWeight: 600,
                   color: '#fff',
-                  width: 2,
+                  formatter: '{b} : {d}%',
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: true,
+                  length: 50,
+                  length2: 50,
+                  lineStyle: {
+                    color: '#fff',
+                    width: 2,
+                  },
                 },
               },
             },
           },
+        ],
+      };
+      myChart.setOption(option);
+      // 监听柱状图的点击事件
+      myChart.on('click', function (params) {
+        console.log(params, 'params----------');
+        xData2.length = 0;
+        yData2.length = 0;
+        title2.value = params.name;
+        if (params.name == '西安市') {
+          xData2 = ['新城区', '碑林区', '莲湖区', '雁塔区', '未央区', '灞桥区', '阎良区', '临潼区', '长安区', '鄠邑区', '高陵区', '周至县', '蓝田县'];
+          yData2 = [
+            { name: '新城区', value: 5 },
+            { name: '碑林区', value: 5 },
+            { name: '莲湖区', value: 5 },
+            { name: '雁塔区', value: 5 },
+            { name: '未央区', value: 5 },
+            { name: '灞桥区', value: 5 },
+            { name: '阎良区', value: 5 },
+            { name: '临潼区', value: 5 },
+            { name: '鄠邑区', value: 5 },
+            { name: '高陵区', value: 5 },
+            { name: '周至县', value: 5 },
+            { name: '蓝田县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '宝鸡市') {
+          xData2 = ['渭滨区', '金台区', '陈仓区', '凤翔区', '岐山县', '扶风县', '眉县', '陇县', '千阳县', '麟游县', '凤县', '太白县'];
+          yData2 = [
+            { name: '渭滨区', value: 5 },
+            { name: '金台区', value: 5 },
+            { name: '陈仓区', value: 5 },
+            { name: '凤翔区', value: 5 },
+            { name: '岐山县', value: 5 },
+            { name: '扶风县', value: 5 },
+            { name: '眉县', value: 5 },
+            { name: '陇县', value: 5 },
+            { name: '千阳县', value: 5 },
+            { name: '麟游县', value: 5 },
+            { name: '凤县', value: 5 },
+            { name: '太白县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '咸阳市') {
+          xData2 = ['秦都区', '渭城区', '彬州市', '兴平市', '武功县', '礼泉县', '泾阳县', '三原县', '永寿县', '彬县', '长武县', '旬邑县', '淳化县'];
+          yData2 = [
+            { name: '秦都区', value: 5 },
+            { name: '渭城区', value: 5 },
+            { name: '彬州市', value: 5 },
+            { name: '兴平市', value: 5 },
+            { name: '武功县', value: 5 },
+            { name: '礼泉县', value: 5 },
+            { name: '泾阳县', value: 5 },
+            { name: '三原县', value: 5 },
+            { name: '永寿县', value: 5 },
+            { name: '彬县', value: 5 },
+            { name: '长武县', value: 5 },
+            { name: '旬邑县', value: 5 },
+            { name: '淳化县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '铜川市') {
+          xData2 = ['耀州区', '王益区', '印台区', '宜君县'];
+          yData2 = [
+            { name: '耀州区', value: 5 },
+            { name: '王益区', value: 5 },
+            { name: '印台区', value: 5 },
+            { name: '宜君县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '渭南市') {
+          xData2 = ['临渭区', '华州区', '潼关县', '大荔县', '合阳县', '澄城县', '白水县', '蒲城县', '富平县', '韩城市', '华阴市'];
+          yData2 = [
+            { name: '临渭区', value: 5 },
+            { name: '华州区', value: 5 },
+            { name: '潼关县', value: 5 },
+            { name: '大荔县', value: 5 },
+            { name: '合阳县', value: 5 },
+            { name: '澄城县', value: 5 },
+            { name: '白水县', value: 5 },
+            { name: '蒲城县', value: 5 },
+            { name: '富平县', value: 5 },
+            { name: '韩城市', value: 5 },
+            { name: '华阴市', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '延安市') {
+          xData2 = [
+            '宝塔区',
+            '安塞区',
+            '子长市‌',
+            '延长县',
+            '延川县',
+            '志丹县',
+            '吴起县',
+            '甘泉县',
+            '‌富县',
+            '洛川县‌',
+            '宜川县‌',
+            '黄陵县‌',
+            '黄龙县',
+          ];
+          yData2 = [
+            { name: '宝塔区', value: 5 },
+            { name: '安塞区', value: 5 },
+            { name: '子长市‌', value: 5 },
+            { name: '延长县', value: 5 },
+            { name: '延川县', value: 5 },
+            { name: '志丹县', value: 5 },
+            { name: '吴起县', value: 5 },
+            { name: '甘泉县', value: 5 },
+            { name: '‌富县', value: 5 },
+            { name: '洛川县‌', value: 5 },
+            { name: '宜川县‌', value: 5 },
+            { name: '黄陵县‌', value: 5 },
+            { name: '黄龙县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '榆林市') {
+          xData2 = ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县', '子洲县'];
+          yData2 = [
+            {
+              name: '横山区',
+              value: 10,
+            },
+            {
+              name: '神木市',
+              value: 10,
+            },
+            {
+              name: '府谷县',
+              value: 10,
+            },
+            {
+              name: '靖边县',
+              value: 10,
+            },
+            {
+              name: '定边县',
+              value: 10,
+            },
+            {
+              name: '绥德县',
+              value: 10,
+            },
+            {
+              name: '米脂县',
+              value: 10,
+            },
+            {
+              name: '佳县',
+              value: 10,
+            },
+            {
+              name: '吴堡县',
+              value: 10,
+            },
+            {
+              name: '清涧县',
+              value: 10,
+            },
+            {
+              name: '子洲县',
+              value: 10,
+            },
+          ];
+          getOptionAll();
+        } else if (params.name == '汉中市') {
+          xData2 = ['汉台区', '南郑区', '城固区', '勉县', '洋县', '西乡县', '宁强县', '略阳县', '镇巴县', '留坝县', '佛坪县'];
+          yData2 = [
+            { name: '汉台区', value: 5 },
+            { name: '南郑区', value: 5 },
+            { name: '城固区', value: 5 },
+            { name: '勉县', value: 5 },
+            { name: '洋县', value: 5 },
+            { name: '西乡县', value: 5 },
+            { name: '宁强县', value: 5 },
+            { name: '略阳县', value: 5 },
+            { name: '镇巴县', value: 5 },
+            { name: '留坝县', value: 5 },
+            { name: '佛坪县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '安康市') {
+          xData2 = ['汉滨区', '旬阳市', '汉阴县', '石泉县', '宁陕县', '紫阳县', '岚皋县', '平利县', '镇坪县', '白河县'];
+          yData2 = [
+            { name: '汉滨区', value: 5 },
+            { name: '旬阳市', value: 5 },
+            { name: '汉阴县', value: 5 },
+            { name: '石泉县', value: 5 },
+            { name: '宁陕县', value: 5 },
+            { name: '紫阳县', value: 5 },
+            { name: '岚皋县', value: 5 },
+            { name: '平利县', value: 5 },
+            { name: '镇坪县', value: 5 },
+            { name: '白河县', value: 5 },
+          ];
+          getOptionAll();
+        } else if (params.name == '商洛市') {
+          xData2 = ['商州区', '洛南县', '丹凤县', '商南县', '山阳县', '镇安县', '柞水县'];
+          yData2 = [
+            { name: '商州区', value: 5 },
+            { name: '洛南县', value: 5 },
+            { name: '丹凤县', value: 5 },
+            { name: '商南县', value: 5 },
+            { name: '山阳县', value: 5 },
+            { name: '镇安县', value: 5 },
+            { name: '柞水县', value: 5 },
+          ];
+          getOptionAll();
+        }
+      });
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  function getOptionAll() {
+    nextTick(() => {
+      let rich = {
+        white: {
+          color: '#fff',
+          align: 'center',
+          fontSize: 12,
+          padding: [0, 0],
         },
-      ],
-    };
-    myChart.setOption(option);
-    // 监听柱状图的点击事件
-    myChart.on('click', function (params) {
-      console.log(params, 'params----------')
-      xData2.length = 0
-      yData2.length = 0
-      title2.value=params.name
-      if (params.name == '西安市') {
-        xData2 = ['新城区', '碑林区', '莲湖区', '雁塔区', '未央区', '灞桥区', '阎良区', '临潼区', '长安区', '鄠邑区', '高陵区', '周至县', '蓝田县']
-        yData2 = [
-          { name: '新城区', value: 5 },
-          { name: '碑林区', value: 5 },
-          { name: '莲湖区', value: 5 },
-          { name: '雁塔区', value: 5 },
-          { name: '未央区', value: 5 },
-          { name: '灞桥区', value: 5 },
-          { name: '阎良区', value: 5 },
-          { name: '临潼区', value: 5 },
-          { name: '鄠邑区', value: 5 },
-          { name: '高陵区', value: 5 },
-          { name: '周至县', value: 5 },
-          { name: '蓝田县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '宝鸡市') {
-        xData2 = ['渭滨区', '金台区', '陈仓区', '凤翔区', '岐山县', '扶风县', '眉县', '陇县', '千阳县', '麟游县', '凤县', '太白县',]
-        yData2 = [
-          { name: '渭滨区', value: 5 },
-          { name: '金台区', value: 5 },
-          { name: '陈仓区', value: 5 },
-          { name: '凤翔区', value: 5 },
-          { name: '岐山县', value: 5 },
-          { name: '扶风县', value: 5 },
-          { name: '眉县', value: 5 },
-          { name: '陇县', value: 5 },
-          { name: '千阳县', value: 5 },
-          { name: '麟游县', value: 5 },
-          { name: '凤县', value: 5 },
-          { name: '太白县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '咸阳市') {
-        xData2 = ['秦都区', '渭城区', '彬州市', '兴平市', '武功县', '礼泉县', '泾阳县', '三原县', '永寿县', '彬县', '长武县', '旬邑县','淳化县']
-        yData2 = [
-          { name: '秦都区', value: 5 },
-          { name: '渭城区', value: 5 },
-          { name: '彬州市', value: 5 },
-          { name: '兴平市', value: 5 },
-          { name: '武功县', value: 5 },
-          { name: '礼泉县', value: 5 },
-          { name: '泾阳县', value: 5 },
-          { name: '三原县', value: 5 },
-          { name: '永寿县', value: 5 },
-          { name: '彬县', value: 5 },
-          { name: '长武县', value: 5 },
-          { name: '旬邑县', value: 5 },
-          { name: '淳化县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '铜川市') {
-        xData2 = ['耀州区', '王益区', '印台区', '宜君县', ]
-        yData2 = [
-          { name: '耀州区', value: 5 },
-          { name: '王益区', value: 5 },
-          { name: '印台区', value: 5 },
-          { name: '宜君县', value: 5 },
-        ]
-        getOptionAll();
-
-      } else if (params.name == '渭南市') {
-        xData2 = ['临渭区', '华州区', '潼关县', '大荔县', '合阳县', '澄城县', '白水县', '蒲城县', '富平县', '韩城市', '华阴市', ]
-        yData2 = [
-          { name: '临渭区', value: 5 },
-          { name: '华州区', value: 5 },
-          { name: '潼关县', value: 5 },
-          { name: '大荔县', value: 5 },
-          { name: '合阳县', value: 5 },
-          { name: '澄城县', value: 5 },
-          { name: '白水县', value: 5 },
-          { name: '蒲城县', value: 5 },
-          { name: '富平县', value: 5 },
-          { name: '韩城市', value: 5 },
-          { name: '华阴市', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '延安市') {
-        xData2 = ['宝塔区', '安塞区', '子长市‌', '延长县', '延川县', '志丹县', '吴起县', '甘泉县', '‌富县', '洛川县‌', '宜川县‌','黄陵县‌','黄龙县' ]
-        yData2 = [
-          { name: '宝塔区', value: 5 },
-          { name: '安塞区', value: 5 },
-          { name: '子长市‌', value: 5 },
-          { name: '延长县', value: 5 },
-          { name: '延川县', value: 5 },
-          { name: '志丹县', value: 5 },
-          { name: '吴起县', value: 5 },
-          { name: '甘泉县', value: 5 },
-          { name: '‌富县', value: 5 },
-          { name: '洛川县‌', value: 5 },
-          { name: '宜川县‌', value: 5 },
-          { name: '黄陵县‌', value: 5 },
-          { name: '黄龙县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '榆林市') {
-        xData2 = ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县', '子洲县']
-        yData2 = [
-          {
-            name: '横山区',
-            value: 10,
+      };
+      let placeHolderStyle = {
+        normal: {
+          label: {
+            show: false,
           },
-          {
-            name: '神木市',
-            value: 10,
-          },
-          {
-            name: '府谷县',
-            value: 10,
-          },
-          {
-            name: '靖边县',
-            value: 10,
-          },
-          {
-            name: '定边县',
-            value: 10,
-          },
-          {
-            name: '绥德县',
-            value: 10,
-          },
-          {
-            name: '米脂县',
-            value: 10,
-          },
-          {
-            name: '佳县',
-            value: 10,
-          },
-          {
-            name: '吴堡县',
-            value: 10,
+          labelLine: {
+            show: false,
           },
+          color: 'rgba(0, 0, 0, 0)',
+          borderColor: 'rgba(0, 0, 0, 0)',
+          borderWidth: 0,
+        },
+      };
+      let data: any[] = [];
+      let color1 = [
+        'rgb(255, 153, 153)',
+        'rgb(255, 176, 63)',
+        'rgb(61, 186, 45)',
+        'rgb(43, 166, 254)',
+        'rgb(255,222,0)',
+        'rgb(255,0,0)',
+        'rgb(0, 242, 255)',
+        '#faa526',
+        '#d5eb0f',
+        '#afec07',
+        '#f3f720',
+        '#0ee93d',
+        '#17d1b2',
+        '#2ae271',
+        '#11bce7',
+        '#c127f0',
+        '#ee125b',
+      ];
+
+      for (let i = 0; i < yData2.length; i++) {
+        data.push(
           {
-            name: '清涧县',
-            value: 10,
+            value: yData2[i].value,
+            name: yData2[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 2,
+                shadowBlur: 0,
+                borderColor: color1[i],
+                shadowColor: color1[i],
+                color: color1[i],
+                opacity: 1,
+              },
+            },
           },
           {
-            name: '子洲县',
-            value: 10,
-          },
-        ]
-        getOptionAll();
-      } else if (params.name == '汉中市') {
-        xData2 = ['汉台区', '南郑区',  '城固区', '勉县', '洋县', '西乡县', '宁强县', '略阳县', '镇巴县', '留坝县','佛坪县', ]
-        yData2 = [
-          { name: '汉台区', value: 5 },
-          { name: '南郑区', value: 5 },
-          { name: '城固区', value: 5 },
-          { name: '勉县', value: 5 },
-          { name: '洋县', value: 5 },
-          { name: '西乡县', value: 5 },
-          { name: '宁强县', value: 5 },
-          { name: '略阳县', value: 5 },
-          { name: '镇巴县', value: 5 },
-          { name: '留坝县', value: 5 },
-          { name: '佛坪县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '安康市') {
-        xData2 = ['汉滨区', '旬阳市',  '汉阴县', '石泉县', '宁陕县', '紫阳县', '岚皋县', '平利县', '镇坪县', '白河县', ]
-        yData2 = [
-          { name: '汉滨区', value: 5 },
-          { name: '旬阳市', value: 5 },
-          { name: '汉阴县', value: 5 },
-          { name: '石泉县', value: 5 },
-          { name: '宁陕县', value: 5 },
-          { name: '紫阳县', value: 5 },
-          { name: '岚皋县', value: 5 },
-          { name: '平利县', value: 5 },
-          { name: '镇坪县', value: 5 },
-          { name: '白河县', value: 5 },
-        ]
-        getOptionAll();
-      } else if (params.name == '商洛市') {
-        xData2 = ['商州区', '洛南县',  '丹凤县', '商南县', '山阳县', '镇安县', '柞水县',  ]
-        yData2 = [
-          { name: '商州区', value: 5 },
-          { name: '洛南县', value: 5 },
-          { name: '丹凤县', value: 5 },
-          { name: '商南县', value: 5 },
-          { name: '山阳县', value: 5 },
-          { name: '镇安县', value: 5 },
-          { name: '柞水县', value: 5 },
-        ]
-        getOptionAll();
+            value: 2,
+            name: '',
+            itemStyle: placeHolderStyle,
+          }
+        );
       }
-    });
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-function getOptionAll() {
-  nextTick(() => {
-    let rich = {
-      white: {
-        color: '#fff',
-        align: 'center',
-        fontSize: 12,
-        padding: [0, 0],
-      },
-    };
-    let placeHolderStyle = {
-      normal: {
-        label: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-        color: 'rgba(0, 0, 0, 0)',
-        borderColor: 'rgba(0, 0, 0, 0)',
-        borderWidth: 0,
-      },
-    };
-    let data: any[] = [];
-    let color1 = [
-      'rgb(255, 153, 153)',
-      'rgb(255, 176, 63)',
-      'rgb(61, 186, 45)',
-      'rgb(43, 166, 254)',
-      'rgb(255,222,0)',
-      'rgb(255,0,0)',
-      'rgb(0, 242, 255)',
-      '#faa526',
-      '#d5eb0f',
-      '#afec07',
-      '#f3f720',
-      '#0ee93d',
-      '#17d1b2',
-      '#2ae271',
-      '#11bce7',
-      '#c127f0',
-      '#ee125b',
-    ];
-
-    for (let i = 0; i < yData2.length; i++) {
-      data.push(
+      let seriesObj = [
         {
-          value: yData2[i].value,
-          name: yData2[i].name,
+          name: '',
+          type: 'pie',
+          clockWise: false,
+          radius: [10, 240],
+          center: ['50%', '50%'],
+          hoverAnimation: false,
           itemStyle: {
             normal: {
-              borderWidth: 2,
-              shadowBlur: 0,
-              borderColor: color1[i],
-              shadowColor: color1[i],
-              color: color1[i],
-              opacity: 1,
+              borderRadius: 30,
+              label: {
+                show: true,
+                position: 'inner',
+                fontSize: 14,
+                fontWeight: 600,
+                color: '#000',
+                formatter: function (params) {
+                  let percent: any = 0;
+                  let total = 0;
+                  for (var i = 0; i < yData2.length; i++) {
+                    total += yData2[i].value;
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0);
+                  if (params.name !== '') {
+                    return params.name + params.value;
+                  } else {
+                    return '';
+                  }
+                },
+                rich: rich,
+              },
+              labelLine: {
+                show: false,
+              },
             },
           },
+          data: data,
         },
-        {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle,
-        }
-      );
-    }
-    let seriesObj = [
-      {
-        name: '',
-        type: 'pie',
-        clockWise: false,
-        radius: [140, 180],
-        center: ['50%', '50%'],
-        hoverAnimation: false,
-        itemStyle: {
-          normal: {
-            label: {
-              show: true,
-              position: 'inner',
-              fontSize: 12,
-              color: '#fff',
-              formatter: function (params) {
-                let percent: any = 0;
-                let total = 0;
-                for (var i = 0; i < yData2.length; i++) {
-                  total += yData2[i].value;
-                }
-                percent = ((params.value / total) * 100).toFixed(0);
-                if (params.name !== '') {
-                  return params.name;
-                } else {
-                  return '';
-                }
-              },
-              rich: rich,
-            },
-            labelLine: {
-              show: false,
-            },
+      ];
+      let myChart = echarts.init(pieboxall.value);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)',
+        },
+        title: {
+          text: `${title2.value}尘肺病比例分析`,
+          left: 'center',
+          top: 50,
+          textStyle: {
+            color: '#00d8ff',
+            fontSize: 30,
           },
         },
-        data: data,
-      },
-    ];
-    let myChart = echarts.init(pieboxall.value);
-    let option = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b} : {c} ({d}%)',
-      },
-      title: {
-        text: `${title2.value}尘肺病比例分析`,
-        left: 'center',
-        top: 20,
-        textStyle: {
-          color: '#00d8ff',
-          fontSize: 16,
+        legend: {
+          // orient: 'vertical',
+          right: 'center',
+          // align: 'auto',
+          bottom: 30,
+          itemGap: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+          },
+          icon: 'circle',
+          data: xData2,
         },
-      },
-      legend: {
-        // orient: 'vertical',
-        right: 'center',
-        // align: 'auto',
-        bottom: 30,
-        itemGap: 10,
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
+        toolbox: {
+          show: false,
         },
-        icon: 'circle',
-        data: xData2,
-      },
-      toolbox: {
-        show: false,
-      },
-      series: seriesObj,
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-watch(
-  () => props.airKjStatus,
-  (newA, oldA) => {
-    console.log(newA, 'airKjStatus-----------');
-  },
-  {
-    immediate: true,
-    deep: true,
+        series: seriesObj,
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
   }
-);
+
+  watch(
+    () => props.airKjStatus,
+    (newA, oldA) => {
+      console.log(newA, 'airKjStatus-----------');
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
 </script>
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.dustInfoTj {
-  width: calc(100% - 20px);
-  height: calc(100% - 90px);
-  position: relative;
-  margin: 80px 10px 10px 10px;
-
-  .tj-content {
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .dustInfoTj {
+    width: calc(100% - 20px);
+    height: calc(100% - 90px);
     position: relative;
-    width: 100%;
-    height: 100%;
+    margin: 80px 10px 10px 10px;
 
-    .mine-content {
+    .tj-content {
+      position: relative;
+      width: 100%;
       height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .content-tabs {
-        width: 100%;
-        height: 45px;
-        padding: 0px 20px;
-        display: flex;
-        align-items: center;
-
-        .tabs-item {
-          color: #fff;
-          cursor: pointer;
-
-          &:nth-child(1) {
-            margin-right: 20px;
-          }
-        }
 
-        .tabs-item1 {
-          color: rgba(0, 216, 255);
-          cursor: pointer;
-          border-bottom: 2px solid;
-          border-image: linear-gradient(to right, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
-          margin-right: 20px;
-        }
-      }
-
-      .content-search {
-        position: relative;
-        width: 100%;
-        height: 45px;
-        margin-bottom: 15px;
+      .mine-content {
+        height: 100%;
         display: flex;
+        flex-direction: column;
         align-items: center;
 
-        .risk-select {
-          position: absolute;
-          width: 90%;
-          height: 40px;
-          left: 50%;
-          transform: translate(-50%, 0);
-          top: 0px;
-          background: url('@/assets/images/company/content-label.png') no-repeat center;
-          background-size: 100% 100%;
-          z-index: 9999;
+        .content-tabs {
+          width: 100%;
+          height: 50px;
+          padding: 0px 20px;
           display: flex;
           align-items: center;
+          font-size: 18px;
+          position: relative;
+          border: 1px solid #44d3ff70;
+          border-radius: 2px;
+          -webkit-backdrop-filter: blur(8px);
+          box-shadow: 0 0 20px #44b4ff33 inset;
+          background-color: #ffffff08;
+          .tabs-item {
+            color: #fff;
+            cursor: pointer;
+
+            &:nth-child(1) {
+              margin-right: 20px;
+            }
+          }
 
-          .zxm-select {
-            margin: 0 10px;
+          .tabs-item1 {
+            color: rgba(0, 216, 255);
+            cursor: pointer;
+            border-bottom: 2px solid;
+            border-image: linear-gradient(to right, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+            margin-right: 20px;
           }
         }
-      }
-
-      .content-table {
-        position: relative;
-        width: 90%;
-        height: calc(100% - 105px);
-        border: 1px solid rgba(0, 216, 255, 0.3);
-
-        .table-head {
-          display: flex;
-          justify-content: space-between;
-          height: 60px;
-          border-bottom: 1px solid rgba(0, 216, 255, 0.3);
-
-          .head-item {
+        .table-box {
+          width: 100%;
+          height: calc(100% - 60px);
+          border: 1px solid #44d3ff70;
+          border-radius: 2px;
+          -webkit-backdrop-filter: blur(8px);
+          box-shadow: 0 0 20px #44b4ff33 inset;
+          background-color: #ffffff08;
+          .content-search {
+            position: relative;
+            width: 100%;
+            height: 45px;
+            margin: 15px 0;
             display: flex;
             align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: rgba(0, 216, 255);
-            font-size: 14px;
-            border-right: 1px solid rgba(0, 216, 255, 0.1);
 
-            &:nth-child(1) {
-              width: 5%;
-              text-align: center;
-            }
-
-            &:nth-child(2) {
-              width: 18%;
-              text-align: center;
-            }
-
-            &:nth-child(3) {
-              width: 18%;
-              text-align: center;
-            }
-
-            &:nth-child(4) {
-              width: 18%;
-              text-align: center;
-            }
+            .risk-select {
+              position: absolute;
+              width: 90%;
+              height: 40px;
+              left: 50%;
+              transform: translate(-50%, 0);
+              top: 0px;
+              background: url('@/assets/images/company/content-label.png') no-repeat center;
+              background-size: 100% 100%;
+              z-index: 9999;
+              display: flex;
+              align-items: center;
 
-            &:nth-child(5) {
-              width: 5%;
-              text-align: center;
+              .zxm-select {
+                margin: 0 10px;
+              }
             }
+          }
 
-            &:nth-child(6) {
-              width: 18%;
-              text-align: center;
-            }
+          .content-table {
+            position: relative;
+            width: 100%;
+            height: calc(100% - 75px);
+            border: 1px solid rgba(0, 216, 255, 0.3);
 
-            &:nth-child(7) {
-              width: 18%;
-              text-align: center;
-            }
-          }
-        }
+            .table-head {
+              display: flex;
+              justify-content: space-between;
+              height: 60px;
+              border-bottom: 1px solid rgba(0, 216, 255, 0.3);
+
+              .head-item {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                color: rgba(0, 216, 255);
+                font-size: 14px;
+                border-right: 1px solid rgba(0, 216, 255, 0.1);
+
+                &:nth-child(1) {
+                  width: 5%;
+                  text-align: center;
+                }
 
-        .table-cont {
-          height: calc(100% - 61px);
+                &:nth-child(2) {
+                  width: 18%;
+                  text-align: center;
+                }
 
-          overflow-y: auto;
+                &:nth-child(3) {
+                  width: 18%;
+                  text-align: center;
+                }
 
-          .cont-item {
-            display: flex;
-            justify-content: space-between;
-            height: 36px;
-            border-bottom: 1px solid rgba(0, 216, 255, 0.1);
+                &:nth-child(4) {
+                  width: 18%;
+                  text-align: center;
+                }
 
-            .item-val {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 100%;
-              font-size: 14px;
-              border-right: 1px solid rgba(0, 216, 255, 0.1);
-              color: #fff;
+                &:nth-child(5) {
+                  width: 5%;
+                  text-align: center;
+                }
 
-              &:nth-child(1) {
-                width: 5%;
-                text-align: center;
-              }
+                &:nth-child(6) {
+                  width: 18%;
+                  text-align: center;
+                }
 
-              &:nth-child(2) {
-                width: 18%;
-                text-align: center;
+                &:nth-child(7) {
+                  width: 18%;
+                  text-align: center;
+                }
               }
+            }
 
-              &:nth-child(3) {
-                width: 18%;
-                text-align: center;
-              }
+            .table-cont {
+              height: calc(100% - 61px);
+
+              overflow-y: auto;
+
+              .cont-item {
+                display: flex;
+                justify-content: space-between;
+                height: 36px;
+                border-bottom: 1px solid rgba(0, 216, 255, 0.1);
+
+                .item-val {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  height: 100%;
+                  font-size: 14px;
+                  border-right: 1px solid rgba(0, 216, 255, 0.1);
+                  color: #fff;
+
+                  &:nth-child(1) {
+                    width: 5%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(2) {
+                    width: 18%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(3) {
+                    width: 18%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(4) {
+                    width: 18%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(5) {
+                    width: 5%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(6) {
+                    width: 18%;
+                    text-align: center;
+                  }
+
+                  &:nth-child(7) {
+                    width: 18%;
+                    text-align: center;
+                    border-right: none;
+                  }
+                }
 
-              &:nth-child(4) {
-                width: 18%;
-                text-align: center;
+                .item-val1 {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  height: 100%;
+                  font-size: 14px;
+                  color: #fff;
+                  width: 295px;
+                  text-align: center;
+                  border-right: none;
+                }
               }
+            }
+          }
+        }
 
-              &:nth-child(5) {
-                width: 5%;
-                text-align: center;
-              }
+        .echartBoxs {
+          width: 100%;
+          height: calc(100% - 45px);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          border: 1px solid #44d3ff70;
+          border-radius: 2px;
+          -webkit-backdrop-filter: blur(8px);
+          box-shadow: 0 0 20px #44b4ff33 inset;
+          background-color: #ffffff08;
+          &::after {
+            content: '';
+            position: absolute;
+            width: 300px;
+            height: 280px;
+            left: calc(50% - 100px);
+            background: url('@/assets/images/company/center-bg.png') no-repeat center;
+            background-size: cover;
+          }
+          .echart-box {
+            width: calc(50% - 10px);
+            height: 100%;
 
-              &:nth-child(6) {
-                width: 18%;
-                text-align: center;
-              }
+            background-size: 100% 100%;
 
-              &:nth-child(7) {
-                width: 18%;
-                text-align: center;
-                border-right: none;
-              }
+            .piebox {
+              width: 100%;
+              height: 100%;
             }
+          }
 
-            .item-val1 {
-              display: flex;
-              align-items: center;
-              justify-content: center;
+          .echart-all-box {
+            width: calc(50% - 10px);
+            height: 100%;
+            padding-left: 30px;
+            // background: url('@/assets/images/fire/bj1.png') no-repeat center;
+            background-size: 100% 100%;
+            .pieboxall {
+              width: 100%;
               height: 100%;
-              font-size: 14px;
-              color: #fff;
-              width: 295px;
-              text-align: center;
-              border-right: none;
             }
           }
         }
       }
+    }
+  }
 
-      .echartBoxs {
-        width: 100%;
-        height: calc(100% - 45px);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
+    height: 24px;
+  }
 
-        .echart-box {
-          width: calc(50% - 10px);
-          height: 100%;
-          background: url('@/assets/images/fire/bj1.png') no-repeat center;
-          background-size: 100% 100%;
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
+    height: 24px;
+  }
 
-          .piebox {
-            width: 100%;
-            height: 100%;
-          }
-        }
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+    line-height: 22px !important;
+  }
 
-        .echart-all-box {
-          width: calc(50% - 10px);
-          height: 100%;
-          background: url('@/assets/images/fire/bj1.png') no-repeat center;
-          background-size: 100% 100%;
+  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
+    line-height: 24px;
+  }
 
-          .pieboxall {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    background-color: transparent;
+    border-top: 0px;
+    border-bottom: 0px;
+    border-left: 2px solid;
+    border-right: 2px solid;
+    border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+  }
 
-    }
+  ::v-deep .zxm-select-arrow {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+
+  ::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
+    line-height: 24px !important;
   }
-}
-
-::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
-  height: 24px;
-}
-
-::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
-  height: 24px;
-}
-
-::v-deep .zxm-select-selection-placeholder {
-  color: #fff !important;
-  line-height: 22px !important;
-}
-
-::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
-  line-height: 24px;
-}
-
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-  background-color: transparent;
-  border-top: 0px;
-  border-bottom: 0px;
-  border-left: 2px solid;
-  border-right: 2px solid;
-  border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
-}
-
-::v-deep .zxm-select-arrow {
-  color: #fff !important;
-}
-
-::v-deep .zxm-select-selection-item {
-  color: #fff !important;
-}
-
-::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
-  line-height: 24px !important;
-}
 </style>

src/views/vent/monitorManager/alarmFire/common.data.ts

@@ -6,7 +6,6 @@ export const topList = [
     imgSrc: true,
     value: '--',
     text: '',
-    list: [],
   },
   {
     id: 1,
@@ -14,7 +13,6 @@ export const topList = [
     imgSrc: true,
     value: '--',
     text: '',
-    list: [],
   },
   {
     id: 2,
@@ -22,24 +20,20 @@ export const topList = [
     imgSrc: true,
     value: '--',
     text: '',
-    list: [],
   },
-  { id: 3, imgSrc: false, label: '预警等级', value: '正常', text: '', list: [] },
+  { id: 3, imgSrc: false, label: '预警等级', value: '正常', text: '' },
 ];
 
 //外因火灾-烟雾传感器table列
 export const columnsSmoke = [
   { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-  { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
-  { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
-  { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'value', title: '值', type: '1', align: 'center' },
+  { rowIndex: 4, dataIndex: 'shuju_time', title: '时间', type: '1', align: 'center' },
 ];
 
 //外因火灾-g光纤table列
 export const columnsFiber = [
   { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-  { rowIndex: 2, dataIndex: 'fmax', title: '最高温度(℃)', type: '1', align: 'center' },
-  { rowIndex: 3, dataIndex: 'favg', title: '平均温度(℃)', type: '1', align: 'center' },
-  { rowIndex: 3, dataIndex: 'fmin', title: '最低温度(℃)', type: '1', align: 'center' },
-  { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'value', title: '温度(℃)', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
 ];

src/views/vent/monitorManager/alarmFire/index.vue

@@ -28,23 +28,24 @@
     <div class="center-echart">
       <div class="table-item">
         <div></div>
-        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
-          <template #bodyCell="{ column, record }">
-            <a-tag v-if="column.dataIndex === 'warnLevel_str'" color="green">正常</a-tag>
-          </template>
-        </a-table>
+        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsSmoke" :data-source="deviceObject['smoke']['datalist']" :pagination="false" />
       </div>
       <div class="table-item">
         <div></div>
-        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsFiber" :data-source="monitorlistCf" :pagination="false" />
+        <a-table size="small" :scroll="{ y: 340 }" :columns="columnsFiber" :data-source="deviceObject['fiber']['datalist']" :pagination="false" />
       </div>
     </div>
     <!-- 底部区域 -->
     <div class="bot-content">
-      <div v-for="(item, index) in 13" :key="index" class="qf-box">
-        <div class="label">球阀{{ item < 10 ? '0' + item : item }}(<span>关</span>)</div>
+      <div v-for="(item, index) in deviceObject['qf']['datalist']" :key="index" class="qf-box">
+        <div class="label"
+          >{{ item['strinstallpos'] }}(<span>{{ item['value'] }}</span
+          >)</div
+        >
         <div class="modal">烟雾模式</div>
-        <div class="state">烟雾: <span class="text">正常</span></div>
+        <div class="state"
+          >烟雾: <span class="text">{{ deviceObject['smoke']['datalist'][index]['value'] }}</span></div
+        >
         <div class="btn-box" @click="handler"><span>开启</span></div>
       </div>
     </div>
@@ -52,13 +53,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, reactive } from 'vue';
+  import { onMounted, ref, reactive, nextTick, onUnmounted } from 'vue';
   import imgUrl from '../../../../assets/images/fire/pie.png';
   import { topList, columnsSmoke, columnsFiber } from './common.data';
   import customHeader from '/@/components/vent/customHeader.vue';
   import { cloneDeep } from 'lodash-es';
   import dayjs from 'dayjs';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { getTableList, systemList } from './alarmFire.api';
+
+  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
   const { createMessage } = useMessage();
   const monitorlistYw = ref(
     new Array(13).fill({
@@ -77,96 +82,112 @@
       readTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
     })
   );
-
+  const optionValue = ref([]);
+  const deviceObject = ref<any>({
+    smoke: {
+      deviceName: 'smoke',
+      datalist: [],
+    },
+    fiber: {
+      deviceName: 'fiber',
+      datalist: [],
+    },
+    qf: {
+      deviceName: 'qf',
+      datalist: [],
+    },
+  });
   const topListData = ref(topList);
 
-  function getSource() {
-    const readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-    // 模拟光纤测温分区数据
-    const ywList: any[] = [];
-    monitorlistYw.value.filter((item, index) => {
-      const obj = cloneDeep(item);
-      obj.strinstallpos = `烟雾${index < 10 ? '0' + index : index}`;
-      obj.readTime = readTime;
-      ywList.push(obj);
-    });
-    monitorlistYw.value = ywList;
-
-    const gxList: any[] = [];
-    let totalNum = 0;
-    monitorlistCf.value.filter((item, index) => {
-      const obj = cloneDeep(item);
-      switch (index) {
-        case 0:
-          obj.strinstallpos = '0m-150m';
-          break;
-        case 1:
-          obj.strinstallpos = '150m-300m';
-          break;
-        case 2:
-          obj.strinstallpos = '300m-450m';
-          break;
-        case 3:
-          obj.strinstallpos = '450m-600m';
-          break;
-        case 4:
-          obj.strinstallpos = '600m-750m';
-          break;
-        case 5:
-          obj.strinstallpos = '750m-900m';
-          break;
-        case 6:
-          obj.strinstallpos = '900m-1050m';
-          break;
-        case 7:
-          obj.strinstallpos = '1050m-1200m';
-          break;
-        case 8:
-          obj.strinstallpos = '1200m-1350m';
-          break;
-        default:
-          break;
+  async function getDeviceList() {
+    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
+
+    const result = res.msgTxt;
+    const object = {};
+    result.forEach((item) => {
+      const data = item['datalist'].filter((data: any) => {
+        const readData = data.readData;
+        return Object.assign(data, readData);
+      });
+      if (item.type != 'sys') {
+        if (item.type === 'fiber_v1') {
+          // 光纤测温特殊处理
+          const list = data[0]['fibreTemperature'] ? JSON.parse(data[0]['fibreTemperature']) : [];
+          debugger;
+          list.filter((detailItem) => {
+            detailItem['readTime'] = data[0]['readTime'];
+            detailItem['strinstallpos'] = `测点${detailItem['pos']}`;
+            return detailItem;
+          });
+          object['fiber'] = {
+            deviceName: 'fiber',
+            datalist: list,
+            avginfo: { fmax: data[0]['fmax'], fmin: data[0]['fmin'], favg: data[0]['favg'] },
+          };
+          const topData = cloneDeep(topList);
+          topData[0].value = object['fiber']['avginfo'].fmax;
+          topData[1].value = object['fiber']['avginfo'].fmin;
+          topData[2].value = object['fiber']['avginfo'].favg;
+          topListData.value = topData;
+        } else if (item.type === 'modelsensor_cgq') {
+          // 传感器特殊处理，球阀数据里面包含烟雾、球阀、压力、多参等数据
+          const smokeList: any[] = [],
+            qfList: any[] = [];
+          data.filter((item) => {
+            if (item['strname'] == '烟雾') {
+              smokeList.push(Object.assign(item, item['readData']));
+              const index = item['strinstallpos'].split('烟雾')[1];
+              const qfObj = data.find((d) => d['strinstallpos'] === '球阀' + index);
+              qfList.push(Object.assign(qfObj, qfObj['readData']));
+            }
+          });
+
+          object['smoke'] = {
+            deviceName: 'smoke',
+            datalist: smokeList,
+          };
+          object['qf'] = {
+            deviceName: 'qf',
+            datalist: qfList,
+          };
+        }
       }
-      obj.fmax = (26 + Math.random() * 3).toFixed(1);
-      obj.fmin = (22 + Math.random() * 2).toFixed(1);
-      obj.favg = (24 + Math.random() * 2).toFixed(1);
-      totalNum += Number(obj.favg);
-      obj.readTime = readTime;
-      gxList.push(obj);
     });
+    deviceObject.value = object;
+  }
 
-    const maxObj = gxList.reduce(function (pre, curv) {
-      return pre.fmax < curv.fmax ? curv : pre;
-    });
-    const minObj = gxList.reduce(function (pre, curv) {
-      return pre.fmin < curv.fmin ? pre : curv;
-    });
-    monitorlistCf.value = gxList;
-    const topData = cloneDeep(topList);
-    topData[0].value = maxObj.fmax;
-    topData[0].text = maxObj.strinstallpos;
-    topData[1].value = minObj.fmin;
-    topData[1].text = minObj.strinstallpos;
-
-    topData[2].value = (totalNum / 9).toFixed(1);
-    topListData.value = topData;
+  async function getSysDataSource() {
+    const res = await getTableList({ strtype: 'sys_firemoniter', pagetype: 'normal' });
+    if (res.records.length > 0) {
+      optionValue.value = res.records[0]['id'];
+      getDeviceList();
+    }
+    getDeviceList();
   }
 
+  let timer;
   function getData(flag) {
-    setTimeout(
-      () => {
-        getSource();
-        getData(false);
-      },
-      flag ? 0 : 5000
-    );
+    if (timer !== null) {
+      timer = setTimeout(
+        async () => {
+          await getSysDataSource();
+          getData(false);
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
+
   function handler() {
     createMessage.warning('暂无权限！');
   }
-  onMounted(() => {
+  onMounted(async () => {
     getData(true);
   });
+  onUnmounted(() => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+  });
 </script>
 
 <style lang="less" scoped>
@@ -375,6 +396,7 @@
           font-weight: 600;
           color: #3df6ff;
           margin-bottom: 10px;
+          text-align: center;
           span {
             color: rgb(255, 174, 0);
           }

src/views/vent/monitorManager/fanLocalMonitor1/components/fanlocal-history.vue

@@ -6,11 +6,17 @@
     <template v-else>
       <HistoryTable1 class="w-100% h-100%" :device-code="`${devicekide}`" :scroll="scroll" dict-code="fanlocal_dict" />
     </template> -->
-    <HistoryTable :columns-type="`${selectDatas.deviceType}`" :device-type="`${devicekide}`" designScope="fanlocal-history" :scroll="scroll" />
+    <HistoryTable
+      :columns-type="`${selectDatas.deviceType}`"
+      :device-type="`${devicekide}`"
+      designScope="fanlocal-history"
+      :scroll="scroll"
+      :deviceId="deviceId"
+    />
   </div>
 </template>
 <script setup lang="ts">
-  import { onBeforeMount, ref, watch, onMounted, nextTick, defineAsyncComponent, reactive, onUnmounted, inject, unref } from 'vue';
+  import { onBeforeMount, ref, watch, onMounted, nextTick, defineAsyncComponent, reactive, computed, inject, unref } from 'vue';
   import HistoryTable from '../../comment/HistoryTable.vue';
   import HistoryTable1 from '../../../../vent/comment/history/HistoryTable.vue';
 
@@ -41,6 +47,7 @@
   let scroll = reactive({
     y: 580,
   });
+  const deviceId = computed(() => props.deviceId);
 
   watch(
     () => props.selectData,

src/views/vent/monitorManager/fanLocalMonitor1/components/fanlocal-operate-history.vue

@@ -7,7 +7,7 @@
       designScope="alarm-history"
       :scroll="scroll"
       :deviceId="deviceId"
-    />s
+    />
   </div>
 </template>
 <script setup lang="ts">