Merge branch 'master' of http://192.168.20.39:8989/r/LFWEB_NEW

lixuliang

2023-02-24 e8f99655102942c79e1c153f01ca9ea16e8152c4

Merge branch 'master' of http://192.168.20.39:8989/r/LFWEB_NEW

 src/assets/img/Screen/fileTypeBar.png

 src/components/Screen/bottom.vue

@@ -202,6 +202,9 @@
        case "工程展示":
          this.DisplayCurrentProject(child)
          break
        case "项目展示":
          this.changeProject(child)
          break
        default:
          break
      }
@@ -285,7 +288,7 @@
            wkt: item.st_astext,
          }
        })
        console.log(menu.children.length)
    
      }
    },
    async getCountProjectTour() {
@@ -299,9 +302,12 @@
            wkt: item.wkt,
          }
        })
        console.log(menu.children.length)
      
      }
    },
    changeProject(params) {
      this.$bus.$emit('changeProject', params.name)
    }
  },
}
</script>

 src/components/Screen/left.vue

@@ -3,22 +3,22 @@
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-show="ChartDisplay">
      <div class="current1" id="leftCurrent1">
    <div class="leftContainer" v-if="ChartDisplay">
      <div class="current1" style="height: 27%;" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
      </div>
      <div class="current1" id="leftCurrent2">
      <div class="current1" style="height: 27%;"  id="leftCurrent2">
        <div class="aside-title">服务类别</div>

        <service-type></service-type>
      </div>
      <div class="current1" id="leftCurrent3">
      <div class="current1" style="height: 36%;" id="leftCurrent3">
        <div class="aside-title">存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <div class="leftContainer" v-show="ProjectreeDisplay">
    <div class="leftContainer" v-if="ProjectreeDisplay">
      <project-tree></project-tree>
    </div>
  </div>

 src/components/Screen/right.vue

@@ -1,23 +1,42 @@
<template>
  <div class="current">
    <div class="rightContainer" v-show="ChartDisplay">
    <div class="rightContainer" v-if="ChartDisplay">
      <div class="current1">
        <div class="aside-title">工程种类</div>
        <project-category></project-category>
      </div>
      <!-- <div class="current1">
        <div class="aside-title">数据及服务提交</div>
        <echart12></echart12>
      </div> -->
      <div class="" >
      <div class="" style="height: 60%">
        <div class="aside-title">文件格式</div>
        <div class="content" style="height: 542px">
        <div class="content" style="height: calc(100% - 30px)">
          <div class="header">
            <div>格式</div>
            <div>数量</div>
          </div>
          <file-format></file-format>
        </div>
      </div>
    </div>
    <div
      class="rightContainer2"
      v-if="CourtyDisplay && currentProject =='全球项目'"
    >
      <div class="current1">
        <div class="aside-title">项目数量柱状图</div>
        <country-dimension-bar ref="barRef"></country-dimension-bar>
      </div>
      <div class="current1">
        <div class="aside-title">项目数量饼状图</div>
        <country-dimension-pie ref="pieRef"></country-dimension-pie>
      </div>
    </div>
    <div class="rightContainer2" v-if="CourtyDisplay && currentProject =='全国项目'">
      <div class="current1">
        <div class="aside-title">项目数量柱状图</div>
        <province-dimension-bar ref="barRef"></province-dimension-bar>
      </div>
      <div class="current1">
        <div class="aside-title">项目数量饼状图</div>
        <province-dimension-pie ref="pieRef"></province-dimension-pie>
      </div>
    </div>
    <div class="rightarrow">
@@ -31,6 +50,11 @@
import echart13 from "@/components/echart13.vue"
import FileFormat from "@/components/chart/FileFormat.vue"
import ProjectCategory from "../chart/ProjectCategory.vue"
import CountryDimensionBar from "../chart/CountryDimensionBar.vue"
import CountryDimensionPie from "../chart/CountryDimensionPie.vue"
import ProvinceDimensionBar from "../chart/CountryProvinceBar.vue"
import ProvinceDimensionPie from "../chart/CountryProvincePie.vue"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"

export default {
  components: {
@@ -38,23 +62,87 @@
    echart12,
    echart13,
    FileFormat,
    ProjectCategory
    ProjectCategory,
    CountryDimensionBar,
    CountryDimensionPie,
    ProvinceDimensionBar,
    ProvinceDimensionPie
  },
  data() {
    return {
      ChartDisplay: true,
      CourtyDisplay: false,
      RightImg: require("../../assets/img/Screen/leftArrow.png"),
      leftMessage: "init",
      currentProject: "全球项目",
      countryData: [],
      provinceData: [],
    }
  },
  created() {
    // this.getCountryData()
    // this.getProvinceData()
  },
  mounted() {
    // const countryData = this.countryData
    // const provinceData = this.provinceData

    // this.$refs.barRef.initChart(countryData)
    // this.$refs.pieRef.initChart(countryData)
    this.$bus.$on("changeProject", name => {
      this.currentProject = name
    })
  },
  methods: {
    ChangeRight() {
      if (this.ChartDisplay) {
        this.RightImg = require("../../assets/img/Screen/rightArrow.png")
      } else {
        this.RightImg = require("../../assets/img/Screen/leftArrow.png")
    async getCountryData() {
      const res = await countCountryDimension()
      if (res.code == 200) {
        this.countryData = res.result
      }
    },
    async getProvinceData() {
      const res = await countProvinceDimension()
      if (res.code == 200) {
        this.provinceData = res.result
      }
    },
    ChangeRight() {
      if (this.leftMessage == "init") {
        if (this.ChartDisplay) {
          this.RightImg = require("../../assets/img/Screen/rightArrow.png")
        } else {
          this.RightImg = require("../../assets/img/Screen/leftArrow.png")
        }
        this.ChartDisplay = !this.ChartDisplay
      }

      if (this.leftMessage == "projectree") {
        if (this.ProjectreeDisplay) {
          this.RightImg = require("../../assets/img/Screen/leftArrow.png")
        } else {
          this.RightImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.ProjectreeDisplay = !this.ProjectreeDisplay
      }

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

    //打开工程树
    OpenLeftProjectTree() {
      this.ChartDisplay = false
      this.CourtyDisplay = true
      this.leftMessage = "projectree"
      this.$parent.ChangeWidth("leftTree")
    },
  },
}
@@ -88,7 +176,24 @@
    align-items: center;
    justify-content: space-around;
    .current1 {
      height: 30%;
      height: 32%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .rightContainer2 {
    height: 100%;
    width: calc(100% - 7px);

    display: flex;
    flex-direction: column;
    align-items: center;
    .current1 {
      margin-top: 10px;
      margin-bottom: 30px;
      height: 32%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;

 src/components/Screen/top.vue

@@ -49,15 +49,16 @@
      this.currView = "chart"
      this.screen = true
      this.$parent.$refs.mapleft.OpenLeftInit()
      this.$parent.$refs.mapright.OpenLeftInit()
    },

    //打开工程树
    OpenProjectree() {
      this.screen = false

      this.currView = "tree"

      this.$parent.$refs.mapleft.OpenLeftProjectTree()
      this.$parent.$refs.mapright.OpenLeftProjectTree()

    },
  },
}

 src/components/chart/CountDataApply.vue

@@ -27,7 +27,7 @@
        xAxis.push(item.name)
        yAxis.push(item.number)
      })
 

      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
      //   return {
@@ -46,6 +46,13 @@
            type: "shadow", // é»˜è®¤ä¸ºç›´çº¿ï¼Œå¯é€‰ä¸ºï¼š'line' | 'shadow'
          },
        },
        grid: {
          top: "10%",
          bottom: "15%",
          right: "5%",
          left: "5%",
          containLabel: true,
        },
        xAxis: {
          data: xAxis,
          //坐标轴

 src/components/chart/CountryDimensionBar.vue

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

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      let data = [
        {
          country: "苏丹",
          count: 1,
        },
        {
          country: "印度尼西亚",
          count: 1,
        },
        {
          country: "阿联酋",
          count: 1,
        },
        {
          country: "乌兹别克斯坦",
          count: 1,
        },
        {
          country: "哈萨克斯坦",
          count: 2,
        },
        {
          country: "委内瑞拉",
          count: 1,
        },
        {
          country: "斯里兰卡",
          count: 1,
        },
        {
          country: "中国",
          count: 17,
        },
        {
          country: "其他",
          count: 1,
        },
        {
          country: "土库曼斯坦",
          count: 1,
        },
        {
          country: "新加坡",
          count: 1,
        },
      ]
      const res = await countCountryDimension()
      if (res.code == 200) {
        data = res.result
      }
      let xAxisData = []
      let yAxisData = []

      data.forEach(item => {
        xAxisData.push(item.country)
        yAxisData.push(item.count)
      })
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          right: "0%",
          left: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            interval: 0,
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
                //debugger
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 14,
                width: 40,
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
                  }
                },
                // formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                //   ","
                // ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 15,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      }

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

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

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

 src/components/chart/CountryDimensionPie.vue

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

<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      currentProject: '全球项目'
    }
  },
  mounted() {
    this.initChart()
  },

  methods: {
    async initChart() {
      const res = await countCountryDimension()
      let dataPie = [
        {
          value: 410,
          name: "企业",
        },
        {
          value: 380,
          name: "政府",
        },
        {
          value: 50,
          name: "个人",
        },
        {
          value: 50,
          name: "个人1",
        },
        {
          value: 50,
          name: "个人2",
        },
        {
          value: 50,
          name: "个人3",
        },
        {
          value: 50,
          name: "个人4",
        },
        {
          value: 50,
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          return {
            name: item.country,
            value: item.count
          }
        })
      }

      let colorPie = ["#173852", "#0b2036", "#002e49"]
      let colorWrap = [
        "#3087d6",
        "#f6ce54",
        "#4be1ff",
        "#b6e9ff",
        "#18edc9",
        "#6ac5fa",
      ]
      let baseDataPie = [],
        baseDataWrap = []
      let total = 0
      dataPie
        .sort((a, b) => b.value - a.value)
        .forEach(function (val, idx, arr) {
          count += val.value
        })
      for (let i = 0; i < dataPie.length; i++) {
        baseDataWrap.push(
          {
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 1,
                borderColor: colorWrap[i],
                shadowBlur: 10,
                shadowColor: "rgba(7, 132, 250, 0.8)",
              },
            },
          },
          {
            value: 0.1,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent",
                borderWidth: 5,
                borderColor: "transparent",
              },
            },
            tooltip: {
              show: false,
            },
          }
        )

        if (i < 3) {
          baseDataPie.push({
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: colorPie[i],
              },
            },
          })
        }
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: count,
          subtext: "项目总数",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          subtextStyle: {
            align: "center",
            fontSize: 14,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "center",
          y: "center",
        },
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: [
          {
            show: false,
            data: ["在线", "ç»´ä¿®", "离线", "检修", "抢修", "其他"],
            icon: "vertical",
            right: "5px",
            top: "center",
            orient: "vertical",
            itemGap: 20,
            itemWidth: 15,
            itemHeight: 8,
            formatter: function (name) {
              let target, percent
              for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                  target = dataPie[i].value
                  percent = ((target / total) * 100).toFixed(1)
                }
              }
              let arr = [
                percent + "% " + " {yellow|" + target + "}",
                " {blue|" + name + "}",
              ]
              return arr.join("\n")
            },
            textStyle: {
              lineHeight: 20,
              color: "#f0f4f6",
              align: "right",
              rich: {
                yellow: {
                  color: "#00b5f3",
                  fontWeight: "bold",
                },
                blue: {
                  color: "#4be1ff",
                  align: "right",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "项目数量",
            type: "pie",
            // clockWise: false, //顺时加载
            // hoverAnimation: false, //鼠标移入变大
            center: ["50%", "50%"],
            // radius: ["60%", "70%"],
            radius: [70, 80],
            labelLine: {
              show: true,
            },
            itemStyle: {
              borderWidth: 3,
              // borderColor: "#fff",
            },
            minAngle: 15, //最小角度
            startAngle: 270, //起始角度
            label: {
              // show: false,
              formatter: params => {
                if (params.percent > 10) {
                  return `{b|${params.name}} \n {per|${Math.ceil(
                    (params.value * 100) / count
                  )}%}`
                } else {
                  return `{b|${params.name}}`
                }
              },
              // backgroundColor: "#fff",
              // borderColor: "#aaa",
              // borderWidth: 1,
              // borderRadius: 3,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 14,
                  color: '#fff'
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },

            data: baseDataWrap,
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

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

  },
}
</script>

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

 src/components/chart/CountryProvinceBar.vue

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

<script>
import * as echarts from "echarts"
import { countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart(dataPie) {
      let data = [
        {
          country: "苏丹",
          count: 1,
        },
        {
          country: "印度尼西亚",
          count: 1,
        },
        {
          country: "阿联酋",
          count: 1,
        },
        {
          country: "乌兹别克斯坦",
          count: 1,
        },
        {
          country: "哈萨克斯坦",
          count: 2,
        },
        {
          country: "委内瑞拉",
          count: 1,
        },
        {
          country: "斯里兰卡",
          count: 1,
        },
        {
          country: "中国",
          count: 17,
        },
        {
          country: "其他",
          count: 1,
        },
        {
          country: "土库曼斯坦",
          count: 1,
        },
        {
          country: "新加坡",
          count: 1,
        },
      ]
      const res = await countProvinceDimension()
      if (res.code == 200) {
        data = res.result
      }
      let xAxisData = []
      let yAxisData = []

      data.forEach(item => {
        xAxisData.push(item.province)
        yAxisData.push(item.count)
      })
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          right: "0%",
          left: "0%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
            interval: 0,
            axisLabel: {
              margin: 10,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
                //debugger
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% å¤„的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% å¤„的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 14,
                width: 40,
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
                  }
                },
                // formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(
                //   ","
                // ),
                rich: {
                  d: {
                    color: "#3CDDCF",
                  },
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                  b: {
                    width: 1,
                    height: 15,
                    borderWidth: 1,
                    borderColor: "#234e6c",
                    align: "left",
                  },
                },
              },
            },
          },
        ],
      }

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

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

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

 src/components/chart/CountryProvincePie.vue

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

<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  data() {
    return {
      currentProject: '全球项目'
    }
  },
  mounted() {
    this.initChart()
  },

  methods: {
    async initChart() {
      const res = await countProvinceDimension()
      let dataPie = [
        {
          value: 410,
          name: "企业",
        },
        {
          value: 380,
          name: "政府",
        },
        {
          value: 50,
          name: "个人",
        },
        {
          value: 50,
          name: "个人1",
        },
        {
          value: 50,
          name: "个人2",
        },
        {
          value: 50,
          name: "个人3",
        },
        {
          value: 50,
          name: "个人4",
        },
        {
          value: 50,
          name: "个人5",
        },
      ]
      let count = 0
      if (res.code == 200) {
        dataPie = res.result.map(item => {
          return {
            name: item.province,
            value: item.count
          }
        })
      }


      let colorPie = ["#173852", "#0b2036", "#002e49"]
      let colorWrap = [
        "#3087d6",
        "#f6ce54",
        "#4be1ff",
        "#b6e9ff",
        "#18edc9",
        "#6ac5fa",
      ]
      let baseDataPie = [],
        baseDataWrap = []
      let total = 0
      dataPie
        .sort((a, b) => b.value - a.value)
        .forEach(function (val, idx, arr) {
          count += val.value
        })
      for (let i = 0; i < dataPie.length; i++) {
        baseDataWrap.push(
          {
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                color: colorWrap[i],
                borderWidth: 1,
                borderColor: colorWrap[i],
                shadowBlur: 10,
                shadowColor: "rgba(7, 132, 250, 0.8)",
              },
            },
          },
          {
            value: 0.1,
            name: "",
            itemStyle: {
              normal: {
                color: "transparent",
                borderWidth: 5,
                borderColor: "transparent",
              },
            },
            tooltip: {
              show: false,
            },
          }
        )

        if (i < 3) {
          baseDataPie.push({
            value: dataPie[i].value,
            name: dataPie[i].name,
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: colorPie[i],
              },
            },
          })
        }
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: count,
          subtext: "项目总数",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          subtextStyle: {
            align: "center",
            fontSize: 14,
            color: ["#fff"],
            fontWeight: 400,
            fontFamily: "YouSheBiaoTiHei",
          },
          x: "center",
          y: "center",
        },
        grid: {
          left: "1%", // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
          right: "1%", // ä¸Žå®¹å™¨å³ä¾§çš„距离
          top: "1%", // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
          bottom: "1%", // ä¸Žå®¹å™¨åº•éƒ¨çš„距离
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: [
          {
            show: false,
            data: ["在线", "ç»´ä¿®", "离线", "检修", "抢修", "其他"],
            icon: "vertical",
            right: "5px",
            top: "center",
            orient: "vertical",
            itemGap: 20,
            itemWidth: 15,
            itemHeight: 8,
            formatter: function (name) {
              let target, percent
              for (let i = 0; i < dataPie.length; i++) {
                if (dataPie[i].name === name) {
                  target = dataPie[i].value
                  percent = ((target / total) * 100).toFixed(1)
                }
              }
              let arr = [
                percent + "% " + " {yellow|" + target + "}",
                " {blue|" + name + "}",
              ]
              return arr.join("\n")
            },
            textStyle: {
              lineHeight: 20,
              color: "#f0f4f6",
              align: "right",
              rich: {
                yellow: {
                  color: "#00b5f3",
                  fontWeight: "bold",
                },
                blue: {
                  color: "#4be1ff",
                  align: "right",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "项目数量",
            type: "pie",
            // clockWise: false, //顺时加载
            // hoverAnimation: false, //鼠标移入变大
            center: ["50%", "50%"],
            // radius: ["60%", "70%"],
            radius: [70, 80],
            labelLine: {
              show: true,
            },
            itemStyle: {
              borderWidth: 3,
              // borderColor: "#fff",
            },
            minAngle: 15, //最小角度
            startAngle: 270, //起始角度
            label: {
              // show: false,
              formatter: params => {
                if (params.percent > 10) {
                  return `{b|${params.name}} \n {per|${Math.ceil(
                    (params.value * 100) / count
                  )}%}`
                } else {
                  return `{b|${params.name}}`
                }
              },
              // backgroundColor: "#eee",
              // borderColor: "#aaa",
              // borderWidth: 1,
              // borderRadius: 3,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 14,
                  color: '#fff'

                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },

            data: baseDataWrap,
          },
        ],
      }
      const chart = echarts.init(this.$refs.chart)

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

  },
}
</script>

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

 src/components/chart/DataStorage.vue

@@ -45,7 +45,16 @@
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
              <div
                style="
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                :title="scope.row.name"
              >
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="文件数" width="70">
@@ -181,36 +190,38 @@
</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;
.data-storage {
  .index-wrap {
    margin: 0 auto;
    width: 14px;
    height: 14px;
    background: rgba(180, 188, 235, 0.25);
  }
  .el-table {
    height: 100%;
  .scrollbar {
    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;
    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

@@ -3,6 +3,7 @@
</template>

<script>
const fileTypeBar = require("@/assets/img/Screen/fileTypeBar.png")
import * as echarts from "echarts"
import { countFileFormat } from "@/api/screen.js"
export default {
@@ -173,9 +174,10 @@
          {
            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],
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNDgzRTBDQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNDgzRTBEQjNFNzExRURCRDc5RTVGRkQxNDc0MjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU0ODNFMEFCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU0ODNFMEJCM0U3MTFFREJENzlFNUZGRDE0NzQyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DGVZNAAAOOElEQVR42qxa+Y8c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",
            symbolSize: [25, 25],
            symbolOffset: [20, 0],
            z: 5,
            data: getSymbolData(data),

 src/views/Archive/index.vue

@@ -123,12 +123,14 @@
        </div>
      </div>

      <div class="bottom_right">
        <div>
      <div class="bottom_right" >
        <div class="inquire subpage_Div center " ref="container" style="padding: 10px;align-self: center">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="sizeForm"
            label-width="68px"
          >
            <!-- <el-form-item>
              <el-cascader
@@ -143,9 +145,9 @@
              checkStrictly: true,
              emitPath: false,
            }"
              ></el-cascader> -->
            </el-form-item>
            <el-form-item>
              ></el-cascader>
            </el-form-item> -->
            <el-form-item style="padding-right: 10px">
              <el-cascader
                v-model="formInline.depid"
                :show-all-levels="false"
@@ -160,45 +162,49 @@
            }"
              ></el-cascader>
            </el-form-item>
            <el-form-item>
            <el-form-item style="padding-right: 50px">
              <el-input
                v-model="formInline.tab"
                suffix-icon="el-icon-search"
                :placeholder="$t('common.pleaseInput')"
              ></el-input>
            </el-form-item>
            <el-form-item>

            <el-form-item style="padding-right: 40px">
              <el-button
                icon="el-icon-search"
                @click="searchDataLibSelectTabs"
                size="small"
              >{{
              $t('common.iquery')
            }}</el-button>
                  type="primary"
                  icon="el-icon-search"
                  @click="searchDataLibSelectTabs"
                  size="medium"
              >{{$t('common.iquery')}}</el-button>
              <!--            </el-form-item>
            <el-form-item style="padding-right: 10px">-->
              <el-button
                icon="el-icon-refresh"
                @click="restDataLibSelectTabs"
                type="info"
                size="small"
              >{{
              $t('common.reset')
            }}</el-button>
            </el-form-item>
            <el-form-item>
                size="medium"
                style="
                  background: #a3a5a6;
                  border: 1px solid #a3a5a6;
                  color: white; "
              >{{ $t('common.reset') }}</el-button>
<!--            </el-form-item>
            <el-form-item style="padding-right: 10px">-->
              <el-button
                @click="getSpaceMapVisibale"
                size="small"
              >{{
              $t('synthesis.rangequery')
            }}</el-button>
            </el-form-item>
            <el-form-item>
                  type="success"
                  icon="el-icon-search"
                  @click="getSpaceMapVisibale"
                  size="medium"
              >{{ $t('synthesis.rangequery') }}</el-button>
<!--            </el-form-item>
            <el-form-item style="padding-right: 10px">-->
              <el-button
                @click="getdownloadList"
                size="small"
              >{{
              $t('synthesis.DownloadList')
            }}</el-button>
                  icon="el-icon-download"
                  type="warning"
                  @click="getdownloadList"
                  size="medium"
              >{{ $t('synthesis.DownloadList') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
@@ -393,14 +399,14 @@
                  class="elLink"
                  :underline="false"
                  @click="setAttachInsert"
                >{{$t('common.append')}}</i></el-link>
                >{{$t('common.append')}}</el-link>
              </el-col>
              <el-col :span="3">
                <el-link
                  class="elLink"
                  :underline="false"
                  @click="setAttachDel"
                >{{$t('common.delete')}}</i></el-link>
                >{{$t('common.delete')}}</el-link>
              </el-col>
              <!-- <el-col :span="3">  <el-link  class="elLink" :underline="false" >{{$t('common.reset')}}</i></el-link></el-col> -->
            </el-row>

 src/views/Thematic/index.vue

@@ -42,6 +42,7 @@
      }
      if (parm == "leftView" || parm == "leftTree") {
        this.leftWidth = "20%"
        this.rightWidth = "20%"
      }

      if (parm == "right") {