粉尘首页统计信息界面修改-提交

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

@@ -33,64 +33,42 @@
   </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('单位管理');
-  // let selectVal = ref('');
-  // let selectList = ref<any>([]);
-  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 },
-  ]);
-  
+  },
+});
+const go = useGo();
 let activeIndex = ref('1');
 //获取dom元素节点
 let piebox = ref<any>();
 let pieboxall = ref<any>();
-let mineTitle = ref('矿井通风状态监测');
+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: '一'  },
+  { 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: '序号' },
@@ -113,6 +91,11 @@ function getChange(active) {
   }
 }
 
+function goDetail() {
+  //本地模拟跳转
+  go('/dustHome/infoTj/home');
+}
+
 function getOption() {
   nextTick(() => {
     let myChart = echarts.init(piebox.value);
@@ -143,6 +126,15 @@ function getOption() {
         },
         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: [
         {
@@ -163,383 +155,367 @@ function getOption() {
             { value: 310, name: '商洛市' },
           ],
 
-  function goDetail() {
-    //本地模拟跳转
-    go('/dustHome/infoTj/home');
-  }
-
-  //下拉框选项切换
-  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: 5,
-          textStyle: {
-            color: '#00d8ff',
-            fontSize: 14,
-          },
-        },
-        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: {
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                fontSize: 10,
+                color: '#fff',
+                formatter: '{b} : {d}%',
+              },
+            },
+            labelLine: {
               normal: {
-                label: {
-                  show: true,
-                  fontSize: 10,
+                show: true,
+                length: 50,
+                length2: 50,
+                lineStyle: {
                   color: '#fff',
-                  formatter: '{b} : {d}%',
-                },
-              },
-              labelLine: {
-                normal: {
-                  show: true,
-                  length: 50,
-                  length2: 50,
-                  lineStyle: {
-                    color: '#fff',
-                    width: 2,
-                  },
+                  width: 2,
                 },
               },
             },
           },
-        ],
-      };
-      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,
+      ],
+    };
+    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,
         },
+        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(
         {
-          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: 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: '',
-          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,
+          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 '';
+                }
               },
+              rich: rich,
+            },
+            labelLine: {
+              show: false,
             },
-          },
-          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,
           },
         },
-        legend: {
-          orient: 'vertical',
-          right: 10,
-          align: 'auto',
-          top: 'middle',
-          itemGap: 0.5,
-          textStyle: {
-            color: '#fff',
-            fontSize: 10,
-          },
-          icon: 'circle',
-          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,
         },
-        toolbox: {
-          show: false,
+      },
+      legend: {
+        orient: 'vertical',
+        right: 10,
+        align: 'auto',
+        top: 'middle',
+        itemGap: 0.5,
+        textStyle: {
+          color: '#fff',
+          fontSize: 10,
         },
-        series: seriesObj,
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+        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,
-    }
-  );
+watch(
+  () => props.airKjStatus,
+  (newA, oldA) => {
+    console.log(newA, 'airKjStatus-----------');
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
 </script>
 <style lang="less" scoped>
-  @font-face {
+@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-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    font-size: 14px;
   }
 
-  .mineWind {
-    position: relative;
-    width: 100%;
+  .mine-content {
     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;
+      }
+    }
 
-    .mine-title {
+    .go-icon {
       position: absolute;
-      left: 50px;
-      top: 12px;
+      right: 22px;
+      top: 55px;
       color: #fff;
-      font-family: 'douyuFont';
-      font-size: 14px;
+      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;
     }
+  }
+
+  .content-table {
+    position: relative;
+    width: 90%;
+    height: calc(100% - 45px);
+    margin: 0px 30px;
+    border: 1px solid rgba(0, 216, 255, 0.3);
 
-    .mine-content {
-      height: 100%;
-      padding: 40px 0px 28px 0px;
-      box-sizing: border-box;
+    .table-head {
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      justify-content: space-between;
+      height: 50px;
+      border-bottom: 1px solid rgba(0, 216, 255, 0.3);
 
-      .content-tabs {
-        width: 100%;
-        height: 45px;
-        padding: 0px 30px;
+      .head-item {
         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;
+        }
 
-        .tabs-item {
-          color: #fff;
-          cursor: pointer;
+        &:nth-child(2) {
+          width: 31%;
+          text-align: center;
+        }
 
-          &:nth-child(1) {
-            margin-right: 10px;
-          }
+        &:nth-child(3) {
+          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(4) {
+          width: 20%;
+          text-align: center;
         }
-      }
-      .go-icon {
-        position: absolute;
-        right: 22px;
-        top: 55px;
-        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;
+
+        &:nth-child(5) {
+          width: 20%;
+          text-align: center;
+        }
+
+
       }
     }
-    .content-table {
-      position: relative;
-      width: 90%;
-      height: calc(100% - 45px);
-      margin: 0px 30px;
-      border: 1px solid rgba(0, 216, 255, 0.3);
-
-      .table-head {
+
+    .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);
 
-        .head-item {
+        .item-val {
           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);
+          color: #fff;
+
 
           &:nth-child(1) {
             width: 8%;
@@ -565,108 +541,65 @@ function getOption() {
             width: 20%;
             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);
-
-          .head-item {
-            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;
-            }
-
-            &: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;
-          }
-        }
+
       }
     }
   }
 
-  ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
-    height: 24px;
+  .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 .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-single:not(.zxm-select-customize-input) .zxm-select-selector {
+  height: 24px;
+}
 
-  ::v-deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+::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-item {
-    color: #fff !important;
-  }
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+  line-height: 22px !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::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>