|  | @@ -40,390 +40,397 @@
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script lang="ts" setup>
 | 
	
		
			
				|  |  | -import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
 | 
	
		
			
				|  |  | -import * as echarts from 'echarts';
 | 
	
		
			
				|  |  | -import { formatNum } from '/@/utils/ventutil'
 | 
	
		
			
				|  |  | -const emit = defineEmits(['goDetail'])
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -let props = defineProps({
 | 
	
		
			
				|  |  | -  dataSource: Object,
 | 
	
		
			
				|  |  | -});
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -//获取dom节点
 | 
	
		
			
				|  |  | -let majorpath = ref<any>();
 | 
	
		
			
				|  |  | -let lineData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | -let searchValue = ref('');
 | 
	
		
			
				|  |  | -const lineTypeList = reactive<any[]>([]);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -let echartData = reactive<any[]>([
 | 
	
		
			
				|  |  | -  { name: '进风区', value: 0 },
 | 
	
		
			
				|  |  | -  { name: '用风区', value: 0 },
 | 
	
		
			
				|  |  | -  { name: '回风区', value: 0 },
 | 
	
		
			
				|  |  | -]);
 | 
	
		
			
				|  |  | -let xData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | -let yData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | -let percentE = ref<any>(0);
 | 
	
		
			
				|  |  | -let percentF = ref<any>(0);
 | 
	
		
			
				|  |  | -let percentT = ref<any>(0);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -let tabList = reactive<any[]>([
 | 
	
		
			
				|  |  | -  { name: '总风量(m³/min)', val: 0 },
 | 
	
		
			
				|  |  | -  { name: '总阻力(Pa)', val: 0 },
 | 
	
		
			
				|  |  | -  { name: '等积孔(m²)', val: 0 },
 | 
	
		
			
				|  |  | -]);
 | 
	
		
			
				|  |  | -//跳转详情
 | 
	
		
			
				|  |  | -function getDetail() {
 | 
	
		
			
				|  |  | -  console.log('跳转详情');
 | 
	
		
			
				|  |  | -  emit('goDetail', 'line')
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -//选项切换
 | 
	
		
			
				|  |  | -function changeSelect(val) {
 | 
	
		
			
				|  |  | -  echartData[0].value = (val['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
 | 
	
		
			
				|  |  | -  echartData[1].value = (val['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
 | 
	
		
			
				|  |  | -  echartData[2].value = (val['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
 | 
	
		
			
				|  |  | -  tabList[0].val = ((val['m3_total']) || (Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600)).toFixed(2);
 | 
	
		
			
				|  |  | -  tabList[1].val = (val['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
 | 
	
		
			
				|  |  | -  tabList[2].val = formatNum(1.19 * Number(tabList[0].val) / 60 / Math.sqrt(Number(tabList[1].val)));
 | 
	
		
			
				|  |  | -  percentF.value = formatNum((Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100);
 | 
	
		
			
				|  |  | -  percentT.value = formatNum((Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100)
 | 
	
		
			
				|  |  | -  percentE.value = formatNum((echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100)
 | 
	
		
			
				|  |  | -  getOption();
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -function getOption() {
 | 
	
		
			
				|  |  | -  nextTick(() => {
 | 
	
		
			
				|  |  | -    function deepCopy(obj) {
 | 
	
		
			
				|  |  | -      if (typeof obj !== 'object') {
 | 
	
		
			
				|  |  | -        return obj;
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -      var newobj = {};
 | 
	
		
			
				|  |  | -      for (var attr in obj) {
 | 
	
		
			
				|  |  | -        newobj[attr] = obj[attr];
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -      return newobj;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    echartData.map((a, b) => {
 | 
	
		
			
				|  |  | -      xData.push(a.name);
 | 
	
		
			
				|  |  | -      yData.push(a.value);
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | +  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
 | 
	
		
			
				|  |  | +  import * as echarts from 'echarts';
 | 
	
		
			
				|  |  | +  import { formatNum } from '/@/utils/ventutil';
 | 
	
		
			
				|  |  | +  const emit = defineEmits(['goDetail']);
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    var startColor = [ 'rgba(154, 255, 168,.6)', 'rgba(255, 224, 28,.6)', 'rgba(255, 54, 93, .6)'];
 | 
	
		
			
				|  |  | -    var borderStartColor = [ '#9affa8', '#ffe01c', '#FF365D',];
 | 
	
		
			
				|  |  | -    // var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
 | 
	
		
			
				|  |  | -    // var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
 | 
	
		
			
				|  |  | -    var RealData = [];
 | 
	
		
			
				|  |  | -    var borderData = [];
 | 
	
		
			
				|  |  | -    echartData.map((item, index) => {
 | 
	
		
			
				|  |  | -      var newobj = deepCopy(item);
 | 
	
		
			
				|  |  | -      var newobj1 = deepCopy(item);
 | 
	
		
			
				|  |  | -      RealData.push(newobj);
 | 
	
		
			
				|  |  | -      borderData.push(newobj1);
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | -    RealData.map((item, index) => {
 | 
	
		
			
				|  |  | -      item.itemStyle = {
 | 
	
		
			
				|  |  | -        normal: {
 | 
	
		
			
				|  |  | -          color: startColor[index],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      };
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | -    borderData.map((item, index) => {
 | 
	
		
			
				|  |  | -      item.itemStyle = {
 | 
	
		
			
				|  |  | -        normal: {
 | 
	
		
			
				|  |  | -          color: borderStartColor[index],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      };
 | 
	
		
			
				|  |  | -    });
 | 
	
		
			
				|  |  | -    const myChart = echarts.init(majorpath.value);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    let option = {
 | 
	
		
			
				|  |  | -      legend: [
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          // orient: 'vertical',
 | 
	
		
			
				|  |  | -          x: '50%',
 | 
	
		
			
				|  |  | -          y: '12%',
 | 
	
		
			
				|  |  | -          itemWidth: 10,
 | 
	
		
			
				|  |  | -          itemHeight: 10,
 | 
	
		
			
				|  |  | -          align: 'left',
 | 
	
		
			
				|  |  | -          textStyle: {
 | 
	
		
			
				|  |  | -            fontSize: 14,
 | 
	
		
			
				|  |  | -            color: '#9affa8',
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -          data: ['进风区'],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          // orient: 'vertical',
 | 
	
		
			
				|  |  | -          x: '50%',
 | 
	
		
			
				|  |  | -          y: '42%',
 | 
	
		
			
				|  |  | -          itemWidth: 10,
 | 
	
		
			
				|  |  | -          itemHeight: 10,
 | 
	
		
			
				|  |  | -          align: 'left',
 | 
	
		
			
				|  |  | -          textStyle: {
 | 
	
		
			
				|  |  | -            fontSize: 14,
 | 
	
		
			
				|  |  | -            color: '#ffe01c',
 | 
	
		
			
				|  |  | +  let props = defineProps({
 | 
	
		
			
				|  |  | +    dataSource: Object,
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  //获取dom节点
 | 
	
		
			
				|  |  | +  let majorpath = ref<any>();
 | 
	
		
			
				|  |  | +  let lineData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | +  let searchValue = ref('');
 | 
	
		
			
				|  |  | +  const lineTypeList = reactive<any[]>([]);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  let echartData = reactive<any[]>([
 | 
	
		
			
				|  |  | +    { name: '进风区', value: 0 },
 | 
	
		
			
				|  |  | +    { name: '用风区', value: 0 },
 | 
	
		
			
				|  |  | +    { name: '回风区', value: 0 },
 | 
	
		
			
				|  |  | +  ]);
 | 
	
		
			
				|  |  | +  let xData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | +  let yData = reactive<any[]>([]);
 | 
	
		
			
				|  |  | +  let percentE = ref<any>(0);
 | 
	
		
			
				|  |  | +  let percentF = ref<any>(0);
 | 
	
		
			
				|  |  | +  let percentT = ref<any>(0);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  let tabList = reactive<any[]>([
 | 
	
		
			
				|  |  | +    { name: '总风量(m³/min)', val: 0 },
 | 
	
		
			
				|  |  | +    { name: '总阻力(Pa)', val: 0 },
 | 
	
		
			
				|  |  | +    { name: '等积孔(m²)', val: 0 },
 | 
	
		
			
				|  |  | +  ]);
 | 
	
		
			
				|  |  | +  //跳转详情
 | 
	
		
			
				|  |  | +  function getDetail() {
 | 
	
		
			
				|  |  | +    console.log('跳转详情');
 | 
	
		
			
				|  |  | +    emit('goDetail', 'line');
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  //选项切换
 | 
	
		
			
				|  |  | +  function changeSelect(val) {
 | 
	
		
			
				|  |  | +    echartData[0].value = (val['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
 | 
	
		
			
				|  |  | +    echartData[1].value = (val['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
 | 
	
		
			
				|  |  | +    echartData[2].value = (val['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
 | 
	
		
			
				|  |  | +    tabList[0].val = (val['m3_total'] || Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600).toFixed(2);
 | 
	
		
			
				|  |  | +    tabList[1].val = (val['drag_total'] || Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423).toFixed(2);
 | 
	
		
			
				|  |  | +    tabList[2].val = formatNum((1.19 * Number(tabList[0].val)) / 60 / Math.sqrt(Number(tabList[1].val)));
 | 
	
		
			
				|  |  | +    percentF.value = formatNum(
 | 
	
		
			
				|  |  | +      (Number(echartData[0].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +    percentT.value = formatNum(
 | 
	
		
			
				|  |  | +      (Number(echartData[1].value) / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +    percentE.value = formatNum(
 | 
	
		
			
				|  |  | +      (echartData[2].value / (Number(echartData[0].value) + Number(echartData[1].value) + Number(echartData[2].value))) * 100
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +    getOption();
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  function getOption() {
 | 
	
		
			
				|  |  | +    nextTick(() => {
 | 
	
		
			
				|  |  | +      function deepCopy(obj) {
 | 
	
		
			
				|  |  | +        if (typeof obj !== 'object') {
 | 
	
		
			
				|  |  | +          return obj;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        var newobj = {};
 | 
	
		
			
				|  |  | +        for (var attr in obj) {
 | 
	
		
			
				|  |  | +          newobj[attr] = obj[attr];
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        return newobj;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      echartData.map((a, b) => {
 | 
	
		
			
				|  |  | +        xData.push(a.name);
 | 
	
		
			
				|  |  | +        yData.push(a.value);
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      var startColor = ['rgba(154, 255, 168,.6)', 'rgba(255, 224, 28,.6)', 'rgba(255, 54, 93, .6)'];
 | 
	
		
			
				|  |  | +      var borderStartColor = ['#9affa8', '#ffe01c', '#FF365D'];
 | 
	
		
			
				|  |  | +      // var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
 | 
	
		
			
				|  |  | +      // var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
 | 
	
		
			
				|  |  | +      var RealData = [];
 | 
	
		
			
				|  |  | +      var borderData = [];
 | 
	
		
			
				|  |  | +      echartData.map((item, index) => {
 | 
	
		
			
				|  |  | +        var newobj = deepCopy(item);
 | 
	
		
			
				|  |  | +        var newobj1 = deepCopy(item);
 | 
	
		
			
				|  |  | +        RealData.push(newobj);
 | 
	
		
			
				|  |  | +        borderData.push(newobj1);
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      RealData.map((item, index) => {
 | 
	
		
			
				|  |  | +        item.itemStyle = {
 | 
	
		
			
				|  |  | +          normal: {
 | 
	
		
			
				|  |  | +            color: startColor[index],
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          data: ['用风区'],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          // orient: 'vertical',
 | 
	
		
			
				|  |  | -          x: '50%',
 | 
	
		
			
				|  |  | -          y: '70%',
 | 
	
		
			
				|  |  | -          itemWidth: 10,
 | 
	
		
			
				|  |  | -          itemHeight: 10,
 | 
	
		
			
				|  |  | -          align: 'left',
 | 
	
		
			
				|  |  | -          textStyle: {
 | 
	
		
			
				|  |  | -            fontSize: 14,
 | 
	
		
			
				|  |  | -            color: '#FF365D',
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      borderData.map((item, index) => {
 | 
	
		
			
				|  |  | +        item.itemStyle = {
 | 
	
		
			
				|  |  | +          normal: {
 | 
	
		
			
				|  |  | +            color: borderStartColor[index],
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          data: ['回风区'],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      ],
 | 
	
		
			
				|  |  | -      tooltip: {
 | 
	
		
			
				|  |  | -        formatter: '{b}:{c}',
 | 
	
		
			
				|  |  | -      },
 | 
	
		
			
				|  |  | -      series: [
 | 
	
		
			
				|  |  | -        // 主要展示层的
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          radius: ['40%', '80%'],
 | 
	
		
			
				|  |  | -          center: ['25%', '50%'],
 | 
	
		
			
				|  |  | -          type: 'pie',
 | 
	
		
			
				|  |  | -          z: 10,
 | 
	
		
			
				|  |  | -          label: {
 | 
	
		
			
				|  |  | -            normal: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | -            },
 | 
	
		
			
				|  |  | -            emphasis: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +      const myChart = echarts.init(majorpath.value);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      let option = {
 | 
	
		
			
				|  |  | +        legend: [
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            // orient: 'vertical',
 | 
	
		
			
				|  |  | +            x: '50%',
 | 
	
		
			
				|  |  | +            y: '12%',
 | 
	
		
			
				|  |  | +            itemWidth: 10,
 | 
	
		
			
				|  |  | +            itemHeight: 10,
 | 
	
		
			
				|  |  | +            align: 'left',
 | 
	
		
			
				|  |  | +            textStyle: {
 | 
	
		
			
				|  |  | +              fontSize: 14,
 | 
	
		
			
				|  |  | +              color: '#9affa8',
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | +            data: ['进风区'],
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          labelLine: {
 | 
	
		
			
				|  |  | -            normal: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | -            },
 | 
	
		
			
				|  |  | -            emphasis: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            // orient: 'vertical',
 | 
	
		
			
				|  |  | +            x: '50%',
 | 
	
		
			
				|  |  | +            y: '42%',
 | 
	
		
			
				|  |  | +            itemWidth: 10,
 | 
	
		
			
				|  |  | +            itemHeight: 10,
 | 
	
		
			
				|  |  | +            align: 'left',
 | 
	
		
			
				|  |  | +            textStyle: {
 | 
	
		
			
				|  |  | +              fontSize: 14,
 | 
	
		
			
				|  |  | +              color: '#ffe01c',
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | +            data: ['用风区'],
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          itemStyle: {
 | 
	
		
			
				|  |  | -            normal: {
 | 
	
		
			
				|  |  | -              borderWidth: 5,
 | 
	
		
			
				|  |  | -              borderColor: 'rgba(2, 39, 115)',
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            // orient: 'vertical',
 | 
	
		
			
				|  |  | +            x: '50%',
 | 
	
		
			
				|  |  | +            y: '70%',
 | 
	
		
			
				|  |  | +            itemWidth: 10,
 | 
	
		
			
				|  |  | +            itemHeight: 10,
 | 
	
		
			
				|  |  | +            align: 'left',
 | 
	
		
			
				|  |  | +            textStyle: {
 | 
	
		
			
				|  |  | +              fontSize: 14,
 | 
	
		
			
				|  |  | +              color: '#FF365D',
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | +            data: ['回风区'],
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          data: RealData,
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        tooltip: {
 | 
	
		
			
				|  |  | +          formatter: '{b}:{c}',
 | 
	
		
			
				|  |  |          },
 | 
	
		
			
				|  |  | -        // 边框的设置
 | 
	
		
			
				|  |  | -        {
 | 
	
		
			
				|  |  | -          radius: ['45%', '52%'],
 | 
	
		
			
				|  |  | -          center: ['25%', '50%'],
 | 
	
		
			
				|  |  | -          type: 'pie',
 | 
	
		
			
				|  |  | -          z: 5,
 | 
	
		
			
				|  |  | -          label: {
 | 
	
		
			
				|  |  | -            normal: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +        series: [
 | 
	
		
			
				|  |  | +          // 主要展示层的
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            radius: ['40%', '80%'],
 | 
	
		
			
				|  |  | +            center: ['25%', '50%'],
 | 
	
		
			
				|  |  | +            type: 'pie',
 | 
	
		
			
				|  |  | +            z: 10,
 | 
	
		
			
				|  |  | +            label: {
 | 
	
		
			
				|  |  | +              normal: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +              emphasis: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | -            emphasis: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +            labelLine: {
 | 
	
		
			
				|  |  | +              normal: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +              emphasis: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            itemStyle: {
 | 
	
		
			
				|  |  | +              normal: {
 | 
	
		
			
				|  |  | +                borderWidth: 5,
 | 
	
		
			
				|  |  | +                borderColor: 'rgba(2, 39, 115)',
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | +            data: RealData,
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          labelLine: {
 | 
	
		
			
				|  |  | -            normal: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +          // 边框的设置
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            radius: ['45%', '52%'],
 | 
	
		
			
				|  |  | +            center: ['25%', '50%'],
 | 
	
		
			
				|  |  | +            type: 'pie',
 | 
	
		
			
				|  |  | +            z: 5,
 | 
	
		
			
				|  |  | +            label: {
 | 
	
		
			
				|  |  | +              normal: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +              emphasis: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | -            emphasis: {
 | 
	
		
			
				|  |  | -              show: false,
 | 
	
		
			
				|  |  | +            labelLine: {
 | 
	
		
			
				|  |  | +              normal: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +              emphasis: {
 | 
	
		
			
				|  |  | +                show: false,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -          animation: false,
 | 
	
		
			
				|  |  | -          tooltip: {
 | 
	
		
			
				|  |  | -            show: false,
 | 
	
		
			
				|  |  | +            animation: false,
 | 
	
		
			
				|  |  | +            tooltip: {
 | 
	
		
			
				|  |  | +              show: false,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            data: borderData,
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          data: borderData,
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | -      ],
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -    myChart.setOption(option);
 | 
	
		
			
				|  |  | -    window.onresize = function () {
 | 
	
		
			
				|  |  | -      myChart.resize();
 | 
	
		
			
				|  |  | -    };
 | 
	
		
			
				|  |  | -  });
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -watch(
 | 
	
		
			
				|  |  | -  () => props.dataSource,
 | 
	
		
			
				|  |  | -  (val) => {
 | 
	
		
			
				|  |  | -    changeSelect(val)
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | -  {
 | 
	
		
			
				|  |  | -    deep: true,
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +      myChart.setOption(option);
 | 
	
		
			
				|  |  | +      window.onresize = function () {
 | 
	
		
			
				|  |  | +        myChart.resize();
 | 
	
		
			
				|  |  | +      };
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -onMounted(() => { });
 | 
	
		
			
				|  |  | -</script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -<style lang="less" scoped>
 | 
	
		
			
				|  |  | -.windLine {
 | 
	
		
			
				|  |  | -  width: 100%;
 | 
	
		
			
				|  |  | -  height: 100%;
 | 
	
		
			
				|  |  | -  position: relative;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  .title-top {
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    top: 9px;
 | 
	
		
			
				|  |  | -    left: 46px;
 | 
	
		
			
				|  |  | -    color: #fff;
 | 
	
		
			
				|  |  | -    font-size: 16px;
 | 
	
		
			
				|  |  | -    font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -    cursor: pointer;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    &:hover {
 | 
	
		
			
				|  |  | -      color: #66ffff;
 | 
	
		
			
				|  |  | +  watch(
 | 
	
		
			
				|  |  | +    () => props.dataSource,
 | 
	
		
			
				|  |  | +    (val) => {
 | 
	
		
			
				|  |  | +      changeSelect(val);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    {
 | 
	
		
			
				|  |  | +      deep: true,
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  .toggle-search {
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    left: 9px;
 | 
	
		
			
				|  |  | -    top: 37px;
 | 
	
		
			
				|  |  | -    display: flex;
 | 
	
		
			
				|  |  | +  );
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .icon-search {
 | 
	
		
			
				|  |  | -      position: absolute;
 | 
	
		
			
				|  |  | -      top: 50%;
 | 
	
		
			
				|  |  | -      left: 5px;
 | 
	
		
			
				|  |  | -      transform: translate(0%, -50%);
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | +  onMounted(() => {});
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  .line-echart {
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    top: 66px;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | +<style lang="less" scoped>
 | 
	
		
			
				|  |  | +  .windLine {
 | 
	
		
			
				|  |  |      width: 100%;
 | 
	
		
			
				|  |  | -    height: 120px;
 | 
	
		
			
				|  |  | +    height: 100%;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .line {
 | 
	
		
			
				|  |  | -      width: 100%;
 | 
	
		
			
				|  |  | -      height: 100%;
 | 
	
		
			
				|  |  | +    .title-top {
 | 
	
		
			
				|  |  | +      position: absolute;
 | 
	
		
			
				|  |  | +      top: 9px;
 | 
	
		
			
				|  |  | +      left: 46px;
 | 
	
		
			
				|  |  | +      color: #fff;
 | 
	
		
			
				|  |  | +      font-size: 16px;
 | 
	
		
			
				|  |  | +      font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +      cursor: pointer;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      &:hover {
 | 
	
		
			
				|  |  | +        color: #66ffff;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .pic {
 | 
	
		
			
				|  |  | -      height: 100%;
 | 
	
		
			
				|  |  | +    .toggle-search {
 | 
	
		
			
				|  |  |        position: absolute;
 | 
	
		
			
				|  |  | -      left: 45%;
 | 
	
		
			
				|  |  | -      top: 0;
 | 
	
		
			
				|  |  | +      left: 9px;
 | 
	
		
			
				|  |  | +      top: 37px;
 | 
	
		
			
				|  |  |        display: flex;
 | 
	
		
			
				|  |  | -      align-items: center;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -      img {
 | 
	
		
			
				|  |  | -        height: 60%;
 | 
	
		
			
				|  |  | +      .icon-search {
 | 
	
		
			
				|  |  | +        position: absolute;
 | 
	
		
			
				|  |  | +        top: 50%;
 | 
	
		
			
				|  |  | +        left: 5px;
 | 
	
		
			
				|  |  | +        transform: translate(0%, -50%);
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    .percent {
 | 
	
		
			
				|  |  | +    .line-echart {
 | 
	
		
			
				|  |  |        position: absolute;
 | 
	
		
			
				|  |  | -      left: 75%;
 | 
	
		
			
				|  |  | -      top: 0;
 | 
	
		
			
				|  |  | -      width: 45px;
 | 
	
		
			
				|  |  | -      height: 100%;
 | 
	
		
			
				|  |  | -      display: flex;
 | 
	
		
			
				|  |  | -      flex-direction: column;
 | 
	
		
			
				|  |  | -      // justify-content: space-between;
 | 
	
		
			
				|  |  | -      align-items: center;
 | 
	
		
			
				|  |  | +      top: 66px;
 | 
	
		
			
				|  |  | +      left: 0;
 | 
	
		
			
				|  |  | +      width: 100%;
 | 
	
		
			
				|  |  | +      height: 120px;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -      .percent-box {
 | 
	
		
			
				|  |  | -        font-size: 14px;
 | 
	
		
			
				|  |  | +      .line {
 | 
	
		
			
				|  |  | +        width: 100%;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        // color: #b3b8cc;
 | 
	
		
			
				|  |  | -        &:nth-child(1) {
 | 
	
		
			
				|  |  | -          position: absolute;
 | 
	
		
			
				|  |  | -          top: 12%;
 | 
	
		
			
				|  |  | -          color: #9affa8;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +      .pic {
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +        position: absolute;
 | 
	
		
			
				|  |  | +        left: 45%;
 | 
	
		
			
				|  |  | +        top: 0;
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        &:nth-child(2) {
 | 
	
		
			
				|  |  | -          position: absolute;
 | 
	
		
			
				|  |  | -          top: 42%;
 | 
	
		
			
				|  |  | -          color: #ffe01c;
 | 
	
		
			
				|  |  | +        img {
 | 
	
		
			
				|  |  | +          height: 60%;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        &:nth-child(3) {
 | 
	
		
			
				|  |  | -          position: absolute;
 | 
	
		
			
				|  |  | -          top: 70%;
 | 
	
		
			
				|  |  | -          color: #FF365D;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +      .percent {
 | 
	
		
			
				|  |  | +        position: absolute;
 | 
	
		
			
				|  |  | +        left: 75%;
 | 
	
		
			
				|  |  | +        top: 0;
 | 
	
		
			
				|  |  | +        width: 45px;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        flex-direction: column;
 | 
	
		
			
				|  |  | +        // justify-content: space-between;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .percent-box {
 | 
	
		
			
				|  |  | +          font-size: 14px;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .dw {
 | 
	
		
			
				|  |  | -          color: #b3b8cc;
 | 
	
		
			
				|  |  | -          margin-left: 5px;
 | 
	
		
			
				|  |  | +          // color: #b3b8cc;
 | 
	
		
			
				|  |  | +          &:nth-child(1) {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 12%;
 | 
	
		
			
				|  |  | +            color: #9affa8;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          &:nth-child(2) {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 42%;
 | 
	
		
			
				|  |  | +            color: #ffe01c;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          &:nth-child(3) {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 70%;
 | 
	
		
			
				|  |  | +            color: #ff365d;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          .dw {
 | 
	
		
			
				|  |  | +            color: #b3b8cc;
 | 
	
		
			
				|  |  | +            margin-left: 5px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -  .line-card {
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    top: 186px;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | -    width: 100%;
 | 
	
		
			
				|  |  | -    height: calc(100% - 186px);
 | 
	
		
			
				|  |  | -    padding: 0px 15px 15px 15px;
 | 
	
		
			
				|  |  | -    box-sizing: border-box;
 | 
	
		
			
				|  |  | -    display: flex;
 | 
	
		
			
				|  |  | -    justify-content: space-around;
 | 
	
		
			
				|  |  | -    align-items: center;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    .card-item {
 | 
	
		
			
				|  |  | +    .line-card {
 | 
	
		
			
				|  |  | +      position: absolute;
 | 
	
		
			
				|  |  | +      top: 186px;
 | 
	
		
			
				|  |  | +      left: 0;
 | 
	
		
			
				|  |  | +      width: 100%;
 | 
	
		
			
				|  |  | +      height: calc(100% - 186px);
 | 
	
		
			
				|  |  | +      padding: 0px 15px 15px 15px;
 | 
	
		
			
				|  |  | +      box-sizing: border-box;
 | 
	
		
			
				|  |  |        display: flex;
 | 
	
		
			
				|  |  | -      flex: 1;
 | 
	
		
			
				|  |  | -      justify-content: center;
 | 
	
		
			
				|  |  | +      justify-content: space-around;
 | 
	
		
			
				|  |  |        align-items: center;
 | 
	
		
			
				|  |  | -      height: 100%;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -      .item-s {
 | 
	
		
			
				|  |  | -        position: relative;
 | 
	
		
			
				|  |  | -        width: 105px;
 | 
	
		
			
				|  |  | -        height: 58px;
 | 
	
		
			
				|  |  | -        margin: 0 1px;
 | 
	
		
			
				|  |  | -        margin-top: 20px;
 | 
	
		
			
				|  |  | -        background: url('/@/assets/images/home-container/line-val.png') no-repeat;
 | 
	
		
			
				|  |  | -        background-size: 100% 90%;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .item-label {
 | 
	
		
			
				|  |  | -          width: 100%;
 | 
	
		
			
				|  |  | -          text-align: center;
 | 
	
		
			
				|  |  | -          color: #b3b8cc;
 | 
	
		
			
				|  |  | -          font-size: 12px;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        .item-val {
 | 
	
		
			
				|  |  | -          position: absolute;
 | 
	
		
			
				|  |  | -          left: 50%;
 | 
	
		
			
				|  |  | -          top: 26px;
 | 
	
		
			
				|  |  | -          font-size: 14px;
 | 
	
		
			
				|  |  | -          font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -          color: #fff;
 | 
	
		
			
				|  |  | -          transform: translate(-50%, 0);
 | 
	
		
			
				|  |  | +      .card-item {
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        flex: 1;
 | 
	
		
			
				|  |  | +        justify-content: center;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +        height: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .item-s {
 | 
	
		
			
				|  |  | +          position: relative;
 | 
	
		
			
				|  |  | +          width: 105px;
 | 
	
		
			
				|  |  | +          height: 58px;
 | 
	
		
			
				|  |  | +          margin: 0 1px;
 | 
	
		
			
				|  |  | +          margin-top: 20px;
 | 
	
		
			
				|  |  | +          background: url('/@/assets/images/home-container/line-val.png') no-repeat;
 | 
	
		
			
				|  |  | +          background-size: 100% 90%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          .item-label {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            text-align: center;
 | 
	
		
			
				|  |  | +            color: #b3b8cc;
 | 
	
		
			
				|  |  | +            font-size: 12px;
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          .item-val {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            top: 26px;
 | 
	
		
			
				|  |  | +            font-size: 14px;
 | 
	
		
			
				|  |  | +            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +            color: #fff;
 | 
	
		
			
				|  |  | +            transform: translate(-50%, 0);
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -: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-arrow {
 | 
	
		
			
				|  |  | -  color: #fff !important;
 | 
	
		
			
				|  |  | -}</style>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  :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-arrow {
 | 
	
		
			
				|  |  | +    color: #fff !important;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +</style>
 |