1. 优化煤监局单位管理模块样式

src/views/vent/home/clique/dustComponents/mine-wind.vue

@@ -4,7 +4,7 @@
     <div class="mine-content">
       <div class="content-tabs">
         <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 :class="activeIndex == '2' ? 'tabs-item1' : 'tabs-item'" @click="getChange('2')">信息统计</div> -->
       </div>
       <ArrowRightOutlined class="go-icon" @click="goDetail()" />
       <!-- 信息列表 -->
@@ -33,491 +33,444 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, defineProps, nextTick } from 'vue';
-import * as echarts from 'echarts';
-import { useGo } from '/@/hooks/web/usePage';
-import { ArrowRightOutlined } from '@ant-design/icons-vue';
-
-let props = defineProps({
-  airKjStatus: {
-    type: Array,
-    default: () => {
-      return [];
+  import { ref, reactive, watch, defineProps, nextTick } from 'vue';
+  import * as echarts from 'echarts';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { ArrowRightOutlined } from '@ant-design/icons-vue';
+
+  let props = defineProps({
+    airKjStatus: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-  },
-});
-const go = useGo();
-let activeIndex = ref('1');
-//获取dom元素节点
-let piebox = ref<any>();
-let pieboxall = ref<any>();
-let mineTitle = ref('单位管理');
-
-//获取dom元素节点
-let contList = reactive<any[]>([
-  { id: '1', name: '柳塔矿', production: 800, br: 1, grade: '一' },
-  { id: '2', name: '寸草塔二矿', production: 700, br: 2, grade: '二' },
-  { id: '3', name: '布尔台矿', production: 900, br: 1, grade: '一' },
-  { id: '4', name: '乌兰木伦矿', production: 1800, br: 1, grade: '三' },
-  { id: '5', name: '寸草塔矿', production: 1200, br: 1, grade: '一' },
-  { id: '6', name: '石圪台矿', production: 2300, br: 1, grade: '四' },
-  { id: '7', name: '补连塔矿', production: 300, br: 1, grade: '一' },
-  { id: '8', name: '哈拉沟矿', production: 1300, br: 3, grade: '一' },
-  { id: '9', name: '上湾矿', production: 800, br: 1, grade: '一' },
-  { id: '10', name: '活鸡兔井', production: 800, br: 1, grade: '一' },
-  { id: '11', name: '大柳塔井', production: 800, br: 1, grade: '一' },
-  { id: '12', name: '锦界矿', production: 800, br: 1, grade: '一' },
-  { id: '13', name: '榆家梁矿', production: 800, br: 1, grade: '一' },
-  { id: '14', name: '保德矿', production: 800, br: 1, grade: '一' },
-]);
-let headList = reactive<any>([
-  { label: '序号' },
-  { label: '矿井名称' },
-  { label: '原煤产量/百万吨' },
-  { label: '尘肺病例/人' },
-  { label: '发病等级' }
-]);
-
-//tabs选项切换
-function getChange(active) {
-  activeIndex.value = active;
-  switch (activeIndex.value) {
-    case '1':
-      break;
-    case '2':
-      getOption();
-      getOptionAll();
-      break;
+  });
+  const go = useGo();
+  let activeIndex = ref('1');
+  //获取dom元素节点
+  let piebox = ref<any>();
+  let pieboxall = ref<any>();
+  let mineTitle = ref('单位管理');
+
+  //获取dom元素节点
+  let contList = reactive<any[]>([
+    { id: '1', name: '柳塔矿', production: 800, br: 1, grade: '一' },
+    { id: '2', name: '寸草塔二矿', production: 700, br: 2, grade: '二' },
+    { id: '3', name: '布尔台矿', production: 900, br: 1, grade: '一' },
+    { id: '4', name: '乌兰木伦矿', production: 1800, br: 1, grade: '三' },
+    { id: '5', name: '寸草塔矿', production: 1200, br: 1, grade: '一' },
+    { id: '6', name: '石圪台矿', production: 2300, br: 1, grade: '四' },
+    { id: '7', name: '补连塔矿', production: 300, br: 1, grade: '一' },
+    { id: '8', name: '哈拉沟矿', production: 1300, br: 3, grade: '一' },
+    { id: '9', name: '上湾矿', production: 800, br: 1, grade: '一' },
+    { id: '10', name: '活鸡兔井', production: 800, br: 1, grade: '一' },
+    { id: '11', name: '大柳塔井', production: 800, br: 1, grade: '一' },
+    { id: '12', name: '锦界矿', production: 800, br: 1, grade: '一' },
+    { id: '13', name: '榆家梁矿', production: 800, br: 1, grade: '一' },
+    { id: '14', name: '保德矿', production: 800, br: 1, grade: '一' },
+  ]);
+  let headList = reactive<any>([
+    { label: '序号' },
+    { label: '矿井名称' },
+    { label: '原煤产量/百万吨' },
+    { label: '尘肺病例/人' },
+    { label: '发病等级' },
+  ]);
+
+  //tabs选项切换
+  function getChange(active) {
+    activeIndex.value = active;
+    switch (activeIndex.value) {
+      case '1':
+        break;
+      case '2':
+        getOption();
+        getOptionAll();
+        break;
+    }
   }
-}
-
-function goDetail() {
-  //本地模拟跳转
-  go('/dustHome/infoTj/home');
-}
-
-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: 5,
-        textStyle: {
-          color: '#00d8ff',
-          fontSize: 14,
+
+  function goDetail() {
+    //本地模拟跳转
+    go('/dustHome/infoTj/home');
+  }
+
+  function getOption() {
+    nextTick(() => {
+      let myChart = echarts.init(piebox.value);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
         },
-      },
-      legend: {
-        orient: 'vertical',
-        right: 10,
-        align: 'auto',
-        top: 'middle',
-        itemGap: 0.5,
-        textStyle: {
-          color: '#fff',
-          fontSize: 10,
+        color: ['#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b'],
+        title: {
+          text: '陕西省尘肺病地区比例分析',
+          left: 'center',
+          top: 5,
+          textStyle: {
+            color: '#00d8ff',
+            fontSize: 14,
+          },
         },
-        icon: 'circle',
-        data: ['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'],
-        // formatter: function (name) {
-        //     var oa = option.series[0].data;
-        //     var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
-        //     for (var i = 0; i < option.series[0].data.length; i++) {
-        //         if (name == oa[i].name) {
-        //             return name + '     ' + oa[i].value + '     ' + (oa[i].value / num * 100).toFixed(2) + '%';
-        //         }
-        //     }
-        // }
-      },
-      series: [
-        {
-          name: '比例分析',
-          type: 'pie',
-          radius: '55%',
-          center: ['48%', '50%'],
-          data: [
-            { value: 335, name: '西安市' },
-            { value: 310, name: '宝鸡市' },
-            { value: 234, name: '咸阳市' },
-            { value: 135, name: '铜川市' },
-            { value: 335, name: '渭南市' },
-            { value: 310, name: '延安市' },
-            { value: 234, name: '榆林市' },
-            { value: 135, name: '汉中市' },
-            { value: 335, name: '安康市' },
-            { value: 310, name: '商洛市' },
-          ],
-
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                fontSize: 10,
-                color: '#fff',
-                formatter: '{b} : {d}%',
-              },
-            },
-            labelLine: {
+        legend: {
+          orient: 'vertical',
+          right: 10,
+          align: 'auto',
+          top: 'middle',
+          itemGap: 0.5,
+          textStyle: {
+            color: '#fff',
+            fontSize: 10,
+          },
+          icon: 'circle',
+          data: ['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'],
+          // formatter: function (name) {
+          //     var oa = option.series[0].data;
+          //     var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
+          //     for (var i = 0; i < option.series[0].data.length; i++) {
+          //         if (name == oa[i].name) {
+          //             return name + '     ' + oa[i].value + '     ' + (oa[i].value / num * 100).toFixed(2) + '%';
+          //         }
+          //     }
+          // }
+        },
+        series: [
+          {
+            name: '比例分析',
+            type: 'pie',
+            radius: '55%',
+            center: ['48%', '50%'],
+            data: [
+              { value: 335, name: '西安市' },
+              { value: 310, name: '宝鸡市' },
+              { value: 234, name: '咸阳市' },
+              { value: 135, name: '铜川市' },
+              { value: 335, name: '渭南市' },
+              { value: 310, name: '延安市' },
+              { value: 234, name: '榆林市' },
+              { value: 135, name: '汉中市' },
+              { value: 335, name: '安康市' },
+              { value: 310, name: '商洛市' },
+            ],
+
+            itemStyle: {
               normal: {
-                show: true,
-                length: 50,
-                length2: 50,
-                lineStyle: {
+                label: {
+                  show: true,
+                  fontSize: 10,
                   color: '#fff',
-                  width: 2,
+                  formatter: '{b} : {d}%',
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: true,
+                  length: 50,
+                  length2: 50,
+                  lineStyle: {
+                    color: '#fff',
+                    width: 2,
+                  },
                 },
               },
             },
           },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+  function getOptionAll() {
+    nextTick(() => {
+      let scaleData = [
+        {
+          name: '横山区',
+          value: 10,
         },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-function getOptionAll() {
-  nextTick(() => {
-    let scaleData = [
-      {
-        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 rich = {
-      white: {
-        color: '#fff',
-        align: 'center',
-        fontSize: 12,
-        padding: [3, 0],
-      },
-    };
-    let placeHolderStyle = {
-      normal: {
-        label: {
-          show: false,
+        {
+          name: '神木市',
+          value: 10,
         },
-        labelLine: {
-          show: false,
+        {
+          name: '府谷县',
+          value: 10,
         },
-        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)',
-      '#faa526',
-      '#d5eb0f',
-      '#afec07',
-      '#f3f720',
-      '#0ee93d',
-      '#17d1b2',
-      '#2ae271',
-      '#11bce7',
-      '#c127f0',
-      '#ee125b',
-    ];
-
-    for (let i = 0; i < scaleData.length; i++) {
-      data.push(
         {
-          value: scaleData[i].value,
-          name: scaleData[i].name,
-          itemStyle: {
-            normal: {
-              borderWidth: 2,
-              shadowBlur: 0,
-              borderColor: color1[i],
-              shadowColor: color1[i],
-              color: color1[i],
-              opacity: 1,
-            },
+          name: '靖边县',
+          value: 10,
+        },
+        {
+          name: '定边县',
+          value: 10,
+        },
+        {
+          name: '绥德县',
+          value: 10,
+        },
+        {
+          name: '米脂县',
+          value: 10,
+        },
+        {
+          name: '佳县',
+          value: 10,
+        },
+        {
+          name: '吴堡县',
+          value: 10,
+        },
+        {
+          name: '清涧县',
+          value: 10,
+        },
+      ];
+      let rich = {
+        white: {
+          color: '#fff',
+          align: 'center',
+          fontSize: 12,
+          padding: [3, 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)',
+        '#faa526',
+        '#d5eb0f',
+        '#afec07',
+        '#f3f720',
+        '#0ee93d',
+        '#17d1b2',
+        '#2ae271',
+        '#11bce7',
+        '#c127f0',
+        '#ee125b',
+      ];
+
+      for (let i = 0; i < scaleData.length; i++) {
+        data.push(
+          {
+            value: scaleData[i].value,
+            name: scaleData[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 2,
+                shadowBlur: 0,
+                borderColor: color1[i],
+                shadowColor: color1[i],
+                color: color1[i],
+                opacity: 1,
+              },
+            },
+          },
+          {
+            value: 2,
+            name: '',
+            itemStyle: placeHolderStyle,
+          }
+        );
+      }
+      let seriesObj = [
         {
-          value: 2,
           name: '',
-          itemStyle: placeHolderStyle,
-        }
-      );
-    }
-    let seriesObj = [
-      {
-        name: '',
-        type: 'pie',
-        clockWise: false,
-        radius: [40, 75],
-        center: ['48%', '56%'],
-        hoverAnimation: false,
-        itemStyle: {
-          normal: {
-            label: {
-              show: true,
-              position: 'inner',
-              fontSize: 10,
-              color: '#fff',
-              formatter: function (params) {
-                let percent: any = 0;
-                let total = 0;
-                for (var i = 0; i < scaleData.length; i++) {
-                  total += scaleData[i].value;
-                }
-                percent = ((params.value / total) * 100).toFixed(0);
-                if (params.name !== '') {
-                  return params.name;
-                } else {
-                  return '';
-                }
+          type: 'pie',
+          clockWise: false,
+          radius: [40, 75],
+          center: ['48%', '56%'],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: 'inner',
+                fontSize: 10,
+                color: '#fff',
+                formatter: function (params) {
+                  let percent: any = 0;
+                  let total = 0;
+                  for (var i = 0; i < scaleData.length; i++) {
+                    total += scaleData[i].value;
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0);
+                  if (params.name !== '') {
+                    return params.name;
+                  } else {
+                    return '';
+                  }
+                },
+                rich: rich,
+              },
+              labelLine: {
+                show: false,
               },
-              rich: rich,
-            },
-            labelLine: {
-              show: false,
             },
           },
+          data: data,
         },
-        data: data,
-      },
-    ];
-    let myChart = echarts.init(pieboxall.value);
-    let option = {
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b} : {c} ({d}%)',
-      },
-      title: {
-        text: '榆林市尘肺病比例分析',
-        left: 'center',
-        top: 0,
-        textStyle: {
-          color: '#00d8ff',
-          fontSize: 14,
+      ];
+      let myChart = echarts.init(pieboxall.value);
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)',
         },
-      },
-      legend: {
-        orient: 'vertical',
-        right: 10,
-        align: 'auto',
-        top: 'middle',
-        itemGap: 0.5,
-        textStyle: {
-          color: '#fff',
-          fontSize: 10,
+        title: {
+          text: '榆林市尘肺病比例分析',
+          left: 'center',
+          top: 0,
+          textStyle: {
+            color: '#00d8ff',
+            fontSize: 14,
+          },
         },
-        icon: 'circle',
-        data: ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县'],
-      },
-      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,
+        legend: {
+          orient: 'vertical',
+          right: 10,
+          align: 'auto',
+          top: 'middle',
+          itemGap: 0.5,
+          textStyle: {
+            color: '#fff',
+            fontSize: 10,
+          },
+          icon: 'circle',
+          data: ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县'],
+        },
+        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,
+    }
+  );
 </script>
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.mineWind {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .mine-title {
-    position: absolute;
-    left: 50px;
-    top: 12px;
-    color: #fff;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 14px;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .mine-content {
+  .mineWind {
+    position: relative;
+    width: 100%;
     height: 100%;
-    padding: 40px 0px 28px 0px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .content-tabs {
-      width: 100%;
-      height: 45px;
-      padding: 0px 30px;
-      display: flex;
-      align-items: center;
 
-      .tabs-item {
-        color: #fff;
-        cursor: pointer;
-
-        &:nth-child(1) {
-          margin-right: 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: 10px;
-      }
-    }
-
-    .go-icon {
+    .mine-title {
       position: absolute;
-      right: 22px;
-      top: 55px;
+      left: 50px;
+      top: 12px;
       color: #fff;
-      cursor: pointer;
-      border-bottom: 2px solid;
-      border-image: linear-gradient(to right, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
-      margin-right: 10px;
+      font-family: 'douyuFont';
+      font-size: 14px;
     }
-  }
-
-  .content-table {
-    position: relative;
-    width: 90%;
-    height: calc(100% - 45px);
-    margin: 0px 30px;
-    border: 1px solid rgba(0, 216, 255, 0.3);
 
-    .table-head {
+    .mine-content {
+      height: 100%;
+      padding: 40px 0px 28px 0px;
+      box-sizing: border-box;
       display: flex;
-      justify-content: space-between;
-      height: 50px;
-      border-bottom: 1px solid rgba(0, 216, 255, 0.3);
+      flex-direction: column;
+      align-items: center;
 
-      .head-item {
+      .content-tabs {
+        width: 100%;
+        height: 45px;
+        padding: 0px 30px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        height: 100%;
-        color: rgba(0, 216, 255);
-        font-size: 12px;
-        border-right: 1px solid rgba(0, 216, 255, 0.1);
-
-        &:nth-child(1) {
-          width: 8%;
-          text-align: center;
-        }
 
-        &:nth-child(2) {
-          width: 31%;
-          text-align: center;
-        }
+        .tabs-item {
+          color: #fff;
+          cursor: pointer;
 
-        &:nth-child(3) {
-          width: 20%;
-          text-align: center;
+          &:nth-child(1) {
+            margin-right: 10px;
+          }
         }
 
-        &:nth-child(4) {
-          width: 20%;
-          text-align: center;
+        .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: 10px;
         }
+      }
 
-        &:nth-child(5) {
-          width: 20%;
-          text-align: center;
+      .go-icon {
+        position: absolute;
+        right: 22px;
+        top: 55px;
+        color: #fff;
+        cursor: pointer;
+        margin-right: 10px;
+        font-size: 20px;
+        &:hover {
+          color: #00d8ff;
         }
-
-
       }
     }
 
-    .table-cont {
-      height: calc(100% - 51px);
-      overflow-y: auto;
+    .content-table {
+      position: relative;
+      width: 90%;
+      height: calc(100% - 45px);
+      margin: 0px 30px;
+      border: 1px solid rgba(0, 216, 255, 0.3);
 
-      .cont-item {
+      .table-head {
         display: flex;
         justify-content: space-between;
         height: 50px;
         border-bottom: 1px solid rgba(0, 216, 255, 0.3);
 
-        .item-val {
+        .head-item {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100%;
+          color: rgba(0, 216, 255);
           font-size: 12px;
-          color: #fff;
           border-right: 1px solid rgba(0, 216, 255, 0.1);
 
-
           &:nth-child(1) {
             width: 8%;
             text-align: center;
@@ -543,64 +496,104 @@ watch(
             text-align: center;
           }
         }
+      }
 
+      .table-cont {
+        height: calc(100% - 51px);
+        overflow-y: auto;
 
-
+        .cont-item {
+          display: flex;
+          justify-content: space-between;
+          height: 50px;
+          border-bottom: 1px solid rgba(0, 216, 255, 0.3);
+
+          .item-val {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            font-size: 12px;
+            color: #fff;
+            border-right: 1px solid rgba(0, 216, 255, 0.1);
+
+            &:nth-child(1) {
+              width: 8%;
+              text-align: center;
+            }
+
+            &:nth-child(2) {
+              width: 31%;
+              text-align: center;
+            }
+
+            &:nth-child(3) {
+              width: 20%;
+              text-align: center;
+            }
+
+            &:nth-child(4) {
+              width: 20%;
+              text-align: center;
+            }
+
+            &:nth-child(5) {
+              width: 20%;
+              text-align: center;
+            }
+          }
+        }
       }
     }
-  }
 
-  .item-val1 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    font-size: 12px;
-    color: #fff;
-    width: 17.4%;
-    text-align: center;
-    border-right: none;
+    .item-val1 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: 12px;
+      color: #fff;
+      width: 17.4%;
+      text-align: center;
+      border-right: none;
+    }
   }
-}
-
-
 
+  ::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 {
-  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-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-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-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: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-arrow {
+    color: #fff !important;
+  }
 
-::v-deep .zxm-select-selection-item {
-  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 .zxm-select-selector .zxm-select-selection-item {
+    line-height: 24px !important;
+  }
 </style>

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

@@ -131,6 +131,8 @@
     { value: 'lucy', label: 'Lucy' },
     { value: 'tom', label: 'Tom' },
   ]);
+  const total = ref(18);
+
   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 },
@@ -258,7 +260,7 @@
         },
         legend: {
           orient: 'vertical',
-          right: 150,
+          right: 120,
           align: 'auto',
           top: 'middle',
           itemGap: 10,
@@ -273,8 +275,8 @@
           {
             name: '比例分析',
             type: 'pie',
-            radius: '40%',
-            center: ['40%', '50%'],
+            radius: '45%',
+            center: ['45%', '50%'],
             data: yData1,
 
             itemStyle: {
@@ -308,6 +310,7 @@
         console.log(params, 'params----------');
         xData2.length = 0;
         yData2.length = 0;
+        total.value = Number(params.value);
         title2.value = params.name;
         if (params.name == '西安市') {
           xData2 = ['新城区', '碑林区', '莲湖区', '雁塔区', '未央区', '灞桥区', '阎良区', '临潼区', '长安区', '鄠邑区', '高陵区', '周至县', '蓝田县'];
@@ -329,18 +332,18 @@
         } 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: 1 },
+            { name: '金台区', value: 1 },
+            { name: '陈仓区', value: 1 },
+            { name: '凤翔区', value: 1 },
+            { name: '岐山县', value: 1 },
+            { name: '扶风县', value: 1 },
+            { name: '眉县', value: 1 },
+            { name: '陇县', value: 1 },
+            { name: '千阳县', value: 1 },
+            { name: '麟游县', value: 1 },
+            { name: '凤县', value: 2 },
+            { name: '太白县', value: 2 },
           ];
           getOptionAll();
         } else if (params.name == '咸阳市') {
@@ -562,27 +565,20 @@
       ];
 
       for (let i = 0; i < yData2.length; i++) {
-        data.push(
-          {
-            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,
-              },
+        data.push({
+          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,
             },
           },
-          {
-            value: 2,
-            name: '',
-            itemStyle: placeHolderStyle,
-          }
-        );
+        });
       }
       let seriesObj = [
         {
@@ -598,18 +594,18 @@
               label: {
                 show: true,
                 position: 'inner',
-                fontSize: 14,
+                fontSize: 13,
                 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);
+                  // let total = 0;
+                  // for (var i = 0; i < yData2.length; i++) {
+                  //   total += yData2[i].value;
+                  // }
+                  percent = ((params.value / total.value) * 100).toFixed(0);
                   if (params.name !== '') {
-                    return params.name + params.value;
+                    return params.name + ' ' + percent + '%';
                   } else {
                     return '';
                   }