适配提交

王旭

2023-05-09 93c0e388bc3fe955c223e1b23a1f4257b1d60d11

 src/components/Screen/left.vue

@@ -1,35 +1,220 @@
<template>
  <div class="current">
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
      <img
        :src="leftImg"
        @click="ChangeLeft"
      />
    </div>
    <div class="leftContainer" v-show="ChartDisplay">
      <div class="current1" id="leftCurrent1"></div>
      <div class="current1" id="leftCurrent2"></div>
      <div class="current1" id="leftCurrent3"></div>
    <div
      class="leftContainer"
      v-if="currentDisplay == '大屏' && ChartDisplay"
    >
      <div
        class="current1 current1-1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
      </div>
      <div
        class="current1 current1-2"
        id="leftCurrent2"
      >
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div
        class="current1 current1-3"
        id="leftCurrent3"
      >
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <div class="leftContainer" v-show="ProjectreeDisplay">
      <project-tree></project-tree>
    <!-- 全球、全国统计次数 -->
    <div
      class="leftContainer"
      v-if="currentDisplay == '项目'"
    >
      <div
        class="current1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop
            style="height: 40px"
            :config="xmCountConfig"
          />
        </div>
      </div>
      <div
        class="current1"
        id="leftCurrent2"
      >
        <div class="aside-title">存储信息</div>
        <base-line-chart
          :requsetFn="requsetFn"
          :project="currentProject"
          title="数据存储量"
        ></base-line-chart>
      </div>
      <div
        class="current1"
        id="leftCurrent3"
      >
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- 全球、全国管网图 -->
    <div
      class="leftContainer"
      v-if="currentDisplay == '管网'"
    >
      <div
        class="current1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop
            style="height: 40px"
            :config="xmCountConfig"
          />
        </div>
      </div>
      <div
        class="current1"
        id="leftCurrent2"
      >
        <div class="aside-title">管网长度</div>
        <base-line-chart
          :requsetFn="requsetFn"
          :project="currentProject"
          title="管网长度"
        ></base-line-chart>
        <!-- <base-pie-chart :project="currentProject"></base-pie-chart> -->
        <!-- <service-type></service-type> -->
      </div>
      <div
        class="current1"
        id="leftCurrent3"
      >
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- 单个工程展示 -->
    <div
      class="leftContainer"
      v-if="currentDisplay == '工程'"
    >
      <div class="current1">
        <div class="aside-title">工程简介</div>
        <projectintroduction></projectintroduction>
      </div>
      <div class="current1">
        <div class="aside-title">项目状态</div>
        <projectState></projectState>
      </div>
      <div class="current1">
        <div class="aside-title">建设工期</div>
        <projectTime></projectTime>
      </div>
    </div>
  </div>
</template>
<script>
import ProjectTree from './ProjectTree.vue'
import ProjectTree from "./ProjectTree.vue"
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import DataStorageType from "../chart/DataStorageType.vue"

import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
import projectintroduction from "../chart/projectintroduction.vue"
import projectState from "../chart/projectState.vue"
import projectTime from "../chart/projectTime.vue"
import {
  countCountryDimension,
  countProvinceDimension,
  countZhPipeStations,
  countZhPipeMapLength,
} from "@/api/screen.js"
function formatter(number) {
  const numbers = number.toString().split("").reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""))

  return segs.join(",").split("").reverse().join("")
}
export default {
  components: {
    ProjectTree
    ProjectTree,
    countDataApply,
    ServiceType,
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart,
    projectintroduction,
    projectState,
    projectTime,
    DataStorageType
  },
  data() {
    return {
      leftMessage: "init",
      ChartDisplay: true,
      ProjectreeDisplay: false,
      GlobleChartDisplay: false,
      CountryChartDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
      currentProject: "全球项目",
      currentDisplay: "大屏",
      requsetFn: countZhPipeMapLength,
      xmCountConfig: {
        number: [0],
        content: "{nt}",
        formatter,
      },
    }
  },
  mounted() {
    this.OpenLeftInit();
    this.OpenLeftInitChart();
    this.OpenLeftInit()
    // this.OpenLeftInitChart();

    this.$bus.$on("changeProject", name => {
      if (name.includes("全球管网") || name.includes("全国管网")) {
        this.currentDisplay = "管网"
      } else if (name.includes("全球项目") || name.includes("全国项目")) {
        this.currentDisplay = "项目"
      } else {
        this.currentDisplay = "工程"
      }

      this.currentProject = name
    })
    this.$bus.$on("changeCount", count => {
      if (typeof count == "number") {
        this.xmCountConfig.number = [count]
        this.xmCountConfig = {
          ...this.xmCountConfig,
        }
      }
    })
    this.$bus.$on("closeLeftAndRightMenu", (res) => {
      this.ChartDisplay = res;
      this.ProjectreeDisplay = res;
      this.ChangeLeft();
    })
  },
  methods: {
    ChangeLeft() {
@@ -39,7 +224,7 @@
        } else {
          this.leftImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.ChartDisplay = !this.ChartDisplay;
        this.ChartDisplay = !this.ChartDisplay
      }

      if (this.leftMessage == "projectree") {
@@ -48,109 +233,110 @@
        } else {
          this.leftImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.ProjectreeDisplay = !this.ProjectreeDisplay;
        this.ProjectreeDisplay = !this.ProjectreeDisplay
      }


      this.$parent.ChangeWidth("left");
      this.$parent.ChangeWidth("left")
    },
    //打开大屏左侧界面
    OpenLeftInit() {
      this.ChartDisplay = true;
      this.ProjectreeDisplay = false;
      this.leftMessage = "init";
      this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView");
      this.currentDisplay = "大屏"

      this.ChartDisplay = true
      this.ProjectreeDisplay = false
      this.leftMessage = "init"
      // this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView")
      this.GlobleChartDisplay = false
    },
    //打开工程树
    OpenLeftProjectTree() {
      this.ChartDisplay = false;
      this.ProjectreeDisplay = true;
      this.leftMessage = "projectree";
      this.$parent.ChangeWidth("leftTree");
      this.ChartDisplay = false
      this.ProjectreeDisplay = true
      this.leftMessage = "projectree"
      this.$parent.ChangeWidth("leftTree")
    },
    //大屏界面图表
    OpenLeftInitChart() {
      //左一图
      let option1 = {
        title: {
          text: '项目分类',
          text: "项目分类",
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
            color: "#fff",
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '0%',
          left: "2%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: '#ccc',
              color: "#ccc",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: 'category',
          type: "category",
          data: [
            '管道类',
            '管网类',
            '基建类',
            '航空测量',
            '风险排查',
            '工程培训',
            "管道类",
            "管网类",
            "基建类",
            "航空测量",
            "风险排查",
            "工程培训",
          ],
          axisLine: {
            lineStyle: {
              color: '#ccc',
              color: "#ccc",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: '项目分类',
            type: 'bar',
            name: "项目分类",
            type: "bar",
            barWidth: 20,
            data: [36, 45, 25, 15, 49, 33],
            itemStyle: {
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [0, 90, 90, 0],
                color: (params) => {
                color: params => {
                  var colorList = [
                    ['#00FCFF', '#008297'],
                    ['#0091FF', '#005EA4'],
                    ['#901698', '#F157EE'],
                    ['#40FBCB', '#009871'],
                    ['#FF515A', '#FFDD53'],
                    ['#6574E2', '#261164'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                    ["#00FCFF", "#008297"],
                    ["#0091FF", "#005EA4"],
                    ["#901698", "#F157EE"],
                    ["#40FBCB", "#009871"],
                    ["#FF515A", "#FFDD53"],
                    ["#6574E2", "#261164"],
                  ]
                  var colorItem = colorList[params.dataIndex]
                  return new this.$echarts.graphic.LinearGradient(
                    1,
                    0,
@@ -167,68 +353,68 @@
                      },
                    ],
                    false
                  );
                  )
                },
              },
            },
          },
        ],
      };
      let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"));
      myChart1.setOption(option1);
      }
      let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"))
      myChart1.setOption(option1)
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
        myChart1.resize()
      })

      //左二图
      let dataAxis = [
        '中俄东线管道工程南段',
        '中俄东线管道工程中段',
        '广州站',
        '唐山LNG',
        '新疆连木沁站场',
        '中缅天然气管道风险排查航空摄影测量',
      ];
      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
      let yMax = 500;
      let dataShadow = [];
        "中俄东线管道工程南段",
        "中俄东线管道工程中段",
        "广州站",
        "唐山LNG",
        "新疆连木沁站场",
        "中缅天然气管道风险排查航空摄影测量",
      ]
      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]
      let yMax = 500
      let dataShadow = []
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
        dataShadow.push(yMax)
      }
      let option2 = {
        title: {
          text: '项目完成度',
          text: "项目完成度",
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
            color: "#fff",
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        grid: {
          left: '3%',
          right: '0%',
          bottom: '0%',
          left: "3%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          type: "category",
          data: dataAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
            formatter: function (params) {
              var newParamsName = ''; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 4; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              var newParamsName = "" // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的个数
              var provideNumber = 4 // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
@@ -236,25 +422,25 @@
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  var tempStr = "" // 表示每一次截取的字符串
                  var start = p * provideNumber // 开始截取的位置
                  var end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n';
                    tempStr = params.substring(start, end) + "\n"
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
                newParamsName = params
              }
              //将最终的字符串返回
              return newParamsName;
              return newParamsName
            },
          },
        },
@@ -264,7 +450,7 @@
          },

          splitLine: {
            show: false
            show: false,
          },
          axisTick: {
            show: false,
@@ -273,70 +459,69 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
          },
        },
        dataZoom: [
          {
            type: 'inside',
            type: "inside",
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: '40%',
            type: "bar",
            barWidth: "40%",
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' },
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' },
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };
      const zoomSize = 6;
      let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2'));
      myChart2.on('click', function (params) {
      }
      const zoomSize = 6
      let myChart2 = this.$echarts.init(document.getElementById("leftCurrent2"))
      myChart2.on("click", function (params) {
        myChart2.dispatchAction({
          type: 'dataZoom',
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
            Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });
        })
      })

      myChart2.setOption(option2);
      window.addEventListener('resize', function () {
        myChart2.resize();
      });

      myChart2.setOption(option2)
      window.addEventListener("resize", function () {
        myChart2.resize()
      })

      //左三图
      var legendData = ['人员', '变更后人员']; //图例
      var legendData = ["人员", "变更后人员"] //图例

      var indicator = [
        { name: '中缅天然气管道风险排查航空摄影测量', max: 80 },
        { name: '唐山LNG', max: 80 },
        { name: '中俄东线管道工程南段', max: 160 },
        { name: '中俄东线管道工程中段', max: 100 },
        { name: '新疆连木沁站场', max: 40 },
        { name: '广州站', max: 40 },
      ];
        { name: "中缅天然气管道风险排查航空摄影测量", max: 80 },
        { name: "唐山LNG", max: 80 },
        { name: "中俄东线管道工程南段", max: 160 },
        { name: "中俄东线管道工程中段", max: 100 },
        { name: "新疆连木沁站场", max: 40 },
        { name: "广州站", max: 40 },
      ]
      var dataArr = [
        {
          value: [35, 30, 80, 70, 15, 15],
@@ -344,11 +529,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF',
                color: "#4A99FF",
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowColor: "#4A99FF",
              shadowBlur: 10,
            },
          },
@@ -356,7 +541,7 @@
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 1, //左
@@ -364,15 +549,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: '#4A99FF',
                    color: "#4A99FF",
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                    color: "rgba(0,0,0,0)",
                  },
                  {
                    offset: 1,
                    color: '#4A99FF',
                    color: "#4A99FF",
                  },
                ],
                globalCoord: false,
@@ -384,7 +569,7 @@
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
              return params.value
            },
          },
        },
@@ -394,11 +579,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC',
                color: "#4BFFFC",
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowColor: "#4BFFFC",
              shadowBlur: 10,
            },
          },
@@ -406,7 +591,7 @@
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 1, //左
@@ -414,15 +599,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: '#4BFFFC',
                    color: "#4BFFFC",
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                    color: "rgba(0,0,0,0)",
                  },
                  {
                    offset: 1,
                    color: '#4BFFFC',
                    color: "#4BFFFC",
                  },
                ],
                globalCoord: false,
@@ -434,19 +619,19 @@
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
              return params.value
            },
          },
        },
      ];
      var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
      ]
      var colorArr = ["#4A99FF", "#4BFFFC"] //颜色
      let option3 = {
        title: {
          text: '人员变动',
          text: "人员变动",
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
            color: "#fff",
            fontSize: 15,
          },
        },
        color: colorArr,
@@ -454,7 +639,7 @@
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              color: "#fff",
              fontSize: 12,
            },
          },
@@ -469,49 +654,42 @@
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#153269',
              color: "#153269",
            },
          },
          splitLine: {
            lineStyle: {
              color: '#113865', // 分隔线颜色
              color: "#113865", // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: 'radar',
            type: "radar",
            symbolSize: 4,
            // symbol: 'angle',
            data: dataArr,
          },
        ],
      };
      }

      let myChart3 = this.$echarts.init(document.getElementById('leftCurrent3'));
      myChart3.setOption(option3);
      window.addEventListener('resize', function () {
        myChart3.resize();
      });

      let myChart3 = this.$echarts.init(document.getElementById("leftCurrent3"))
      myChart3.setOption(option3)
      window.addEventListener("resize", function () {
        myChart3.resize()
      })
    },






  },
}
</script>
<style lang="scss">
<style lang="less">
.current {
  height: 100%;
  width: 100%;
@@ -536,20 +714,55 @@

  .leftContainer {
    height: 100%;
    width: calc(100% - 36px);

    width: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .current1 {
      height: 30%;
      height: 32%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    .content {
      width: 100%;
      background: url(../../assets/img/Screen/contentBg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 15px auto;
      width: 180px;
      height: 180px;
      background: url(../../assets/img/Screen/all.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .title {
        color: #fff;
        font-size: 20px;
        width: 100%;
        text-align: center;
      }
    }
  }
}
@media (max-width: 1400px) {
  .current .leftContainer .current1-1 {
    height: 28%;
  }
  .current .leftContainer .current1-2 {
    
     height: 42%;
  }
  .current .leftContainer .current1-3 {
   height: 28%;
  }
}
</style>