1

Surpriseplus

2022-12-19 9c803f20cc05395bac2d3386accfe230210c07dc

1

 public/config/config.js

@@ -7,6 +7,15 @@
var wnsUrl = 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns';
//gisserver
var gisServerUrl = 'http://192.168.20.39:9055/gisserver';
//geoServerUrl
var geoserver = 'http://192.168.20.39:8088';
var geoServerURl = geoserver + '/geoserver/LF/wms';
var geoserverWFS =
  geoserver +
  '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
var geoserverWFSLine =
  geoserver +
  '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
//模型加载地址
var modelUrl = 'http://183.162.245.49:8099/pcdata/JC_MAX_MX/SN/tileset.json';
//综合展示

 src/components/echart11.vue

@@ -10,64 +10,67 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "目录分布",
          text: '目录分布',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        // legend: {},
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          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",
          data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7"],
          type: 'category',
          data: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
          axisLine: {
            lineStyle: {
              color: "#ccc",
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
            formatter: function (params) {
              var newParamsName = ""; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -78,7 +81,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -87,7 +90,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -102,8 +105,8 @@
        },
        series: [
          {
            name: "目录分布",
            type: "bar",
            name: '目录分布',
            type: 'bar',
            barWidth: 20,
            data: [120, 150, 110, 50, 70, 20, 70],
            showBackground: true,
@@ -113,13 +116,13 @@

                color: (params) => {
                  var colorList = [
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ["#188df0", "#83bff6"],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new this.$echarts.graphic.LinearGradient(
@@ -145,10 +148,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart6"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart6'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart12.vue

@@ -8,21 +8,21 @@
export default {
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  //方法集合
  methods: {
    gaugeChart1() {
      var legendData = ["提交数据量", "提供集成服务量"]; //图例
      var legendData = ['提交数据量', '提供集成服务量']; //图例

      var indicator = [
        { name: "管道设计部", max: 12288 },
        { name: "站场设计部", max: 12288 },
        { name: "总图室", max: 12288 },
        { name: "勘察室", max: 12288 },
        { name: "土防室", max: 12288 },
        { name: "测量部", max: 12288 },
        { name: "项目部", max: 12288 },
        { name: '管道设计部', max: 12288 },
        { name: '站场设计部', max: 12288 },
        { name: '总图室', max: 12288 },
        { name: '勘察室', max: 12288 },
        { name: '土防室', max: 12288 },
        { name: '测量部', max: 12288 },
        { name: '项目部', max: 12288 },
      ];
      var dataArr = [
        {
@@ -31,11 +31,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4A99FF",
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: "#4A99FF",
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
@@ -43,7 +43,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -51,15 +51,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: "#BB857A",
                    color: '#BB857A',
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0,0,0,0)",
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: "#BB857A",
                    color: '#BB857A',
                  },
                ],
                globalCoord: false,
@@ -81,11 +81,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#03CCDB",
                color: '#03CCDB',
                // shadowColor: '#03CCDB',
                // shadowBlur: 10,
              },
              shadowColor: "#03CCDB",
              shadowColor: '#03CCDB',
              shadowBlur: 10,
            },
          },
@@ -93,7 +93,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -101,15 +101,15 @@
                colorStops: [
                  {
                    offset: 0,
                    color: "#03CCDB",
                    color: '#03CCDB',
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0,0,0,0)",
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: "#03CCDB",
                    color: '#03CCDB',
                  },
                ],
                globalCoord: false,
@@ -126,14 +126,14 @@
          },
        },
      ];
      var colorArr = ["#BB857A", "#03CCDB"]; //颜色
      var colorArr = ['#BB857A', '#03CCDB']; //颜色
      let option = {
        title: {
          // show: false,
          text: "数据及服务提交",
          text: '数据及服务提交',
          // x: "4%",
          textStyle: {
            color: "#fff",
            color: '#fff',
            // fontSize: "22",
          },
          // subtextStyle: {
@@ -148,8 +148,8 @@

        color: colorArr,
        legend: {
          orient: "vertical",
          icon: "circle", //图例形状
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 0,
          right: 0,
@@ -158,14 +158,14 @@
          itemGap: 21, // å›¾ä¾‹æ¯é¡¹ä¹‹é—´çš„间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 12,
            color: "#03CCDB",
            color: '#03CCDB',
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              color: '#fff',
              fontSize: 12,
            },
          },
@@ -180,25 +180,25 @@
            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,
@@ -206,15 +206,20 @@
        ],
      };

      let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(
        document.getElementById('gauge_chart1')
      );
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },
  mounted() {
    this.gaugeChart1();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
};
</script>

 src/components/echart13.vue

@@ -10,20 +10,23 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let dataAxis = [
        "勘察数据",
        "岩土数据",
        "测量数据",
        "合规数据",
        "管理数据",
        '勘察数据',
        '岩土数据',
        '测量数据',
        '合规数据',
        '管理数据',
      ];
      // prettier-ignore
      let data =  [122880,
@@ -39,34 +42,34 @@
      }
      let option = {
        title: {
          text: "各类数据存储分布",
          text: '各类数据存储分布',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          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 newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -77,7 +80,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -86,7 +89,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -110,33 +113,33 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            type: 'inside',
          },
        ],
        series: [
          {
            type: "bar",
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#45CF98" },
                { offset: 0.5, color: "#0CC2C7" },
                { offset: 1, color: "#0EBFC1" },
                { offset: 0, color: '#45CF98' },
                { offset: 0.5, color: '#0CC2C7' },
                { offset: 1, color: '#0EBFC1' },
              ]),
              barBorderRadius: [95, 95, 95, 95],
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#45CF98" },
                  { offset: 0.7, color: "#0CC2C7" },
                  { offset: 1, color: "#0EBFC1" },
                  { offset: 0, color: '#45CF98' },
                  { offset: 0.7, color: '#0CC2C7' },
                  { offset: 1, color: '#0EBFC1' },
                ]),
              },
            },
@@ -145,11 +148,11 @@
        ],
      };
      const zoomSize = 6;
      let myChart = this.$echarts.init(document.getElementById("echart2"));
      myChart.on("click", function (params) {
      this.myChart = this.$echarts.init(document.getElementById('echart2'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
@@ -158,9 +161,9 @@
        });
      });

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart14.vue

@@ -10,32 +10,35 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "数据更新量与分布总量",
          text: '数据更新量与分布总量',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "cross",
            type: 'cross',
            label: {
              backgroundColor: "#FFFFFF",
              backgroundColor: '#FFFFFF',
            },
          },
        },
        legend: {
          data: ["增量", "总量", "Video Ads", "Direct", "Search Engine"],
          data: ['增量', '总量', 'Video Ads', 'Direct', 'Search Engine'],
        },
        toolbox: {
          feature: {
@@ -43,25 +46,25 @@
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "category",
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          },
@@ -70,48 +73,48 @@
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "value",
            type: 'value',
            boundaryGap: false,
          },
        ],
        series: [
          {
            name: "增量",
            type: "line",
            stack: "Total",
            name: '增量',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#8F595A",
              color: '#8F595A',
              opacity: 0.5,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300],
          },

          {
            name: "总量",
            type: "line",
            stack: "Total",
            name: '总量',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: "top",
              position: 'top',
            },
            areaStyle: {
              color: "#02929E",
              color: '#02929E',
              opacity: 0.5,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [
              2048, 2051, 2052, 2057, 2077, 2082, 2084, 2088, 2089, 2090, 2090,
@@ -120,10 +123,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart1"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart1'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart15.vue

@@ -10,90 +10,93 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "各类数据占比",
          text: '各类数据占比',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: "value",
          type: 'value',
          axisLabel: {
            color: "#fff",
            color: '#fff',
          },
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
            color: '#fff',
          },
          type: "category",
          data: ["勘察数据", "岩土数据", "测量数据", "合规数据", "管理数据"],
          type: 'category',
          data: ['勘察数据', '岩土数据', '测量数据', '合规数据', '管理数据'],
        },
        series: [
          {
            name: "存儲量",
            type: "bar",
            stack: "total",
            name: '存儲量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [122880, 40960, 153600, 5120, 28672],
          },

          {
            name: "总量",
            type: "bar",
            stack: "total",
            name: '总量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [351232, 351232, 351232, 351232, 351232],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart5"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart5'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart16.vue

@@ -10,32 +10,35 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "数据总量趋势",
          text: '数据总量趋势',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "cross",
            type: 'cross',
            label: {
              backgroundColor: "#FFFFFF",
              backgroundColor: '#FFFFFF',
            },
          },
        },
        legend: {
          data: ["增量", "总量"],
          data: ['增量', '总量'],
        },
        toolbox: {
          feature: {
@@ -43,25 +46,25 @@
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "category",
            type: 'category',
            boundaryGap: false,
            data: [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
          },
@@ -70,48 +73,48 @@
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "value",
            type: 'value',
            boundaryGap: false,
          },
        ],
        series: [
          {
            name: "增量",
            type: "line",
            stack: "Total",
            name: '增量',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#83bff6",
              color: '#83bff6',
              opacity: 0.5,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [5120, 3072, 2048, 7168, 3072, 4096, 2048, 3072, 500],
          },

          {
            name: "总量",
            type: "line",
            stack: "Total",
            name: '总量',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: "top",
              position: 'top',
            },
            areaStyle: {
              color: "#188df0",
              color: '#188df0',
              opacity: 0.5,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [
              27750, 28262, 28569, 28774, 29491, 29798, 30208, 30412, 30720,
@@ -119,10 +122,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart4"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart4'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart21.vue

@@ -10,71 +10,74 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "服务访问量",
          text: '服务访问量',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        // legend: {},
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          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',
            },
            formatter: function (params) {
              var newParamsName = ""; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -85,7 +88,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -94,7 +97,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -109,8 +112,8 @@
        },
        series: [
          {
            name: "各项目已完成工期",
            type: "bar",
            name: '各项目已完成工期',
            type: 'bar',
            barWidth: 20,
            data: [12000, 500, 1500, 400, 300, 700],
            showBackground: true,
@@ -120,12 +123,12 @@
                barBorderRadius: [0, 90, 90, 0],
                color: (params) => {
                  var colorList = [
                    ["#5774ce", "#7ed3f4"],
                    ["#5774ce", "#7ed3f4"],
                    ["#5774ce", "#7ed3f4"],
                    ["#5774ce", "#7ed3f4"],
                    ["#5774ce", "#7ed3f4"],
                    ["#5774ce", "#7ed3f4"],
                    ['#5774ce', '#7ed3f4'],
                    ['#5774ce', '#7ed3f4'],
                    ['#5774ce', '#7ed3f4'],
                    ['#5774ce', '#7ed3f4'],
                    ['#5774ce', '#7ed3f4'],
                    ['#5774ce', '#7ed3f4'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new this.$echarts.graphic.LinearGradient(
@@ -151,10 +154,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart21"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart21'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart22.vue

@@ -10,20 +10,23 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let dataAxis = [
        "勘察数据",
        "岩土数据",
        "测量数据",
        "合规数据",
        "管理数据",
        '勘察数据',
        '岩土数据',
        '测量数据',
        '合规数据',
        '管理数据',
      ];
      // prettier-ignore
      let data =  [1200,500,1000,200,200];
@@ -34,33 +37,33 @@
      }
      let option = {
        title: {
          text: "数据下载量",
          text: '数据下载量',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          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 newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 6; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -71,7 +74,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -80,7 +83,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -104,31 +107,31 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            type: 'inside',
          },
        ],
        series: [
          {
            type: "bar",
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#40FBCB" },
                { offset: 1, color: "#20B2AA" },
                { offset: 0, color: '#40FBCB' },
                { offset: 1, color: '#20B2AA' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "##7ed3f4" },
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '##7ed3f4' },
                ]),
              },
            },
@@ -137,11 +140,11 @@
        ],
      };
      const zoomSize = 6;
      let myChart = this.$echarts.init(document.getElementById("echart22"));
      myChart.on("click", function (params) {
      this.myChart = this.$echarts.init(document.getElementById('echart22'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
@@ -150,9 +153,9 @@
        });
      });

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart23.vue

@@ -8,21 +8,21 @@
export default {
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  //方法集合
  methods: {
    gaugeChart1() {
      var legendData = ["服务访问量", "数据下载量"]; //图例
      var legendData = ['服务访问量', '数据下载量']; //图例

      var indicator = [
        { name: "管道设计部", max: 3000 },
        { name: "站场设计部", max: 3000 },
        { name: "总图室", max: 3000 },
        { name: "勘察室", max: 3000 },
        { name: "土防室", max: 3000 },
        { name: "测量室", max: 3000 },
        { name: "项目部", max: 3000 },
        { name: '管道设计部', max: 3000 },
        { name: '站场设计部', max: 3000 },
        { name: '总图室', max: 3000 },
        { name: '勘察室', max: 3000 },
        { name: '土防室', max: 3000 },
        { name: '测量室', max: 3000 },
        { name: '项目部', max: 3000 },
      ];
      var dataArr = [
        {
@@ -31,11 +31,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4A99FF",
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: "#4A99FF",
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
@@ -43,7 +43,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -51,15 +51,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,
@@ -81,11 +81,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4BFFFC",
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: "#4BFFFC",
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
@@ -93,7 +93,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -101,15 +101,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,
@@ -126,14 +126,14 @@
          },
        },
      ];
      var colorArr = ["#4A99FF", "#4BFFFC"]; //颜色
      var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
      let option = {
        title: {
          // show: false,
          text: "部门使用数据",
          text: '部门使用数据',
          // x: "4%",
          textStyle: {
            color: "#fff",
            color: '#fff',
            // fontSize: "22",
          },
          // subtextStyle: {
@@ -148,8 +148,8 @@

        color: colorArr,
        legend: {
          orient: "vertical",
          icon: "circle", //图例形状
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 0,
          right: 0,
@@ -158,21 +158,21 @@
          itemGap: 21, // å›¾ä¾‹æ¯é¡¹ä¹‹é—´çš„间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 12,
            color: "#00E4FF",
            color: '#00E4FF',
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              color: '#fff',
              fontSize: 12,
            },
          },
          radius: 90,
          nameGap: 12, // å›¾ä¸­å·¥è‰ºç­‰å­—距离图的距离
          splitNumber: 4, // ç½‘格线的个数
          center: ["50%", "60%"], // å›¾çš„位置
          center: ['50%', '60%'], // å›¾çš„位置

          indicator: indicator,
          splitArea: {
@@ -180,25 +180,25 @@
            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,
@@ -206,15 +206,18 @@
        ],
      };

      let myChart = this.$echarts.init(document.getElementById("echart23"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart23'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },
  mounted() {
    this.gaugeChart1();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
};
</script>

 src/components/echart24.vue

@@ -10,27 +10,30 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "1-12月数据更新量",
          text: '1-12月数据更新量',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "cross",
            type: 'cross',
            label: {
              backgroundColor: "#FFFFFF",
              backgroundColor: '#FFFFFF',
            },
          },
        },
@@ -43,25 +46,25 @@
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "category",
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          },
@@ -70,39 +73,39 @@
          {
            axisLine: {
              lineStyle: {
                color: "#ccc",
                color: '#ccc',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
            type: "value",
            type: 'value',
            boundaryGap: false,
          },
        ],
        series: [
          {
            name: "增量",
            type: "line",
            stack: "Total",
            name: '增量',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: "#8F595A",
              color: '#8F595A',
              opacity: 0.5,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [200, 300, 100, 500, 2000, 500, 200, 400, 100, 100, 80, 300],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart24"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart24'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart25.vue

@@ -10,64 +10,67 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "用户增量和总量占比",
          text: '用户增量和总量占比',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "40%",
            type: 'text',
            left: 'center',
            top: '40%',
            style: {
              fill: "#fff",
              text: "总用户量",
              fill: '#fff',
              text: '总用户量',
            },
          },
          {
            type: "text",
            left: "center",
            top: "50%",
            type: 'text',
            left: 'center',
            top: '50%',
            z: 10,
            style: {
              fill: "#fff",
              fill: '#fff',

              text: "400",
              font: "30px Microsoft YaHei",
              text: '400',
              font: '30px Microsoft YaHei',
            },
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          // containLabel: true,
        },
        series: [
          {
            name: "用户量",
            type: "pie",
            radius: ["40%", "70%"],
            name: '用户量',
            type: 'pie',
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                length: 15, // æŒ‡ç¤ºçº¿å®½åº¦
                lineStyle: {
                  color: "#fff", // æŒ‡ç¤ºçº¿é¢œè‰²
                  color: '#fff', // æŒ‡ç¤ºçº¿é¢œè‰²
                },
              },
            },
@@ -76,33 +79,33 @@
                // å„分区的提示内容
                // params: å³ä¸‹é¢ä¼ å…¥çš„data数组,通过自定义函数，展示你想要的内容和格式
                formatter: function (params) {
                  return params.name + "\n\n" + params.percent + "%";
                  return params.name + '\n\n' + params.percent + '%';
                },
                textStyle: {
                  // æç¤ºæ–‡å­—的样式
                  color: "#fff",
                  color: '#fff',
                  fontSize: 14,
                },
              },
            },
            data: [
              { value: 280, name: "往年用户量" },
              { value: 120, name: "今年新增用户量" },
              { value: 280, name: '往年用户量' },
              { value: 120, name: '今年新增用户量' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart25"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart25'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart26.vue

@@ -10,15 +10,18 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let dataAxis = ["A2", "A3", "A4", "A5", "A6", "A7"];
      let dataAxis = ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'];
      // prettier-ignore
      let data =  [300,200,80,120,80,50];
      let yMax = 500;
@@ -28,33 +31,33 @@
      }
      let option = {
        title: {
          text: "各项目数据量",
          text: '各项目数据量',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          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 newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 6; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -65,7 +68,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -74,7 +77,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -98,32 +101,32 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            type: 'inside',
          },
        ],
        series: [
          {
            type: "bar",
            type: 'bar',
            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' },
                ]),
              },
            },
@@ -132,11 +135,11 @@
        ],
      };
      const zoomSize = 6;
      let myChart = this.$echarts.init(document.getElementById("echart26"));
      myChart.on("click", function (params) {
      this.myChart = this.$echarts.init(document.getElementById('echart26'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
@@ -145,9 +148,9 @@
        });
      });

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart31.vue

@@ -10,43 +10,46 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "项目类别",
          text: '项目类别',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "item",
          trigger: 'item',
        },
        legend: {
          top: "5%",
          right: "0",
          top: '5%',
          right: '0',
          textStyle: {
            fontSize: 12,
            color: "#fff",
            color: '#fff',
          },
        },
        series: [
          {
            name: "项目类别",
            type: "pie",
            radius: ["45%", "55%"],
            name: '项目类别',
            type: 'pie',
            radius: ['45%', '55%'],
            // avoidLabelOverlap: false,
            label: {
              formatter: "{b}：{c}",
              formatter: '{b}：{c}',
              textStyle: {
                fontSize: 12,
                color: "#fff",
                color: '#fff',
              },
            },

@@ -54,16 +57,16 @@
              //   show: false,
            },
            data: [
              { value: 2, name: "站场类" },
              { value: 5, name: "管道类" },
              { value: 2, name: '站场类' },
              { value: 5, name: '管道类' },
            ],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart31"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart31'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart32.vue

@@ -10,21 +10,24 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let dataAxis = [
        "中俄东线管道工程南段",
        "中俄东线管道工程中段",
        "广州站",
        "唐山LNG",
        "新疆连木沁站场",
        "中缅天然气管道风险排查航空摄影测量",
        '中俄东线管道工程南段',
        '中俄东线管道工程中段',
        '广州站',
        '唐山LNG',
        '新疆连木沁站场',
        '中缅天然气管道风险排查航空摄影测量',
      ];
      // prettier-ignore
      let data =  [2000, 1800, 800, 1000, 600, 700];
@@ -35,33 +38,33 @@
      }
      let option = {
        title: {
          text: "各项目预算",
          text: '各项目预算',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          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 newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -72,7 +75,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -81,7 +84,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -105,35 +108,35 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            type: 'inside',
          },
        ],
        series: [
          {
            type: "bar",
            type: 'bar',
            showBackground: true,
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [90, 90, 0, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#b8d746" },
                { offset: 0.5, color: "#8edc69" },
                { offset: 1, color: "#74c3c9" },
                { offset: 0, color: '#b8d746' },
                { offset: 0.5, color: '#8edc69' },
                { offset: 1, color: '#74c3c9' },
              ]),
            },

            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' },
                ]),
              },
            },
@@ -142,11 +145,11 @@
        ],
      };
      const zoomSize = 6;
      let myChart = this.$echarts.init(document.getElementById("echart32"));
      myChart.on("click", function (params) {
      this.myChart = this.$echarts.init(document.getElementById('echart32'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
@@ -155,9 +158,9 @@
        });
      });

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart33.vue

@@ -10,69 +10,72 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "项目耗时",
          text: '项目耗时',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        legend: {
          right: "0",
          right: '0',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          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",
          data: ["A2", "A3", "A4", "A5", "A6", "A7"],
          type: 'category',
          data: ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
          axisLine: {
            lineStyle: {
              color: "#ccc",
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
            formatter: function (params) {
              var newParamsName = ""; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 3; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -83,7 +86,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -92,7 +95,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -107,21 +110,21 @@
        },
        series: [
          {
            name: "预计工期（天）",
            type: "bar",
            name: '预计工期（天）',
            type: 'bar',
            data: [432, 432, 288, 252, 180, 180],
          },
          {
            name: "已完成工期（天）",
            type: "bar",
            name: '已完成工期（天）',
            type: 'bar',
            data: [200, 120, 200, 150, 90, 20],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart6"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart6'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart34.vue

@@ -10,49 +10,52 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "项目进度完成百分比",
          text: '项目进度完成百分比',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: "category",
          type: 'category',
          data: [
            "中俄东线管道工程南段",
            "中俄东线管道工程中段",
            "广州站",
            "唐山LNG",
            "新疆连木沁站场",
            "中缅天然气管道风险排查航空摄影测量",
            '中俄东线管道工程南段',
            '中俄东线管道工程中段',
            '广州站',
            '唐山LNG',
            '新疆连木沁站场',
            '中缅天然气管道风险排查航空摄影测量',
          ],
          axisLine: {
            lineStyle: {
              color: "#ccc",
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
            formatter: function (params) {
              var newParamsName = ""; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 3; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -63,7 +66,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -72,7 +75,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -86,35 +89,35 @@
          },
        },
        yAxis: {
          type: "value",
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#ccc",
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        series: [
          {
            data: [0.4, 0.2, 0.7, 0.65, 0.5, 0.1],
            type: "bar",
            type: 'bar',
            showBackground: true,
            barWidth: 20,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart34"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart34'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart35.vue

@@ -10,68 +10,71 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "人员构成",
          text: '人员构成',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        // legend: {},
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          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",
          data: ["专科", "本科", "硕士", "博士及以上", "其他"],
          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: [15, 120, 50, 40, 20],
            itemStyle: {
@@ -80,12 +83,12 @@
                barBorderRadius: [0, 10, 10, 0],
                color: (params) => {
                  var colorList = [
                    ["#00FCFF", "#008297"],
                    ["#0091FF", "#005EA4"],
                    ["#901698", "#F157EE"],
                    ["#40FBCB", "#009871"],
                    ["#FF515A", "#FFDD53"],
                    ["#6574E2", "#261164"],
                    ['#00FCFF', '#008297'],
                    ['#0091FF', '#005EA4'],
                    ['#901698', '#F157EE'],
                    ['#40FBCB', '#009871'],
                    ['#FF515A', '#FFDD53'],
                    ['#6574E2', '#261164'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new this.$echarts.graphic.LinearGradient(
@@ -111,10 +114,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart35"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart35'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart36.vue

@@ -10,23 +10,26 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "各项目人员分配",
          text: '各项目人员分配',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "item",
          trigger: 'item',
        },
        visualMap: {
          show: false,
@@ -38,49 +41,49 @@
        },
        series: [
          {
            name: "各项目人员分配",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            name: '各项目人员分配',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 80, name: "中俄东线管道工程南段" },
              { value: 70, name: "中俄东线管道工程中段" },
              { value: 15, name: "广州站" },
              { value: 30, name: "唐山LNG" },
              { value: 15, name: "新疆连木沁站场" },
              { value: 35, name: "中缅天然气管道风险排查航空摄影测量" },
              { value: 80, name: '中俄东线管道工程南段' },
              { value: 70, name: '中俄东线管道工程中段' },
              { value: 15, name: '广州站' },
              { value: 30, name: '唐山LNG' },
              { value: 15, name: '新疆连木沁站场' },
              { value: 35, name: '中缅天然气管道风险排查航空摄影测量' },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            roseType: 'radius',
            label: {
              color: "rgba(255, 255, 255, 0.8)",
              color: 'rgba(255, 255, 255, 0.8)',
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.8)",
                color: 'rgba(255, 255, 255, 0.8)',
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart36"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart36'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart41.vue

@@ -10,75 +10,78 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "项目服务分类",
          text: '项目服务分类',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        // legend: {},
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          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: [120, 45, 5, 15, 4, 12],
            itemStyle: {
@@ -87,12 +90,12 @@
                barBorderRadius: [0, 90, 90, 0],
                color: (params) => {
                  var colorList = [
                    ["#00FCFF", "#008297"],
                    ["#0091FF", "#005EA4"],
                    ["#901698", "#F157EE"],
                    ["#40FBCB", "#009871"],
                    ["#FF515A", "#FFDD53"],
                    ["#6574E2", "#261164"],
                    ['#00FCFF', '#008297'],
                    ['#0091FF', '#005EA4'],
                    ['#901698', '#F157EE'],
                    ['#40FBCB', '#009871'],
                    ['#FF515A', '#FFDD53'],
                    ['#6574E2', '#261164'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new this.$echarts.graphic.LinearGradient(
@@ -118,10 +121,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart41"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart41'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart42.vue

@@ -10,21 +10,24 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let dataAxis = [
        "中俄东线管道工程南段",
        "中俄东线管道工程中段",
        "广州站",
        "唐山LNG",
        "新疆连木沁站场",
        "中缅天然气管道风险排查航空摄影测量",
        '中俄东线管道工程南段',
        '中俄东线管道工程中段',
        '广州站',
        '唐山LNG',
        '新疆连木沁站场',
        '中缅天然气管道风险排查航空摄影测量',
      ];
      // prettier-ignore
      let data =  [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
@@ -35,33 +38,33 @@
      }
      let option = {
        title: {
          text: "项目完成进度",
          text: '项目完成进度',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          left: '0%',
          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 newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -72,7 +75,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -81,7 +84,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -105,32 +108,32 @@
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
            type: 'inside',
          },
        ],
        series: [
          {
            type: "bar",
            type: 'bar',
            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' },
                ]),
              },
            },
@@ -139,11 +142,11 @@
        ],
      };
      const zoomSize = 6;
      let myChart = this.$echarts.init(document.getElementById("echart42"));
      myChart.on("click", function (params) {
      this.myChart = this.$echarts.init(document.getElementById('echart42'));
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
@@ -152,9 +155,9 @@
        });
      });

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart43.vue

@@ -8,21 +8,21 @@
export default {
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  //方法集合
  methods: {
    gaugeChart1() {
      var legendData = ["人员", "变更后人员"]; //图例
      var legendData = ['人员', '变更后人员']; //图例

      var indicator = [
        { name: "中缅天然气管道风险排查航空摄影测量", max: 80 },
        { name: "唐山LNG", max: 80 },
        { name: "中俄东线管道工程南段", max: 160 },
        { name: '中缅天然气管道风险排查航空摄影测量', max: 80 },
        { name: '唐山LNG', max: 80 },
        { name: '中俄东线管道工程南段', max: 160 },

        { name: "中俄东线管道工程中段", max: 100 },
        { name: "新疆连木沁站场", max: 40 },
        { name: "广州站", max: 40 },
        { name: '中俄东线管道工程中段', max: 100 },
        { name: '新疆连木沁站场', max: 40 },
        { name: '广州站', max: 40 },
      ];
      var dataArr = [
        {
@@ -31,11 +31,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4A99FF",
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: "#4A99FF",
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
@@ -43,7 +43,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -51,15 +51,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,
@@ -81,11 +81,11 @@
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#4BFFFC",
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: "#4BFFFC",
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
@@ -93,7 +93,7 @@
            normal: {
              // å•é¡¹åŒºåŸŸå¡«å……样式
              color: {
                type: "linear",
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //å·¦
@@ -101,15 +101,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,
@@ -126,14 +126,14 @@
          },
        },
      ];
      var colorArr = ["#4A99FF", "#4BFFFC"]; //颜色
      var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
      let option = {
        title: {
          // show: false,
          text: "人员变动",
          text: '人员变动',
          // x: "4%",
          textStyle: {
            color: "#fff",
            color: '#fff',
            // fontSize: "22",
          },
          // subtextStyle: {
@@ -148,8 +148,8 @@

        color: colorArr,
        legend: {
          orient: "vertical",
          icon: "circle", //图例形状
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 0,
          right: 0,
@@ -158,14 +158,14 @@
          itemGap: 21, // å›¾ä¾‹æ¯é¡¹ä¹‹é—´çš„间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 12,
            color: "#00E4FF",
            color: '#00E4FF',
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              color: '#fff',
              fontSize: 12,
            },
          },
@@ -180,25 +180,25 @@
            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,
@@ -206,15 +206,18 @@
        ],
      };

      let myChart = this.$echarts.init(document.getElementById("echart43"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart43'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },
  mounted() {
    this.gaugeChart1();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
};
</script>

 src/components/echart44.vue

@@ -10,46 +10,49 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "各项目总体进度",
          text: '各项目总体进度',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "item",
          trigger: 'item',
        },
        // legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            name: "各项目总体进度",
            type: "pie",
            radius: ["40%", "70%"],
            roseType: "radius",
            color: ["#03effb", "#00bec4", "#3a82ab"],
            name: '各项目总体进度',
            type: 'pie',
            radius: ['40%', '70%'],
            roseType: 'radius',
            color: ['#03effb', '#00bec4', '#3a82ab'],
            avoidLabelOverlap: false,
            itemStyle: {
              fontColor: "fff",
              borderColor: "#fff",
              fontColor: 'fff',
              borderColor: '#fff',
            },
            label: {
              show: false,
              position: "center",
              position: 'center',
            },
            emphasis: {
              // label: {
@@ -61,17 +64,17 @@
              show: false,
            },
            data: [
              { value: 4, name: "已完成" },
              { value: 7, name: "进行中" },
              { value: 8, name: "未开始" },
              { value: 4, name: '已完成' },
              { value: 7, name: '进行中' },
              { value: 8, name: '未开始' },
            ],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart44"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart44'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart45.vue

@@ -10,106 +10,109 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "资金使用和预算对比",
          text: '资金使用和预算对比',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        legend: {
          data: ["剩余金额", "已使用金额", "预算金额"],
          data: ['剩余金额', '已使用金额', '预算金额'],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            type: 'category',
            axisTick: {
              show: false,
            },
            data: ["A2", "A3", "A4", "A5", "A6", "A7"],
            data: ['A2', 'A3', 'A4', 'A5', 'A6', 'A7'],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                color: '#fff',
              },
            },
          },
        ],
        series: [
          {
            name: "剩余",
            type: "bar",
            name: '剩余',
            type: 'bar',
            label: {
              show: true,
              position: "inside",
              position: 'inside',
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [1200, 1440, 240, 350, 300, 630],
          },
          {
            name: "预算金额（万元)",
            type: "bar",
            stack: "Total",
            name: '预算金额（万元)',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [2000, 1800, 800, 1000, 600, 700],
          },
          {
            name: "已使用金额（万元）",
            type: "bar",
            stack: "Total",
            name: '已使用金额（万元）',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: "left",
              position: 'left',
            },
            emphasis: {
              focus: "series",
              focus: 'series',
            },
            data: [-800, -360, -560, -650, -300, -70],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart45"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart45'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/echart46.vue

@@ -10,71 +10,74 @@
  components: {},
  data() {
    //这里存放数据
    return {};
    return { myChart };
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: "各项目完成工期",
          text: '各项目完成工期',
          textStyle: {
            color: "#fff",
            color: '#fff',
          },
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
          axisPointer: {
            type: "shadow",
            type: 'shadow',
          },
        },
        // legend: {},
        grid: {
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          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: [
            "中俄东线管道工程南段",
            "中俄东线管道工程中段",
            "广州站",
            "唐山LNG",
            "新疆连木沁站场",
            "中缅天然气管道风险排查航空摄影测量",
            '中俄东线管道工程南段',
            '中俄东线管道工程中段',
            '广州站',
            '唐山LNG',
            '新疆连木沁站场',
            '中缅天然气管道风险排查航空摄影测量',
          ],
          axisLine: {
            lineStyle: {
              color: "#ccc",
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              color: '#fff',
            },
            formatter: function (params) {
              var newParamsName = ""; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
@@ -85,7 +88,7 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
@@ -94,7 +97,7 @@
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + "\n";
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
@@ -109,8 +112,8 @@
        },
        series: [
          {
            name: "各项目已完成工期",
            type: "bar",
            name: '各项目已完成工期',
            type: 'bar',
            barWidth: 20,
            data: [200, 120, 200, 150, 90, 20],
            showBackground: true,
@@ -120,12 +123,12 @@
                barBorderRadius: [0, 90, 90, 0],
                color: (params) => {
                  var colorList = [
                    ["#40FBCB", "#009871"],
                    ["#40FBCB", "#009871"],
                    ["#40FBCB", "#009871"],
                    ["#40FBCB", "#009871"],
                    ["#40FBCB", "#009871"],
                    ["#40FBCB", "#009871"],
                    ['#40FBCB', '#009871'],
                    ['#40FBCB', '#009871'],
                    ['#40FBCB', '#009871'],
                    ['#40FBCB', '#009871'],
                    ['#40FBCB', '#009871'],
                    ['#40FBCB', '#009871'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                  return new this.$echarts.graphic.LinearGradient(
@@ -151,10 +154,10 @@
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("echart46"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      this.myChart = this.$echarts.init(document.getElementById('echart46'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
    },
  },

 src/components/mapviewTwo.vue

@@ -1,13 +1,13 @@
<template>
  <div class="map_box">
    <div class="header_box">
    <!-- <div class="header_box">
      <h3 v-for="(e, i) in title" :key="i">
        <span v-if="typeIndex == i + 1">{{ e }}</span>
      </h3>
      <div class="close">
        <i class="el-icon-circle-close" @click="close"></i>
      </div>
    </div>
    </div> -->
    <div id="map"></div>
    <div class="left">
      <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>

 src/components/mixin/baseVuex.js

ÎļþÒÑɾ³ý

 src/components/mixin/layerTree.js

ÎļþÒÑɾ³ý

 src/views/Archive/index.vue

@@ -8,18 +8,18 @@
      </div>
      <div class="top_right">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
          <!-- <el-form-item>
            <el-input
              v-model="formInline.user"
              suffix-icon="el-icon-search"
              :placeholder="$t('common.pleaseInput')"
            ></el-input>
          </el-form-item>
          <el-form-item>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-button icon="el-icon-search" class="primaries">{{
              $t('common.iquery')
            }}</el-button>
          </el-form-item>
          </el-form-item> -->
          <el-form-item>
            <el-button @click="getSpaceMapVisibale" class="primaries">{{
              $t('synthesis.rangequery')
@@ -28,7 +28,7 @@
        </el-form>
      </div>
    </div>

<!--
    <div class="box_item">
      <div class="box_left">资料类别</div>
      <div class="box_cont">
@@ -70,10 +70,10 @@
          <i class="el-icon-plus"></i> {{ $t('synthesis.Multiplechoice') }}
        </div>
      </div>
    </div>
    </div> -->
    <div  class="bottom_content">
      <div class="bottom_left">
        <div class="box_div">当前搜索关键词:</div>
        <!-- <div class="box_div">当前搜索关键词:</div> -->
        <div>
          <ul>
            <li>搜索类型</li>
@@ -160,7 +160,7 @@
            :data="tableData1"
            style="width: 100%"
            @selection-change="handleSelectionChange1"
            height="86%"
            height="100%"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" :label="$t('dataManage.vmobj.name')" />
@@ -1232,7 +1232,7 @@
    .bottom_right {
      width: calc(100% - 320px);
      padding: 0px 20px;
      max-height: 460px;
      max-height: 600px;
      overflow-y: auto;
      color: white;
      li {

 src/views/Synthesis/index.vue

@@ -252,7 +252,6 @@
      margin: 0;
      width: 300px;
      height: auto;

      transition: width 2s;
    }


 src/views/Thematic/index copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,645 @@
<template>
  <div class="themaic">
    <div class="headera-title">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <label class="th_title">{{ $t('themaic.name') }}</label>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('common.pleaseInput')"
              suffix-icon="el-icon-search"
              v-model="input3"
            />
          </el-form-item>
          <el-form-item>
            <div class="title_count" style="color: white">
              {{ $t('themaic.find') }}
              <label style="magin: 0% 15px">{{ listcount }}</label>
              {{ $t('themaic.record') }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="header_right">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item :label="$t('themaic.maptltle')">
            <el-select
              v-model="selvalue"
              class="m-2"
              placeholder="Select"
              style="width: 150px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="margin-right: 32px;">
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbytime') }}:</label
              >

              <i
                @click="changetime(1)"
                :class="{ active: timeindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changetime(2)"
                :class="{ active: timeindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
          <el-form-item>
            <div>
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbyviews') }}:</label
              >

              <i
                @click="changeChecked(1)"
                :class="{ active: checkindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changeChecked(2)"
                :class="{ active: checkindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="themaic_content">
      <div
        @click="showThematic(item)"
        v-for="(item, i) in middleList"
        class="midedle_div"
        :key="i"
      >
        <el-card class="middle_card">
          <table>
            <tr>
              <td>
                <div class="midddle_title">
                  <div class="t1">{{ item.name }}</div>
                  <div>
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div
                  class="middle_image"
                  :style="{
                    background: 'url(' + item.url + ') no-repeat center',
                    'background-size': '100% 100%',
                  }"
                ></div>
              </td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
        </el-col>
        <el-col :span="4" :offset="14">
          <el-input
            size="small"
            :placeholder="$t('common.pleaseInput')"
            suffix-icon="el-icon-search"
            v-model="input3"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="5">
          <label style="margin-right: 10px"
            >{{ $t('themaic.maptltle') }}:</label
          >
          <el-select
            v-model="selvalue"
            class="m-2"
            placeholder="Select"
            style="width: 150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbytime') }}:</label
            >

            <i
              @click="changetime(1)"
              :class="{ active: timeindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changetime(2)"
              :class="{ active: timeindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbyviews') }}:</label
            >

            <i
              @click="changeChecked(1)"
              :class="{ active: checkindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changeChecked(2)"
              :class="{ active: checkindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="10"> </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            {{ $t('themaic.find') }}
            <label style="magin: 0% 15px">{{ listcount }}</label>
            {{ $t('themaic.record') }}
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-card shadow="never" class="themic_middle_card">
        <div
          @click="showThematic(item)"
          v-for="(item, i) in middleList"
          class="midedle_div"
          :key="i"
        >
          <el-card class="middle_card">
            <!-- <div>



           </div>

            <table>
              <tr>
                <td>
                  <div class="t1">{{ item.name }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div
                    class="middle_image"
                    :style="{
                      background: 'url(' + item.url + ') no-repeat center',
                      'background-size': '100% 100%',
                    }"
                  ></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div style="position: absolute; bottom: 2%; right: 4%">
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-card>
      -->
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
      :append-to-body="true"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="99%"
      :before-close="handleClose"
    >
      <map-View
        v-if="dialogVisible"
        @close="close"
        :typeIndex="typeIndex"
      ></map-View>
    </el-dialog>
  </div>
</template>

<script>
import mapView from '@/components/mapviewTwo';
export default {
  components: {
    mapView,
  },
  data() {
    return {
      dialogVisible: false,
      input3: '',
      count: 0,
      listcount: 0,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
      selvalue: '全部',

      middleList: [
        {
          index: '1',
          name: '管道基础数据专题图',
          time: '2022-07-10',
          count: '28',
          url: require('../../assets/img/themic/a1.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj1.html',
        },
        {
          index: '2',
          name: '用户使用情况专题图',
          time: '2022-07-22',
          count: '6',
          url: require('../../assets/img/themic/a2.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj2.html',
        },
        {
          index: '3',
          name: '项目基本情况专题图',
          time: '2022-06-25',
          count: '23',
          url: require('../../assets/img/themic/a3.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj3.html',
        },
        {
          index: '4',
          name: '项目进度管理专题图',
          time: '2022-07-17',
          count: '15',
          url: require('../../assets/img/themic/a4.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj4.html',
        },
        {
          index: '5',
          name: '全球项目分布专题图',
          time: '2022-07-20',
          count: '7',
          url: require('../../assets/img/themic/a5.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '6',
          name: '全国管网分布专题图',
          time: '2022-07-26',
          count: '5',
          url: require('../../assets/img/themic/a6.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '7',
          name: '全国项目足迹专题图',
          time: '2022-06-30',
          count: '10',
          url: require('../../assets/img/themic/a7.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
      ],
      options: [
        {
          value: '全部',
          label: '全部',
        },
      ],
      typeIndex: '',
    };
  },
  mounted() {
    this.count = this.middleList.length;
    this.listcount = this.middleList.length;
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        // this.showMenuChange(permsEntity[i], permsEntity);
        console.log('专题图', permsEntity[i]);
      }
    }
  },
  methods: {
    close() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeChecked(res) {
      if (this.checkindex != res) {
        this.checkindex = res;
      }
    },
    changetime(res) {
      if (this.timeindex != res) {
        this.timeindex = res;
      }
    },
    showThematic(res) {
      this.typeIndex = res.index;

      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #303030;

  .headera-title {
    width: calc(100% - 2px);
    height: 70px;
    display: flex;
    justify-content: space-between;
    background: #353539;
    .th_title {
      width: 81px;
      height: 20px;
      font-size: 21px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #009cff;
      line-height: 49px;
      margin-left: 30px;
      bottom: 24px;
    }

    .title_count {
      height: 18px;
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #ffffff;
    }
    .header_right {
      float: right;
      margin-right: 30px;

      height: 100%;
      width: auto;
    }
    .active {
      color: #409eff;
    }
  }
  .themaic_content {
    width: calc(100% - 54px);
    height: 80%;
    display: flex;
    flex-flow: row wrap;

    justify-content: flex-start;
    padding: 17px 27px 0px 27px;

    .midedle_div {
      width: 456px;
      height: 303px;
      margin-right: 10px;
      .t1 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .middle_image {
        height: 220px;
        width: 415px;
      }
      .t2 {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .midddle_title {
        display: flex;
        justify-content: space-between;
      }
    }
    .themic_middle_card {
      border: transparent;
    }
    /deep/.el-card {
      background: #454545;
      border: 1px solid #454545;
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
  }
  /deep/.el-form-item__content {
    line-height: 70px;
  }
  /deep/ .el-input__inner {
    border: 1px solid white;
    color: white;
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;
  }
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid white !important;
  }
}

// .themaic .el-divider--horizontal {
//   margin: 10px 0 !important;
// }

// .themaic .th_title {
//   font-size: 22px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #3b4d6e;
// }

// .radiusSearch .el-input__wrapper {
//   border-radius: 50px;
// }

// .themaic .active {
//   color: #409eff;
// }

// .themaic .themic_middle_card {
//   border: transparent;

// }

// .themaic .themic_middle_card .el-card__body {
//   padding: 0px;
// }

// .themaic

// .themaic .midedle_div .middle_card {
//   width: 100%;
//   height: 100%;
// }

// .themaic .midedle_div .middle_card .el-card__body {
//   padding: 10px;
// }

// .themaic .midedle_div .t1 {
//   font-size: 16px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #000000;
// }

// .themaic .midedle_div .t2 {
//   font-size: 13px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: #3f3f3f;
//   margin-right: 10px;
// }

// .themaic .midedle_div .middle_image {
//   width: 94%;
//   /* margin-top: 10px; */
//   height: 73%;
//   position: absolute;
// }
</style>
<style>
.themaic_dialog .el-dialog {
  background: rgba(0, 0, 0, 0.8) !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  /* margin-top: 5px !important;
margin-top: 5px !important; */
}

.themaic_dialog .el-dialog__header {
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #fff;
}

.themaic_dialog .el-dialog__body {
  background: transparent !important;
  height: 98vh;
  padding: 0;
  margin: 0;
  font-size: 20px;
}
.el-card {
  background: #303030;
  border: 0px;
}
</style>

 src/views/Thematic/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
export const right_menu = [
  {
    id: '1',
    name: '项目展示',
  },
  {
    id: '2',
    name: '工程展示',
  },
  {
    id: '3',
    name: '工程巡视',
  },
];
export const right_list = [
  [
    { id: 'a13', name: '大屏视图', layer: [11, 12, 13, 14] },
    { id: 'a1', name: '全球管网图', layer: [11, 12], index: '1' },
    { id: 'a2', name: '全球项目足迹图', layer: [13, 14], index: '2' },
    { id: 'a3', name: '全国官网图', layer: [11, 13], index: '3' },
    { id: 'a4', name: '全国项目足迹图', layer: [12, 14], index: '4' },
    { id: 'a5', name: '管道基础数据统计和分析', layer: [11, 12, 13] },
    { id: 'a6', name: '全国项目柱状图', layer: [11, 12, 14] },
    { id: 'a7', name: '全球项目柱状图', layer: [12, 13, 14] },
    { id: 'a8', name: '全球项目饼图', layer: [11] },
    { id: 'a9', name: '全国项目饼图', layer: [12] },
    { id: 'a11', name: '全球项目晕渲图', layer: [13] },
    { id: 'a12', name: '全国项目晕渲图', layer: [14] },
  ],
  [
    { id: 'b1', name: '中俄东线管道工程中段' },
    { id: 'b2', name: '西气东输三线中段管道工程' },
    { id: 'b3', name: '西气东输三线中段管道工程' },
    { id: 'b4', name: '中缅天然气管道风险排查航空摄影测量' },
    { id: 'b5', name: '山东管网西干线项目' },
  ],
  [
    { id: 'c1', name: '西气东输一线' },
    { id: 'c2', name: '西气东输二线西段干' },
    { id: 'c3', name: '西气东输淮武支线' },
    { id: 'c4', name: '西部原油管道工程' },
  ],
];
export const image_layer = [
  {
    id: 1,
    label: 'LF',
    isEdit: false,
    children: [
      {
        id: 11,
        label: '管道中心线',
        resource: 'LF:m_pipeline',
        isEdit: false,
      },
      {
        id: 12,
        label: '战略通道',
        resource: 'LF:th_strategic_channel',
        isEdit: false,
      },
      {
        id: 13,
        label: '项目',
        resource: 'LF:bs_project',
        isEdit: false,
      },
      {
        id: 14,
        label: '站场',
        resource: 'LF:m_sitepoint',
        isEdit: false,
      },
    ],
  },
];

 src/views/Thematic/index.vue

@@ -1,415 +1,388 @@
<template>
  <div class="themaic">
    <div class="headera-title">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <label class="th_title">{{ $t('themaic.name') }}</label>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('common.pleaseInput')"
              suffix-icon="el-icon-search"
              v-model="input3"
            />
          </el-form-item>
          <el-form-item>
            <div class="title_count" style="color: white">
              {{ $t('themaic.find') }}
              <label style="magin: 0% 15px">{{ listcount }}</label>
              {{ $t('themaic.record') }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="header_right">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item :label="$t('themaic.maptltle')">
            <el-select
              v-model="selvalue"
              class="m-2"
              placeholder="Select"
              style="width: 150px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="margin-right: 32px;">
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbytime') }}:</label
              >

              <i
                @click="changetime(1)"
                :class="{ active: timeindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changetime(2)"
                :class="{ active: timeindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
          <el-form-item>
            <div>
              <label style="margin-right: 10px; color: white"
                >{{ $t('themaic.sortbyviews') }}:</label
              >

              <i
                @click="changeChecked(1)"
                :class="{ active: checkindex == 1 }"
                class="el-icon-caret-bottom"
              ></i>

              <i
                @click="changeChecked(2)"
                :class="{ active: checkindex == 2 }"
                class="el-icon-caret-top"
              ></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="themaic_content">
      <div
        @click="showThematic(item)"
        v-for="(item, i) in middleList"
        class="midedle_div"
        :key="i"
      >
        <el-card class="middle_card">
          <table>
            <tr>
              <td>
                <div class="midddle_title">
                  <div class="t1">{{ item.name }}</div>
                  <div>
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div
                  class="middle_image"
                  :style="{
                    background: 'url(' + item.url + ') no-repeat center',
                    'background-size': '100% 100%',
                  }"
                ></div>
              </td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </el-card>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <div class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
    <div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
      <div class="tree-container">
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :props="defaultProps"
          ref="tree"
          @check-change="handleCheckChange"
        >
        </el-pagination>
        </el-tree>
      </div>
    </div>
    <!-- <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
        </el-col>
        <el-col :span="4" :offset="14">
          <el-input
            size="small"
            :placeholder="$t('common.pleaseInput')"
            suffix-icon="el-icon-search"
            v-model="input3"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="5">
          <label style="margin-right: 10px"
            >{{ $t('themaic.maptltle') }}:</label
          >
          <el-select
            v-model="selvalue"
            class="m-2"
            placeholder="Select"
            style="width: 150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbytime') }}:</label
            >

            <i
              @click="changetime(1)"
              :class="{ active: timeindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changetime(2)"
              :class="{ active: timeindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbyviews') }}:</label
            >

            <i
              @click="changeChecked(1)"
              :class="{ active: checkindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changeChecked(2)"
              :class="{ active: checkindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="10"> </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            {{ $t('themaic.find') }}
            <label style="magin: 0% 15px">{{ listcount }}</label>
            {{ $t('themaic.record') }}
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-card shadow="never" class="themic_middle_card">
        <div
          @click="showThematic(item)"
          v-for="(item, i) in middleList"
          class="midedle_div"
          :key="i"
        >
          <el-card class="middle_card">
            <!-- <div>



           </div>

            <table>
              <tr>
                <td>
                  <div class="t1">{{ item.name }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div
                    class="middle_image"
                    :style="{
                      background: 'url(' + item.url + ') no-repeat center',
                      'background-size': '100% 100%',
                    }"
                  ></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div style="position: absolute; bottom: 2%; right: 4%">
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </td>
              </tr>
            </table>
          </el-card>
      <div class="changeBaseLayer">
        <div @click="changeMenulayer" class="CenDiv">
          <div
            id="cenBg"
            v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          ></div>
        </div>
      </el-card>
      -->
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
      :append-to-body="true"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="99%"
      :before-close="handleClose"
    >
      <map-View
        v-if="dialogVisible"
        @close="close"
        :typeIndex="typeIndex"
      ></map-View>
    </el-dialog>
      </div>
    </div>
    <div class="center_content">
      <div id="MapView" class="MapView">
        <div class="leftEchart" v-show="openEcharts">
          <echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
          <echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
          <echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
          <echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
          <echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
          <echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
          <echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
          <echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
          <echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
          <echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
          <echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
          <echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
        </div>
        <div class="rightEchart" v-show="openEcharts">
          >
          <echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
          <echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
          <echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
          <echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
          <echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
          <echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
          <echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
          <echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
          <echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
          <echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
          <echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
          <echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
        </div>
        <div class="left_content">
          <div v-show="leftMenuOpen" @click="showLeftMenu">
            <i style="color: white" class="el-icon-caret-left"></i>
          </div>
          <div v-show="!leftMenuOpen" @click="showLeftMenu">
            <i style="color: white" class="el-icon-caret-right"></i>
          </div>
        </div>
        <div class="right_content">
          <div v-show="!rightMenuOpen" @click="showRightMenu">
            <i style="color: white" class="el-icon-caret-left"></i>
          </div>
          <div v-show="rightMenuOpen" @click="showRightMenu">
            <i style="color: white" class="el-icon-caret-right"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
      <div class="content_right">
        <ul>
          <li
            @click="changeRightList(item)"
            v-for="item in rightList"
            :class="item.id == changeSelectli ? 'changeliStyle' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="bottom_right">
        <div
          v-for="item in rightMenu"
          class="right_item"
          :class="{ changeStyle: changeSelectStyle == item.id }"
          @click="changeRightMenu(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mapView from '@/components/mapviewTwo';
import mapsdk from '../../components/mapsdk.vue';
import { right_menu, right_list, image_layer } from './index.js';
import echart11 from '../../components/echart11.vue';
import echart12 from '../../components/echart12.vue';
import echart13 from '../../components/echart13.vue';
import echart14 from '../../components/echart14.vue';
import echart15 from '../../components/echart15.vue';
import echart16 from '../../components/echart16.vue';
import echart21 from '../../components/echart21.vue';
import echart22 from '../../components/echart22.vue';
import echart23 from '../../components/echart23.vue';
import echart24 from '../../components/echart24.vue';
import echart25 from '../../components/echart25.vue';
import echart26 from '../../components/echart26.vue';
import echart31 from '../../components/echart31.vue';
import echart32 from '../../components/echart32.vue';
import echart33 from '../../components/echart33.vue';
import echart34 from '../../components/echart34.vue';
import echart35 from '../../components/echart35.vue';
import echart36 from '../../components/echart36.vue';
import echart41 from '../../components/echart41.vue';
import echart42 from '../../components/echart42.vue';
import echart43 from '../../components/echart43.vue';
import echart44 from '../../components/echart44.vue';
import echart45 from '../../components/echart45.vue';
import echart46 from '../../components/echart46.vue';
import axios from 'axios';
export default {
  components: {
    mapView,
    mapsdk,
    echart11,
    echart12,
    echart13,
    echart14,
    echart15,
    echart16,
    echart21,
    echart22,
    echart23,
    echart24,
    echart25,
    echart26,
    echart31,
    echart32,
    echart33,
    echart34,
    echart35,
    echart36,
    echart41,
    echart43,
    echart42,
    echart44,
    echart45,
    echart46,
  },
  data() {
    return {
      dialogVisible: false,
      input3: '',
      count: 0,
      listcount: 0,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
      selvalue: '全部',

      middleList: [
        {
          index: '1',
          name: '管道基础数据专题图',
          time: '2022-07-10',
          count: '28',
          url: require('../../assets/img/themic/a1.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj1.html',
        },
        {
          index: '2',
          name: '用户使用情况专题图',
          time: '2022-07-22',
          count: '6',
          url: require('../../assets/img/themic/a2.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj2.html',
        },
        {
          index: '3',
          name: '项目基本情况专题图',
          time: '2022-06-25',
          count: '23',
          url: require('../../assets/img/themic/a3.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj3.html',
        },
        {
          index: '4',
          name: '项目进度管理专题图',
          time: '2022-07-17',
          count: '15',
          url: require('../../assets/img/themic/a4.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj4.html',
        },
        {
          index: '5',
          name: '全球项目分布专题图',
          time: '2022-07-20',
          count: '7',
          url: require('../../assets/img/themic/a5.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '6',
          name: '全国管网分布专题图',
          time: '2022-07-26',
          count: '5',
          url: require('../../assets/img/themic/a6.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '7',
          name: '全国项目足迹专题图',
          time: '2022-06-30',
          count: '10',
          url: require('../../assets/img/themic/a7.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
      ],
      options: [
        {
          value: '全部',
          label: '全部',
        },
      ],
      typeIndex: '',
      typeIndex: null,
      leftMenuOpen: false,
      rightMenuOpen: false,
      changeSelectStyle: null,
      changeSelectli: null,
      rightMenu: [],
      rightList: [],
      treeData: [],
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
      openEcharts: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  mounted() {
    this.count = this.middleList.length;
    this.listcount = this.middleList.length;
    this.treeData = image_layer;
    this.rightList = right_list[0];
    this.rightMenu = right_menu;
    this.changeSelectli = this.rightList[0].id;
    this.changeSelectStyle = this.rightMenu[0].id;
    this.initMapView();
    this.addImageLayer();
  },
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        // this.showMenuChange(permsEntity[i], permsEntity);
        console.log('专题图', permsEntity[i]);
      }
    }
  },
  created() {},
  methods: {
    close() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeChecked(res) {
      if (this.checkindex != res) {
        this.checkindex = res;
    changeRightList(res) {
      this.changeSelectli = res.id;
      if (res.layer != null) {
        var layer = res.layer;
        this.$refs.tree.setCheckedKeys(layer);
      }
    },
    changetime(res) {
      if (this.timeindex != res) {
        this.timeindex = res;
      if (res.index != null) {
        this.openEcharts = true;
        this.typeIndex = res.index;
      } else {
        this.openEcharts = false;
        this.typeIndex = null;
      }
    },
    showThematic(res) {
      this.typeIndex = res.index;
      var vid = res.id;

      this.dialogVisible = true;
      if (vid.indexOf('b') != -1) {
        var url = geoserverWFS + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            var point = res.data.features[0].geometry.coordinates;
            //定位
            MapViewer.camera.flyTo({
              //跳转视角
              destination: new Cesium.Cartesian3.fromDegrees(
                point[0],
                point[1],
                8000
              ),
            });
          }
        });
      } else if (vid.indexOf('a') != -1) {
        //定位
        MapViewer.camera.flyTo({
          //跳转视角
          destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
        });
      } else if (vid.indexOf('c') != -1) {
        var url = geoserverWFSLine + '%27' + res.name + '%27';
        axios.get(url).then((res) => {
          if (res.status == 200) {
            if (res.data.features.length == 0) return;
            var std = [];
            for (var i in res.data.features) {
              var featurLayer = res.data.features[i];
              var path = featurLayer.geometry.coordinates[0];
              for (var j in path) {
                std.push(path[j][0], path[j][1], 50);
              }
            }
            this.showPathLine(std);
          }
        });
      }
    },
    showPathLine(res) {
      sgworld.Creator.getFlyData(res, (data) => {
        data.showPoint = false;
        data.showLine = true;
        data.mode = 1;
        // å¼¹çª—数据
        window.PathAnimationData = {
          flyData: data,
        };
        window.PathAnimationData.winIndex = layer.open({
          type: 2,
          title: '路径动画',
          shade: false,
          area: ['352px', '690px'],
          offset: 'r',
          skin: 'other-class',
          content: SmartEarthRootUrl + 'Workers/path/Path.html',
          end: function () {
            PathAnimationData.fly && PathAnimationData.fly.exit();
          },
        });
      });
    },
    showLeftMenu() {
      this.leftMenuOpen = !this.leftMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    showRightMenu() {
      this.rightMenuOpen = !this.rightMenuOpen;
      var a = 0;
      var layer = setInterval(() => {
        a++;
        this.$bus.$emit('resizeEchart', true);
        if (a == 20) {
          clearInterval(layer);
          this.$bus.$emit('resizeEchart', true);
        }
      }, 100);
    },
    changeRightMenu(res) {
      this.rightList = right_list[parseInt(res.id) - 1];
      this.changeSelectStyle = res.id;
    },
    initMapView() {
      window.sgworld = new SmartEarth.SGWorld('MapView', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      window.MapViewer = window.sgworld._Viewer;

      //定位
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
      });

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );

      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );
      //显示fps
      MapViewer.scene.debugShowFramesPerSecond = false;
      //导航控件
      window.sgworld.navControl('nav', false);
      //比例尺
      window.sgworld.navControl('scale', false);
    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        MapViewer.imageryLayers.get(2).show = true;
        MapViewer.imageryLayers.get(1).show = false;
      } else {
        MapViewer.imageryLayers.get(2).show = false;
        MapViewer.imageryLayers.get(1).show = true;
      }
    },
    addImageLayer() {
      var val_layer = this.treeData[0].children;
      var std = [];
      for (var i = 0; i < val_layer.length; i++) {
        let layerWMS = new Cesium.WebMapServiceImageryProvider({
          url: geoServerURl,
          layers: val_layer[i].resource,
          parameters: {
            transparent: true,
            format: 'image/png',
          },
        });
        layerWMS.name = val_layer[i].label;
        window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
        std.push(val_layer[i].id);
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
        var val_id =
          window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == data.label) {
          const img_layer = window.MapViewer.imageryLayers._layers[i];
          img_layer.show = checked;
        }
      }
    },
  },
};
@@ -419,227 +392,188 @@
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #303030;

  .headera-title {
    width: calc(100% - 2px);
    height: 70px;
    display: flex;
    justify-content: space-between;
    background: #353539;
    .th_title {
      width: 81px;
      height: 20px;
      font-size: 21px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #009cff;
      line-height: 49px;
      margin-left: 30px;
      bottom: 24px;
  position: relative;
  display: flex;
  overflow: hidden;
  .left_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: #133a5f;
    .tree-container {
      margin: 10px;
    }

    .title_count {
      height: 18px;
      font-size: 19px;
      font-family: Source Han Sans CN;
      font-weight: 200;
      color: #ffffff;
    }
    .header_right {
      float: right;
      margin-right: 30px;

      height: 100%;
      width: auto;
    }
    .active {
      color: #409eff;
    .changeBaseLayer {
      width: 100%;
      height: 80px;
      margin-top: calc(190% - 10px);
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      .CenDiv {
        height: 40px;
        width: 60px;
        margin: 2%;
        border-radius: 5px;
      }
      .CenDiv:hover {
        border: 1px solid #409eff;
      }
      .active {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
      .menuLayer {
        height: 40px;
        width: 60px;
        background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
        position: absolute;
        background-size: 100% 100%;
        border-radius: 5px;
      }
    }
  }
  .themaic_content {
    width: calc(100% - 54px);
    height: 80%;
    display: flex;
    flex-flow: row wrap;

    justify-content: flex-start;
    padding: 17px 27px 0px 27px;

    .midedle_div {
      width: 456px;
      height: 303px;
      margin-right: 10px;
      .t1 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .middle_image {
        height: 220px;
        width: 415px;
      }
      .t2 {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
      }
      .midddle_title {
  .center_content {
    flex: 1;
    height: 100%;
    .MapView {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      float: left;
      position: relative;
      .leftEchart {
        z-index: 60;
        position: absolute;
        height: 100%;
        width: 20%;
        margin-left: 1.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .themic_middle_card {
      border: transparent;
    }
    /deep/.el-card {
      background: #454545;
      border: 1px solid #454545;
      .rightEchart {
        z-index: 60;
        position: absolute;
        height: 100%;
        width: 20%;
        right: 0;
        opacity: 0.5;
        margin-right: 1.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .right_content {
        width: 10px;
        height: 100%;
        z-index: 60;
        display: flex;
        align-items: center;
        right: 0;
        position: absolute;
        padding: 0px 5px;
      }
      .left_content {
        width: 10px;
        height: 100%;
        z-index: 60;
        left: 0;
        position: absolute;
        display: flex;
        align-items: center;
        padding: 0px 5px;
      }
    }
  }
  .pagination_box {
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
  .item_menu {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .left_main_show {
    width: 0;
  }
  .right_menu {
    margin: 0;
    width: 300px;
    height: 100%;
    transition: width 2s;
    background: #133a5f;

    .content_right {
      width: calc(100% -20px);
      height: 95%;
      li {
        border-bottom: 1px solid white;
        padding: 10px 10px;
        color: white;
      }
      li:hover {
        color: #409eff;
      }
      .changeliStyle {
        color: #409eff;
      }
    }
    /deep/.el-pagination__total {
      color: white;

    .bottom_right {
      width: 100%;
      height: 5%;
      display: flex;
      position: relative;
      .right_item {
        align-items: center;
        display: flex;
        height: calc(100% - 2px);
        flex-grow: 1;
        justify-content: center;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: white;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
        border-left: 1px solid white;
      }
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    .changeStyle {
      background: #409eff;
    }
  }
  /deep/.el-form-item__content {
    line-height: 70px;

  .right_main_show {
    width: 0;
  }
  /deep/ .el-input__inner {
    border: 1px solid white;
    color: white;
  .echart1 {
    width: 88%;
    height: 27%;
    border: 3px solid rgba(204, 204, 204, 0.76);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
  }
  /deep/.el-form-item__label {
    color: white;
    line-height: 70px;

  /deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // ä¸å¯å…¨é€‰æ ·å¼
    .el-tree-node {
      .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
      }
      .el-checkbox .el-checkbox__inner {
        display: none;
      }
    }
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 32px;
  }
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid white !important;
  }
}

// .themaic .el-divider--horizontal {
//   margin: 10px 0 !important;
// }

// .themaic .th_title {
//   font-size: 22px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #3b4d6e;
// }

// .radiusSearch .el-input__wrapper {
//   border-radius: 50px;
// }

// .themaic .active {
//   color: #409eff;
// }

// .themaic .themic_middle_card {
//   border: transparent;

// }

// .themaic .themic_middle_card .el-card__body {
//   padding: 0px;
// }

// .themaic

// .themaic .midedle_div .middle_card {
//   width: 100%;
//   height: 100%;
// }

// .themaic .midedle_div .middle_card .el-card__body {
//   padding: 10px;
// }

// .themaic .midedle_div .t1 {
//   font-size: 16px;
//   font-family: Microsoft YaHei;
//   font-weight: bold;
//   color: #000000;
// }

// .themaic .midedle_div .t2 {
//   font-size: 13px;
//   font-family: Microsoft YaHei;
//   font-weight: 400;
//   color: #3f3f3f;
//   margin-right: 10px;
// }

// .themaic .midedle_div .middle_image {
//   width: 94%;
//   /* margin-top: 10px; */
//   height: 73%;
//   position: absolute;
// }
</style>
<style>
.themaic_dialog .el-dialog {
  background: rgba(0, 0, 0, 0.8) !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  /* margin-top: 5px !important;
margin-top: 5px !important; */
}

.themaic_dialog .el-dialog__header {
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #fff;
}

.themaic_dialog .el-dialog__body {
  background: transparent !important;
  height: 98vh;
  padding: 0;
  margin: 0;
  font-size: 20px;
}
.el-card {
  background: #303030;
  border: 0px;
}
</style>

 src/views/Tools/LayerTree.vue

@@ -20,6 +20,8 @@
      @node-drop="handleDrop"
      @node-contextmenu="rightClick"
      :filter-node-method="filterNode"
      @check-change="handleCheckChange"
      :default-checked-keys="handleTreeCheck"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
@@ -106,32 +108,46 @@
      appendNodetitle: '',
      maxexpandId: 4,
      rightClickMenuStyle: {},
      handleTreeCheck: [],
      dialogVisible: false,
      addFormServer: {},
      layerId: [
        'm_pipeline',
        'th_strategic_channel',
        'bs_project',
        'm_sitepoint',
      ],
      treeData: [
        {
          id: 1,
          label: '影像',
          label: 'LF',
          isEdit: false,
          children: [],
        },
        {
          id: 2,
          label: '地形',
          isEdit: false,
          children: [],
        },
        {
          id: 3,
          label: '模型',
          isEdit: false,
          children: [],
        },
        {
          id: 4,
          label: '矢量',
          isEdit: false,
          children: [],
          children: [
            {
              id: 11,
              label: '管道中心线',
              resource: 'LF:m_pipeline',
              isEdit: false,
            },
            {
              id: 12,
              label: '战略通道',
              resource: 'LF:th_strategic_channel',
              isEdit: false,
            },
            {
              id: 13,
              label: '项目',
              resource: 'LF:bs_project',
              isEdit: false,
            },
            {
              id: 14,
              label: '站场',
              resource: 'LF:m_sitepoint',
              isEdit: false,
            },
          ],
        },
      ],
      defaultProps: {
@@ -190,6 +206,15 @@
    // é¼ æ ‡å·¦å‡»äº‹ä»¶
    handleLeftclick(data, node) {
      this.foo();
      if (node.checked == true) {
        for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
          var val_id =
            window.Viewer.imageryLayers._layers[i].imageryProvider.name;
          if (val_id == data.label) {
            const img_layer = window.Viewer.imageryLayers._layers[i];
          }
        }
      }
    },
    //  å–消鼠标监听事件 èœå•æ 
    foo() {
@@ -223,7 +248,6 @@
      this.addFormServer = {};
    },
    setAddServer() {
      debugger;
      var data = this.addFormServer;
      data.id = Math.ceil(Math.random() * 100);
      this.$refs.tree.append(data, this.currentNode);
@@ -270,13 +294,59 @@
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return;
      var std = [];
      if (checked == true) {
        for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
          var val_id =
            window.Viewer.imageryLayers._layers[i].imageryProvider.name;
          if (val_id == data.label) {
            std.push(data.label);
          }
        }
        if (std.length == 0) {
          let layerWMS = new Cesium.WebMapServiceImageryProvider({
            url: geoServerURl,
            layers: data.resource,
            parameters: {
              transparent: true,
              format: 'image/png',
            },
          });
          layerWMS.name = data.label;
          window.Viewer.imageryLayers.addImageryProvider(layerWMS);
        }
      } else {
        for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
          var val_id =
            window.Viewer.imageryLayers._layers[i].imageryProvider.name;
          if (val_id == data.label) {
            const img_layer = window.Viewer.imageryLayers._layers[i];
            window.Viewer.imageryLayers.remove(img_layer);
          }
        }
      }
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {},
  mounted() {
    var std = [];
    var val = this.treeData[0].children;
    for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
      var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
      for (var j = 0; j < val.length; j++) {
        if (val_id == val[j].label) {
          std.push(val[j].id);
        }
      }
    }
    this.$refs.tree.setCheckedKeys(std);
  },
};
</script>
<style scoped lang="less">

 src/views/Tools/baseVuex.js

@@ -1,26 +1,18 @@
import {
  mapState,
  mapMutations
} from 'vuex'
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState('layerTree', [
      'treeData',
    ]),
    ...mapState('user', [
      'user',
    ]),
    // ...mapState('layerTree', [
    //   'treeData',
    // ]),
    ...mapState('user', ['user']),
    ...mapState('mapTools', [
      'hideTools',
      'hidePositionBtn',
      'statusbar',
      'navBar',
      'scaleBarStatus'
      'scaleBarStatus',
    ]),
    ...mapState('mapStatus', [
      'viewCenter',
      'mapStatus',
    ])
    ...mapState('mapStatus', ['viewCenter', 'mapStatus']),
  },
  methods: {
    ...mapMutations('layerTree', [
@@ -28,19 +20,14 @@
      'addTreeChildren',
      'updataTreeNode',
      'checkTreeNode',
      'removeTreeNode'
      'removeTreeNode',
    ]),
    ...mapMutations('user', [
      'changeUserData',
    ]),
    ...mapMutations('user', ['changeUserData']),
    ...mapMutations('mapTools', [
      'changeScaleBarVisible',
      'changeNavBarVisible',
      'changeMapToolsVisible',
    ]),
    ...mapMutations('mapStatus', [
      'setView',
      'changeMapStatus',
    ])
  }
}
    ...mapMutations('mapStatus', ['setView', 'changeMapStatus']),
  },
};

 src/views/datamanage/SpatialData.vue

@@ -48,7 +48,7 @@
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
        <div style="height: 85%">
        <div style="height=500px">
          <el-table
            ref="filterTable"
            :data="tableData"
@@ -393,6 +393,9 @@
      if (data.children != null) return;
      this.listData.name = data.entity; //要查询表格类型；
      this.getClickTable = data;
      this.listData.pageIndex =1;
      this.listData.pageSize=10;
      this.count = 0;
      this.filedsLayer = this.getCollapseDomFiled(); //获取每个表字段名称及阈值

      //获取table信息
@@ -515,13 +518,13 @@
    },
    //分页点击事件
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.listdata.pageIndex = 1;
      this.listData.pageSize = val;
      this.listData.pageIndex = 1;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.listData.pageIndex = val;
      //获取table信息
      this.getCollapseTable(this.filedsLayer);
    },

 src/views/exportMap/index.vue

@@ -266,11 +266,6 @@
          id: 1,
          label: '图层',
          children: [
            {
              label: '阀室',
              value: '阀室',
              resource: 'http://192.168.20.39:9055/gisserver/wmsserver/lfgd',
            },
            { label: '站场', value: '站场' },
            { label: '管道中心线', value: '管道中心线' },
          ],