提交新增文件

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

@@ -0,0 +1,665 @@
+<template>
+  <div class="mineWind">
+    <div class="mine-title">{{ mineTitle }}</div>
+    <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>
+      <!-- 信息列表 -->
+      <div class="content-search" v-if="activeIndex == '1'">
+        <div class="risk-select">
+          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
+            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
+          </a-select>
+          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
+            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
+          </a-select>
+          <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect">
+            <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{ item.orgname }} </a-select-option>
+          </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>
+        <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="item-val">{{ item.brz }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 统计信息 -->
+      <div class="echart-box" v-if="activeIndex == '2'">
+        <div class="piebox" ref="piebox"></div>
+      </div>
+      <div class="echart-all-box" v-if="activeIndex == '2'">
+        <div class="pieboxall" ref="pieboxall"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, watch, defineProps, nextTick } from 'vue';
+  import * as echarts from 'echarts';
+
+  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('');
+  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 },
+  ]);
+  let headList = reactive<any>([
+    { label: '序号' },
+    { label: '矿井名称' },
+    { label: '所属地区市/县' },
+    { label: '原煤产量/百万吨' },
+    { label: '从业人数/人' },
+    { label: '尘肺病累计病例/人' },
+    { label: '本年度尘肺病病例/人' },
+  ]);
+
+  //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: 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: {
+              normal: {
+                label: {
+                  show: true,
+                  fontSize: 10,
+                  color: '#fff',
+                  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,
+        },
+        {
+          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,
+          },
+          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 = [
+        {
+          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: ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县'],
+        },
+        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-family: 'douyuFont';
+      font-size: 14px;
+    }
+
+    .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;
+        }
+      }
+
+      .content-search {
+        position: relative;
+        width: 100%;
+        height: 35px;
+        margin-bottom: 10px;
+        // padding: 0px 30px;
+        display: flex;
+        align-items: center;
+
+        .risk-select {
+          position: absolute;
+          width: 90%;
+          height: 30px;
+          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;
+
+          .zxm-select {
+            position: absolute;
+            top: 50%;
+            transform: translate(0, -50%);
+
+            &:nth-child(1) {
+              left: 10px;
+            }
+
+            &:nth-child(2) {
+              left: 135px;
+            }
+
+            &:nth-child(3) {
+              left: 260px;
+            }
+          }
+        }
+      }
+
+      .content-table {
+        position: relative;
+        width: 90%;
+        height: calc(100% - 90px);
+        margin: 0px 30px;
+        border: 1px solid rgba(0, 216, 255, 0.3);
+
+        .table-head {
+          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: 5%;
+              text-align: center;
+            }
+
+            &:nth-child(2) {
+              width: 10%;
+              text-align: center;
+            }
+
+            &:nth-child(3) {
+              width: 15%;
+              text-align: center;
+            }
+
+            &:nth-child(4) {
+              width: 15%;
+              text-align: center;
+            }
+
+            &:nth-child(5) {
+              width: 15%;
+              text-align: center;
+            }
+
+            &:nth-child(6) {
+              width: 20%;
+              text-align: center;
+            }
+
+            &:nth-child(7) {
+              width: 20%;
+              text-align: center;
+            }
+          }
+        }
+
+        .table-cont {
+          height: calc(100% - 51px);
+          overflow-y: auto;
+          .cont-item {
+            display: flex;
+            justify-content: space-between;
+            height: 32.5px;
+            border-bottom: 1px solid rgba(0, 216, 255, 0.1);
+
+            .item-val {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              font-size: 12px;
+              border-right: 1px solid rgba(0, 216, 255, 0.1);
+              font-size: 12px;
+              border-right: 1px solid rgba(0, 216, 255, 0.1);
+              color: #fff;
+
+              &:nth-child(1) {
+                width: 5%;
+                text-align: center;
+              }
+
+              &:nth-child(2) {
+                width: 10%;
+                text-align: center;
+              }
+
+              &:nth-child(3) {
+                width: 15%;
+                text-align: center;
+              }
+
+              &:nth-child(4) {
+                width: 15%;
+                text-align: center;
+              }
+
+              &:nth-child(5) {
+                width: 15%;
+                text-align: center;
+              }
+
+              &:nth-child(6) {
+                width: 20%;
+                text-align: center;
+              }
+
+              &:nth-child(7) {
+                width: 20%;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+
+      .echart-box {
+        width: 100%;
+        height: 205px;
+
+        .piebox {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .echart-all-box {
+        width: 100%;
+        height: calc(100% - 250px);
+
+        .pieboxall {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  ::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>