管网一张图对接接口数据

TreeWish

2023-02-23 5aec569c9d67c86819010171bc527afede505fe5

管网一张图对接接口数据

 package.json

@@ -9,6 +9,7 @@
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "@terraformer/wkt": "^2.1.2",
    "@turf/turf": "^6.5.0",
    "animate.css": "^4.1.1",

 src/assets/img/Screen/asideTitleBg.png

 src/assets/img/Screen/contentBg.png

 src/assets/img/Screen/cunchu.png

 src/assets/img/Screen/leftBar.png

 src/assets/img/Screen/numBg.png

 src/assets/img/Screen/projectBg.png

 src/assets/img/Screen/rightBar.png

 src/components/Screen/left.vue

@@ -4,9 +4,19 @@
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-show="ChartDisplay">
      <div class="current1" id="leftCurrent1"></div>
      <div class="current1" id="leftCurrent2"></div>
      <div class="current1" id="leftCurrent3"></div>
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">服务类别</div>

        <service-type></service-type>
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <div class="leftContainer" v-show="ProjectreeDisplay">
      <project-tree></project-tree>
@@ -14,10 +24,16 @@
  </div>
</template>
<script>
import ProjectTree from './ProjectTree.vue'
import ProjectTree from "./ProjectTree.vue"
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
export default {
  components: {
    ProjectTree
    ProjectTree,
    countDataApply,
    ServiceType,
    DataStorage,
  },
  data() {
    return {
@@ -28,8 +44,8 @@
    }
  },
  mounted() {
    this.OpenLeftInit();
    this.OpenLeftInitChart();
    this.OpenLeftInit()
    // this.OpenLeftInitChart();
  },
  methods: {
    ChangeLeft() {
@@ -39,7 +55,7 @@
        } else {
          this.leftImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.ChartDisplay = !this.ChartDisplay;
        this.ChartDisplay = !this.ChartDisplay
      }

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


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

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

      //左二图
      let dataAxis = [
        '中俄东线管道工程南段',
        '中俄东线管道工程中段',
        '广州站',
        '唐山LNG',
        '新疆连木沁站场',
        '中缅天然气管道风险排查航空摄影测量',
      ];
      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
      let yMax = 500;
      let dataShadow = [];
        "中俄东线管道工程南段",
        "中俄东线管道工程中段",
        "广州站",
        "唐山LNG",
        "新疆连木沁站场",
        "中缅天然气管道风险排查航空摄影测量",
      ]
      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]
      let yMax = 500
      let dataShadow = []
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
        dataShadow.push(yMax)
      }
      let option2 = {
        title: {
          text: '项目完成度',
          text: "项目完成度",
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
            color: "#fff",
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        grid: {
          left: '3%',
          right: '0%',
          bottom: '0%',
          left: "3%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          type: "category",
          data: dataAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              color: "#fff",
            },
            formatter: function (params) {
              var newParamsName = ''; // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length; // å®žé™…标签的个数
              var provideNumber = 4; // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // æ¢è¡Œçš„话，需要显示几行，向上取整
              var newParamsName = "" // æœ€ç»ˆæ‹¼æŽ¥æˆçš„字符串
              var paramsNameNumber = params.length // å®žé™…标签的个数
              var provideNumber = 4 // æ¯è¡Œèƒ½æ˜¾ç¤ºçš„字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // æ¢è¡Œçš„话，需要显示几行，向上取整
              /**
               * åˆ¤æ–­æ ‡ç­¾çš„个数是否大于规定的个数， å¦‚果大于，则进行换行处理 å¦‚果不大于，即等于或小于，就返回原标签
               */
@@ -236,25 +250,25 @@
              if (paramsNameNumber > provideNumber) {
                /** å¾ªçŽ¯æ¯ä¸€è¡Œ,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''; // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber; // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber; // ç»“束截取的位置
                  var tempStr = "" // è¡¨ç¤ºæ¯ä¸€æ¬¡æˆªå–的字符串
                  var start = p * provideNumber // å¼€å§‹æˆªå–的位置
                  var end = start + provideNumber // ç»“束截取的位置
                  // æ­¤å¤„特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // æœ€åŽä¸€æ¬¡ä¸æ¢è¡Œ
                    tempStr = params.substring(start, paramsNameNumber);
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // æ¯ä¸€æ¬¡æ‹¼æŽ¥å­—符串并换行
                    tempStr = params.substring(start, end) + '\n';
                    tempStr = params.substring(start, end) + "\n"
                  }
                  newParamsName += tempStr; // æœ€ç»ˆæ‹¼æˆçš„字符串
                  newParamsName += tempStr // æœ€ç»ˆæ‹¼æˆçš„字符串
                }
              } else {
                // å°†æ—§æ ‡ç­¾çš„值赋给新标签
                newParamsName = params;
                newParamsName = params
              }
              //将最终的字符串返回
              return newParamsName;
              return newParamsName
            },
          },
        },
@@ -264,7 +278,7 @@
          },

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

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

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

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

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

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

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






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

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

    display: flex;
    flex-direction: column;
@@ -549,6 +555,14 @@
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    .content {
      width: 100%;
      background: url(../../assets/img/Screen/contentBg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      
    }
  }
}

 src/components/Screen/mapsdk.vue

@@ -127,7 +127,7 @@
}
</script>

<style scoped lang="scss">
<style scoped lang="less">
.ParentCentermapdiv {
  display: fixed;
  height: 100%;

 src/components/Screen/right.vue

@@ -2,17 +2,22 @@
  <div class="current">
    <div class="rightContainer" v-show="ChartDisplay">
      <div class="current1">
        <div class="aside-title">目录分布</div>
        <echart11></echart11>
        <div class="aside-title">工程种类</div>
        <project-category></project-category>
      </div>
      <div class="current1">
      <!-- <div class="current1">
        <div class="aside-title">数据及服务提交</div>
        <echart12></echart12>
      </div>
      <div class="current1">
        <div class="aside-title">各类数据存储分布</div>
        <!-- <echart13></echart13> -->
        <chart></chart>
      </div> -->
      <div class="" >
        <div class="aside-title">文件格式</div>
        <div class="content" style="height: 542px">
          <div class="header">
            <div>格式</div>
            <div>数量</div>
          </div>
          <file-format></file-format>
        </div>
      </div>
    </div>
    <div class="rightarrow">
@@ -24,14 +29,16 @@
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
import chart from "@/components/chart/index.vue"
import FileFormat from "@/components/chart/FileFormat.vue"
import ProjectCategory from "../chart/ProjectCategory.vue"

export default {
  components: {
    echart11,
    echart12,
    echart13,
    chart
    FileFormat,
    ProjectCategory
  },
  data() {
    return {
@@ -52,7 +59,7 @@
  },
}
</script>
<style lang="scss">
<style lang="less">
.current {
  height: 100%;
  width: 100%;
@@ -74,7 +81,7 @@
  }
  .rightContainer {
    height: 100%;
    width: calc(100% - 36px);
    width: calc(100% - 7px);

    display: flex;
    flex-direction: column;
@@ -89,4 +96,19 @@
    }
  }
}
.content {
  width: 377px;
  background: url(../../assets/img/Screen/contentBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .header {
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 13px;
  }
}
</style>

 src/components/Screen/top.vue

@@ -62,7 +62,7 @@
  },
}
</script>
<style lang="scss">
<style lang="less">
.top {
  height: 100%;
  width: 100%;

 src/components/chart/CountDataApply.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
  <div class="CountDataApply" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countDataApply } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    // const option = this.initData()
    this.initChart()
  },
  methods: {
    async initChart() {
      const res = await countDataApply()
      if (res.code == 200) {
      }
      let xAxis = []
      let yAxis = []

      res.result.forEach(item => {
        xAxis.push(item.name)
        yAxis.push(item.number)
      })
 
      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
      //   return {
      //     name: item.name,
      //     value: item.number,
      //   }
      // })

      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}",
          axisPointer: {
            // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘有效
            type: "shadow", // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          },
        },
        xAxis: {
          data: xAxis,
          //坐标轴
          axisLine: {
            lineStyle: {
              color: "#3eb2e8",
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: "#4784e8",
            },
          },
        },
        series: [
          {
            name: "a",
            tooltip: {
              show: false,
            },
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#0B4EC3", // 0% å¤„的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#138CEB", // 60% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "#17AAFE", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: xAxis,
            barGap: 0,
          },
          {
            type: "bar",
            barWidth: 8,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#09337C", // 0% å¤„的颜色
                    },
                    {
                      offset: 0.6,
                      color: "#0761C0", // 60% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "#0575DE", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
              },
            },
            barGap: 0,
            data: yAxis,
          },
          {
            name: "b",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: 1,
              borderColor: "#0571D5",
              color: "#1779E0",
            },
            symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
            symbolSize: ["30", "12"],
            symbolOffset: ["0", "-11"],
            //symbolRotate: -5,
            symbolPosition: "end",
            data: xAxis,
            z: 3,
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.CountDataApply {
  width: 100%;
  height: 100%;
}
</style>

 src/components/chart/DataStorage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,216 @@
<template>
  <div class="data-storage">
    <div class="data-storage__header">
      <div class="text">
        <img
          class="img"
          src="@/assets/img/Screen/cunchu.png"
          alt=""
          srcset=""
        />
        <div class="title">共存储文件数量</div>
      </div>
      <div class="num">
        <dv-digital-flop :config="config1" style="width: 70px; height: 20px" />
        <!-- <div class="value">5</div> -->
      </div>
    </div>
    <div class="data-storage__content">
      <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
      <el-scrollbar class="scrollbar">
        <el-table
          :data="tableData"
          :row-style="{ background: 'rgba(135,180,248,0.10)' }"
          :cell-style="{ background: 'rgba(135,180,248,0.10)' }"
          :header-row-style="{
            background: 'rgba(57,128,236,0.29)',
            color: '#fff',
          }"
          :header-cell-style="{
            background: 'rgba(57,128,236,0.29)',
            color: '#fff',
          }"
        >
          <el-table-column prop="index" label="编号" width="50">
            <template slot-scope="scope">
              <div
                style="
                  background: rgba(180, 188, 235, 0.25);
                  text-align: center;
                "
              >
                {{ scope.row.index }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="文件数" width="70">
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { countDataStorage } from "@/api/screen.js"
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 å¼„",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 å¼„",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 å¼„",
        },
      ],
      config: {
        header: ["编号", "名称", "文件数"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
        columnWidth: [40, 300, 50],
        align: ["center"],
        carousel: "page",
      },
      config1: {
        number: [0],
        content: "{nt}个",
        style: {
          fontSize: 12,
          fill: "#00baff",
        },
      },
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    async initTable() {
      const res = await countDataStorage()
      if (res.code == 200) {
        let count = 0
        this.tableData = res.result.map((item, i) => {
          count += item.文件数
          return {
            index: i + 1,
            name: item.名称,
            num: item.文件数,
          }
        })
        console.log(count)
        this.config1.number = [count]
        this.config1 = {
          ...this.config1,
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.data-storage {
  margin: 10px;
  width: 377px;
  &__header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    width: 340px;
    box-sizing: border-box;
    .text {
      display: flex;
      align-items: center;
    }
    .title {
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      color: #ffffff;
    }
    .img {
      margin-right: 4px;

      width: 16px;
      height: 16px;
    }
    .value {
      text-align: center;
      color: #ffffff;
      width: 16px;
      height: 20px;
      background: url("~@/assets/img/Screen/numBg.png");
      background-size: 100% 100%;
    }
  }
  &__content {
    width: 95%;
    height: 220px;
  }
}
</style>

<style lang="scss">
.index-wrap {
  margin: 0 auto;
  width: 14px;
  height: 14px;
  background: rgba(180, 188, 235, 0.25);
}
.scrollbar {
  width: 100%;
  overflow-x: hidden;
  height: 200px;
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-table {
    height: 100%;
    width: 100%;
    background-color: transparent;
    color: #fff;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  .el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    border: none;
  }
  .el-table::before {
    height: 0;
  }
}
</style>

 src/components/chart/FileFormat.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
  <div class="file-format" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countFileFormat } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      let data = [
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 23,
        },
        {
          name: "user4",
          value: 44,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
        {
          name: "user3",
          value: 53,
        },
        {
          name: "user4",
          value: 24,
        },
        {
          name: "user1",
          value: 10,
        },
        {
          name: "user2",
          value: 20,
        },
      ]
      const res = await countFileFormat()
      if (res.code == 200) {
        data = res.result.map(item => {
          return {
            name: item.type,
            value: item.count,
          }
        })
      }
      data.sort((a, b) => b.value - a.value)
      data = data.slice(0, 10)
      let getArrByKey = (data, k) => {
        let key = k || "value"
        let res = []
        if (data) {
          data.forEach(function (t) {
            res.push(t[key])
          })
        }
        return res
      }
      let getSymbolData = data => {
        let arr = []
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: "end",
          })
        }
        return arr
      }
      let opt = {
        index: 0,
      }
      let color = ["#A71A2B"]
      data = data.sort((a, b) => {
        return b.value - a.value
      })
      let option = {
        backgroundColor: "transparent",
        grid: {
          top: "2%",
          bottom: "2%",
          right: "5%",
          left: "10%",
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: 0,
              color: "#fff",
              align: "left",
              margin: 0,
              fontSize: 13,
              formatter: function (value, index) {
                return "{title|" + value + "}"
              },
              rich: {
                title: {
                  width: 165,
                },
              },
            },
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, "name"),
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              shadowOffsetX: "-20px",
              color: "#fff",
              align: "right",
              verticalAlign: "bottom",
              lineHeight: 20,
              fontSize: 13,
              formatter: function (value, index) {
                return data[index].value
              },
            },
          },
        ],
        series: [
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
            symbolSize: [35, 35],
            symbolOffset: [20, 0],
            z: 5,
            data: getSymbolData(data),
          },
          {
            name: "条",
            type: "bar",
            showBackground: true,
            barBorderRadius: 10,
            yAxisIndex: 0,
            data: data,
            barWidth: 8,
            // align: left,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#5A9DFF",
                    },
                    {
                      offset: 0.7,
                      color: "#1878FF",
                    },
                    {
                      offset: 1,
                      color: "#164182",
                    },
                  ],
                  false
                ),
                barBorderRadius: 5,
              },
              // color: '#A71A2B',
              barBorderRadius: 2,
            },
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: ["0px", "-25px"],
                textStyle: {
                  fontSize: 14,
                },
                formatter: function (a, b) {
                  return a.name
                },
              },
            },
          },
        ],
      }

      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.file-format {
  width: 100%;
  height: 100%;
}
</style>

 src/components/chart/ProjectCategory.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,136 @@
<template>
  <div class="project-category">
    <div class="content">

        <div
          :class="i % 2 ? 'rank2' : 'rank1'"
          v-for="(item, i) in datalist.slice(0, 8)"
          :key="item.projtype"
        >
          <div class="num">{{ item.count }}个</div>
          <div class="name">{{ item.projtype }}</div>
          <div class="bar">
            <img src="~@/assets/img/Screen/leftBar.png" alt="" />
          </div>
        </div>


      <!-- <div class="rank rank2">
        <div class="num">2个</div>
        <div class="name">储气库工程</div>
        <div class="bar">
          <img src="~@/assets/img/Screen/leftBar.png" alt="">
        </div>
      </div>
      <div class="rank rank3">
        <div class="num">2个</div>
        <div class="name">储气库工程</div>
        <div class="bar">
          <img src="~@/assets/img/Screen/leftBar.png" alt="">
        </div>
      </div>
      <div class="rank rank4">
        <div class="num">2个</div>
        <div class="name">储气库工程</div>
        <div class="bar">
          <img src="~@/assets/img/Screen/leftBar.png" alt="">
        </div>
      </div>
      <div class="rank rank1">
        <div class="num">2个</div>
        <div class="name">储气库工程</div>
        <div class="bar">
          <img src="~@/assets/img/Screen/leftBar.png" alt="">
        </div>
      </div>
      <div class="rank rank2">
        <div class="num">2个</div>
        <div class="name">储气库工程</div>
        <div class="bar">
          <img src="~@/assets/img/Screen/leftBar.png" alt="">
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { countProjectCategory } from "@/api/screen.js"
export default {
  data() {
    return {
      datalist: [],
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await countProjectCategory()
      if (res.code == 200) {
        this.datalist = res.result
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.project-category {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("~@/assets/img/Screen/projectBg.png") center center;
  background-size: 330px 227px;
  .content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    height: 90%;
    justify-content: space-between;
    .rank1, .rank2 {
      // box-sizing: border-box;
      // display: flex;
      // flex-direction: column;
      // width: 160px;
      // flex: 1;
      height: 25px;
      // align-items: end;

      .num {
        color: #839ecb;
      }
      .name {
        // margin: 6px;
        color: #fff;
      }
      .bar {
        width: 61px;
        height: 3px;
        // background: url("~@/assets/img/Screen/leftBar.png");
        // background-size: 100% 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .rank1 {
      width: 35%;
      display: flex;
      flex-direction: column;
      align-items: end;
      text-align: right;
    }
    .rank2 {
      width: 35%;
      display: flex;
      flex-direction: column;
      align-items: start;
      text-align: left;
    }
  }
}
</style>

 src/components/chart/ServiceType.vue

ÎļþÃû´Ó src/components/chart/index.vue ÐÞ¸Ä
@@ -4,7 +4,7 @@

<script>
import * as echarts from "echarts"

import { countDataVisit } from "@/api/screen.js"
export default {
  data() {
    return {}
@@ -13,15 +13,8 @@
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
    initData() {
    async initChart() {
      const res = await countDataVisit()
      let dataPie = [
        {
          value: 410,
@@ -56,15 +49,26 @@
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          count += item.count
          return {
            value: item.count,
            name: item.modular1,
          }
        })
      }

      let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
      let colorWrap = [
        "#006CFF",
        "#3087d6",
        "#afe1ff",
        "#4be1ff",
        "#006CFF",
        "#5C7AAE",
        "#15D0FF",
        "#00BAFF",
        "#7f44bb",
        "#9BD3FF",
      ]
      let baseDataPie = [],
@@ -87,7 +91,7 @@
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 5,
                borderWidth: 4,
                borderColor: colorWrap[i],
                shadowBlur: 5,
                shadowColor: "rgba(48, 135, 214, 0.3)",
@@ -109,35 +113,36 @@
      }

      let option = {
        backgroundColor: "#021228",
        backgroundColor: "transparent",
        title: {
          text: "服务类型总数量",
          subtext: "10,225",
          subtext: count,
          textStyle: {
            color: "#00b5f3",
            color: "#fff",
            fontSize: 12,
          },
          subtextStyle: {
            align: "center",
            fontSize: 18,
            color: ["#85c7e3"],
            fontWeight: 800,
            fontSize: 20,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "20%",
          y: "40%",
        },
        tooltip: {
          show: true,
          // trigger: "item",
          // formatter: "{a}：{b} <br/>占比：{d}%",
        },
        // tooltip: {
        //   show: true,
        //   // trigger: "item",
        //   // formatter: "{a}：{b} <br/>占比：{d}%",
        // },
        legend: {
          data: ["企业", "政府", "个人"],
          data: dataPie,
          icon: "vertical",
          right: "1%",
          top: "center",
          top: "10%",
          orient: "vertical",
          itemGap: 20,
          itemGap: 7,
          itemWidth: 12,
          itemHeight: 3,

@@ -148,11 +153,11 @@
                target = dataPie[i].value
              }
            }
            let arr = [name, target]
            return arr.join("\n")
            let arr = `${name} |${target}`
            return arr
          },
          textStyle: {
            lineHeight: 20,
            lineHeight: 15,
            color: "#9ed2f5",
          },
        },
@@ -181,7 +186,7 @@
            data: baseDataWrap,
          },
          {
            name: "报警",
            name: "服务类型",
            type: "pie",
            color: "#5F6D86",
            selectedMode: "single",
@@ -198,6 +203,12 @@
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

      chart.setOption(option)
      window.addEventListener("resize", function () {
        chart.resize()
      })
    },
  },
}

 src/main.js

@@ -17,6 +17,10 @@
import '@/assets/css/config.css'
import 'animate.css';
import VueParticles from 'vue-particles'
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

Vue.use(VueParticles)
Vue.prototype.$echarts = echarts;
import * as echarts from 'echarts';
@@ -27,6 +31,8 @@
Vue.prototype.$wkt = WKT;
Vue.config.productionTip = false;



new Vue({
  router,
  i18n,

 src/views/Thematic/index.vue

@@ -104,14 +104,22 @@
<style lang="less">
.themaic {
  .aside-title {
    box-sizing: border-box;
    padding-left: 30px;
    height: 27px;
    line-height: 27px;
    background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    // height: 27px;
    // line-height: 27px;
    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    -webkit-background-clip: text;
    // -webkit-background-clip: text;
    color: #fff;
    width: 100%;

    height: 30px;
    line-height: 30px;
    background: url(~@/assets/img/Screen/asideTitleBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>