温庄5.5首页主风机-3号风机更新

src/views/vent/home/colliery/components/main-monitor.vue

@@ -5,13 +5,8 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="mainTypeList"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="mainTypeList"
+        aria-placeholder="请选择" @change="changeSelect" />
       <div class="status-yx">
         <div class="now-name">
           <i style="margin: 0px 5px 0px 5px">
@@ -35,442 +30,449 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
-  import { useGlobSetting } from '/@/hooks/setting';
-  const { sysOrgCode } = useGlobSetting();
-  let props = defineProps({
-    maindata: Array,
-  });
-  const emit = defineEmits(['goDetail']);
-  let searchValue = ref('');
-  let mainTypeList = reactive<any>([]); //下拉框
-  let mainList = reactive<any[]>([]); //主风机列表
-  let selectDataObj = ref({
-    dataQ: 0,
-    dataH: 0,
-  });
-  let maxM3 = ref(150); // 高家梁是150，其他400
-  let maxMPa = ref(4000); //
-  //风机启动状态
-  let runStatus = ref('');
-  //获取dom节点
-  let main = ref<any>();
-  //echart图表数据
-  let echartData = reactive<any>({
-    xdata: [],
-    ydata: [],
-    ydata1: [],
-  });
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
+import { useGlobSetting } from '/@/hooks/setting';
+const { sysOrgCode } = useGlobSetting();
+let props = defineProps({
+  maindata: Array,
+});
+const emit = defineEmits(['goDetail']);
+let searchValue = ref('');
+let mainTypeList = reactive<any>([]); //下拉框
+let mainList = reactive<any[]>([]); //主风机列表
+let selectDataObj = ref({
+  dataQ: 0,
+  dataH: 0,
+});
+let maxM3 = ref(150); // 高家梁是150，其他400
+let maxMPa = ref(4000); //
+//风机启动状态
+let runStatus = ref('');
+//获取dom节点
+let main = ref<any>();
+//echart图表数据
+let echartData = reactive<any>({
+  xdata: [],
+  ydata: [],
+  ydata1: [],
+});
 
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'fanMain');
-  }
-  //选项切换
-  function changeSelect(val) {
-    let objParam;
-    let objParam1;
-    searchValue.value = val;
-    const selectData = mainList.find((item) => item['deviceID'] == val);
-    if (selectData) {
-      runStatus.value =
-        selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
-          ? '1#风机'
-          : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'fanMain');
+}
+//选项切换
+function changeSelect(val) {
+  let objParam;
+  let objParam1;
+  searchValue.value = val;
+  const selectData = mainList.find((item) => item['deviceID'] == val);
+  if (selectData) {
+    runStatus.value =
+      selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
+        ? '1#风机'
+        : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
           ? '2#风机'
-          : '--';
-      if (runStatus.value == '1#风机') {
-        objParam = {
-          dataQ: selectData.readData.Fan1m3 || 0,
-          dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
-        };
-      } else if (runStatus.value == '2#风机') {
-        objParam = {
-          dataQ: selectData.readData.Fan2m3 || 0,
-          dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
-        };
-      } else {
-        objParam = {
-          dataQ: 0,
-          dataH: 0,
-        };
-      }
-
-      //  objParam = {
-      //     dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3 || selectData.readData.Fanm3,
-      //     dataH: Math.abs(Number(selectData.readData.Fan1FanPre || selectData.readData.Fan2FanPre || selectData.readData.DataPa || selectData.readData.FanNegative || 0)),
-      //   }
-      objParam1 = {
-        dataha0: -0.056,
-        dataha1: 3.6491,
-        dataha2: 434.4,
-        dataha3: 100,
-        dataha4: -1000,
+          : selectData.readData.Fan3StartStatus && selectData.readData.Fan3StartStatus == '1'
+            ? '3#风机'
+            : '--';
+    if (runStatus.value == '1#风机') {
+      objParam = {
+        dataQ: selectData.readData.Fan1m3 || 0,
+        dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
+      };
+    } else if (runStatus.value == '2#风机') {
+      objParam = {
+        dataQ: selectData.readData.Fan2m3 || 0,
+        dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
+      };
+    } else if (runStatus.value == '3#风机') {
+      objParam = {
+        dataQ: selectData.readData.Fan3m3 || 0,
+        dataH: Math.abs(Number(selectData.readData.Fan3FanPre || 0)),
+      };
+    } else {
+      objParam = {
+        dataQ: 0,
+        dataH: 0,
       };
-      setChart(objParam, objParam1);
-      getOption();
     }
+
+    //  objParam = {
+    //     dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3 || selectData.readData.Fanm3,
+    //     dataH: Math.abs(Number(selectData.readData.Fan1FanPre || selectData.readData.Fan2FanPre || selectData.readData.DataPa || selectData.readData.FanNegative || 0)),
+    //   }
+    objParam1 = {
+      dataha0: -0.056,
+      dataha1: 3.6491,
+      dataha2: 434.4,
+      dataha3: 100,
+      dataha4: -1000,
+    };
+    setChart(objParam, objParam1);
+    getOption();
   }
+}
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(main.value);
-      let option = {
-        title: {
-          textStyle: {
-            color: '#3df6ff',
-            fontSize: 14, // 字体颜色
-          },
-          text: '',
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(main.value);
+    let option = {
+      title: {
+        textStyle: {
+          color: '#3df6ff',
+          fontSize: 14, // 字体颜色
         },
-        grid: {
-          top: '25%',
-          left: '5%',
-          right: '19%',
-          bottom: '8%',
-          containLabel: true,
+        text: '',
+      },
+      grid: {
+        top: '25%',
+        left: '5%',
+        right: '19%',
+        bottom: '8%',
+        containLabel: true,
+      },
+      legend: {
+        // x:'right',
+        top: '5%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 14, // 字体颜色
         },
-        legend: {
-          // x:'right',
-          top: '5%',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 14, // 字体颜色
-          },
-          data: ['风量', '负压'],
+        data: ['风量', '负压'],
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        textStyle: {
+          color: '#3df6ff',
+          fontSize: 14, // 字体颜色
         },
-        tooltip: {
-          backgroundColor: 'rgba(0,0,0,0.8)',
-          textStyle: {
+        formatter: function (params, ticket, callback) {
+          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+          var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
+          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
+          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
+          return res;
+        },
+        trigger: 'item',
+      },
+      color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
+      xAxis: [
+        {
+          name: '风量\r\n(m³/min)\r\n',
+          nameTextStyle: {
             color: '#3df6ff',
-            fontSize: 14, // 字体颜色
-          },
-          formatter: function (params, ticket, callback) {
-            // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
-            // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
-            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
-            res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
-            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
-            return res;
+            fontSize: 12,
           },
-          trigger: 'item',
-        },
-        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
-        xAxis: [
-          {
-            name: '风量\r\n(m³/min)\r\n',
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
-            },
-            axisLabel: {
-              show: true,
-              position: 'bottom',
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
-              formatter: function (value) {
-                return value * 60 + '';
-              },
+          axisLine: {
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            type: 'value',
-            min: 0,
-            max: maxM3.value, // 高家梁最大9000,
           },
-          {
-            name: '',
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
+          splitLine: {
+            show: false, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
+          },
+          axisLabel: {
+            show: true,
+            position: 'bottom',
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
             },
-            axisLabel: {
-              show: false,
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
+            formatter: function (value) {
+              return value * 60 + '';
             },
-            type: 'value',
-            min: 0,
-            // max: 400,
-            data: echartData.xdata,
           },
-        ],
-        yAxis: [
-          {
-            name: '负压(Pa)',
-            splitNumber: 5,
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
+          type: 'value',
+          min: 0,
+          max: maxM3.value, // 高家梁最大9000,
+        },
+        {
+          name: '',
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
+          },
+          splitLine: {
+            show: false, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            splitLine: {
-              show: true, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
+          },
+          axisLabel: {
+            show: false,
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
             },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
+          },
+          type: 'value',
+          min: 0,
+          // max: 400,
+          data: echartData.xdata,
+        },
+      ],
+      yAxis: [
+        {
+          name: '负压(Pa)',
+          splitNumber: 5,
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            type: 'value',
-            min: 0,
-            max: maxMPa.value,
           },
-        ],
-        series: [
-          {
-            type: 'effectScatter',
-            symbolSize: 5,
-            // symbolOffset:[1, 1],
-            showEffectOn: 'render',
-            // 涟漪特效相关配置。
-            rippleEffect: {
-              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
-              brushType: 'stroke',
+          splitLine: {
+            show: true, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            zlevel: 1,
-            z: 999,
-            itemStyle: {
-              color: '#ff0000',
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
             },
-            data: echartData.ydata2,
           },
-          {
-            name: '风量',
-            yAxisIndex: 0,
-            xAxisIndex: 1,
-            type: 'line',
-            smooth: true,
-            animationDuration: 1000,
-            showSymbol: false,
-            data: echartData.ydata,
+          type: 'value',
+          min: 0,
+          max: maxMPa.value,
+        },
+      ],
+      series: [
+        {
+          type: 'effectScatter',
+          symbolSize: 5,
+          // symbolOffset:[1, 1],
+          showEffectOn: 'render',
+          // 涟漪特效相关配置。
+          rippleEffect: {
+            // 波纹的绘制方式，可选 'stroke' 和 'fill'。
+            brushType: 'stroke',
           },
-          {
-            name: '负压',
-            yAxisIndex: 0,
-            xAxisIndex: 1,
-            type: 'line',
-            smooth: true,
-            animationDuration: 1000,
-            showSymbol: false,
-
-            data: echartData.ydata1,
+          zlevel: 1,
+          z: 999,
+          itemStyle: {
+            color: '#ff0000',
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+          data: echartData.ydata2,
+        },
+        {
+          name: '风量',
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+          data: echartData.ydata,
+        },
+        {
+          name: '负压',
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+
+          data: echartData.ydata1,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  // 设置曲线数据
-  function setChart(param, character) {
-    var dataQ = 300;
-    var dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
-    let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
-    let H1 = parseFloat(param.dataH);
+// 设置曲线数据
+function setChart(param, character) {
+  var dataQ = 300;
+  var dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
+  let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
+  let H1 = parseFloat(param.dataH);
 
-    selectDataObj.value.dataH = H1;
-    selectDataObj.value.dataQ = Q1;
+  selectDataObj.value.dataH = H1;
+  selectDataObj.value.dataQ = Q1;
 
-    let q = Q1 - dataQ;
-    let h = H1 - dataH;
-    // 风压特性曲线1
-    let data = [];
-    // 风压特性曲线2
-    let data2 = [];
-    let datax = [];
-    maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
-    maxMPa.value = H1 < 2000 ? 4000 : H1 < 2500 ? 5000 : 6000;
+  let q = Q1 - dataQ;
+  let h = H1 - dataH;
+  // 风压特性曲线1
+  let data = [];
+  // 风压特性曲线2
+  let data2 = [];
+  let datax = [];
+  maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
+  maxMPa.value = H1 < 2000 ? 4000 : H1 < 2500 ? 5000 : 6000;
 
-    for (let i = 30; i <= maxM3.value; i++) {
-      let x = i;
-      let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
-      data2.push([x, y4]);
-    }
-    for (let i = 0; i <= maxM3.value; i++) {
-      let x = i;
-      let y = (H1 / Q1 / Q1) * x * x;
-      data.push([x, y]);
-      datax.push(x * 60);
-    }
-    echartData.xdata = datax;
-    echartData.ydata = data;
-    echartData.ydata1 = data2;
-    echartData.ydata2 = [[Q1, H1]];
+  for (let i = 30; i <= maxM3.value; i++) {
+    let x = i;
+    let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
+    data2.push([x, y4]);
   }
+  for (let i = 0; i <= maxM3.value; i++) {
+    let x = i;
+    let y = (H1 / Q1 / Q1) * x * x;
+    data.push([x, y]);
+    datax.push(x * 60);
+  }
+  echartData.xdata = datax;
+  echartData.ydata = data;
+  echartData.ydata1 = data2;
+  echartData.ydata2 = [[Q1, H1]];
+}
 
-  watch(
-    () => props.maindata,
-    (val) => {
-      mainList = val;
-      mainTypeList.length = 0;
-      mainList.forEach((el) => {
-        mainTypeList.push({
-          label: el.strinstallpos,
-          value: el.deviceID,
-        });
+watch(
+  () => props.maindata,
+  (val) => {
+    mainList = val;
+    mainTypeList.length = 0;
+    mainList.forEach((el) => {
+      mainTypeList.push({
+        label: el.strinstallpos,
+        value: el.deviceID,
       });
+    });
 
-      if (searchValue.value) {
-        changeSelect(searchValue.value);
-      } else {
-        searchValue.value = mainTypeList[0].value;
-        changeSelect(searchValue.value);
-      }
-    },
-    {
-      deep: true,
+    if (searchValue.value) {
+      changeSelect(searchValue.value);
+    } else {
+      searchValue.value = mainTypeList[0].value;
+      changeSelect(searchValue.value);
     }
-  );
-  onMounted(() => {});
+  },
+  {
+    deep: true,
+  }
+);
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.mainMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
   }
 
-  .mainMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
 
-    .title-top {
+    .icon-search {
       position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-
-      &:hover {
-        color: #66ffff;
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
     }
 
-    .toggle-search {
-      position: absolute;
-      left: 9px;
-      top: 37px;
+    .status-yx {
+      height: 30px;
+      width: 180px;
+      background-color: rgba(8, 148, 255, 0.3);
+      border: 1px solid #1d80da;
       display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
+      .now-status {
+        margin-right: 5px;
+        padding-top: 3px;
+        font-family: 'douyuFont';
+        color: #3df6ff;
       }
+    }
+  }
 
-      .status-yx {
-        height: 30px;
-        width: 180px;
-        background-color: rgba(8, 148, 255, 0.3);
-        border: 1px solid #1d80da;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+  .main-contents {
+    position: relative;
+    top: 66px;
+    left: 0;
+    height: calc(100% - 66px);
+    width: 100%;
 
-        .now-status {
-          margin-right: 5px;
-          padding-top: 3px;
-          font-family: 'douyuFont';
-          color: #3df6ff;
-        }
-      }
+    .point-des-box {
+      position: absolute;
+      background: #0d0d0dbd;
+      padding: 5px 8px;
+      border-radius: 10px;
+      border: 1px solid #ffffff;
+      z-index: 999;
+      color: #fff;
+      right: 20px;
+      top: 10px;
     }
 
-    .main-contents {
-      position: relative;
-      top: 66px;
-      left: 0;
-      height: calc(100% - 66px);
+    .main {
       width: 100%;
-
-      .point-des-box {
-        position: absolute;
-        background: #0d0d0dbd;
-        padding: 5px 8px;
-        border-radius: 10px;
-        border: 1px solid #ffffff;
-        z-index: 999;
-        color: #fff;
-        right: 20px;
-        top: 10px;
-      }
-
-      .main {
-        width: 100%;
-        height: 100%;
-        overflow-x: hidden;
-      }
+      height: 100%;
+      overflow-x: hidden;
     }
   }
+}
 
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
 
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
 
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>