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

Surpriseplus

2023-02-16 be1f4296a09f907fd3218bc423d24b817a761229

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

 src/assets/img/Screen/centerTooltip.png

 src/assets/img/Screen/prjectree.png

 src/components/Screen/ProjectTree.vue

@@ -1,5 +1,14 @@
<template>
  <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
    <div class="project_tree__title">工程项目</div>
    <el-input
      style="width: 80%"
      placeholder="输入关键字进行查询"
      suffix-icon="el-icon-search"
      v-model="filterText"
      size="mini"
    >
    </el-input>
    <div class="tree-container">
      <el-tree
        :data="treeData"
@@ -10,13 +19,14 @@
        ref="tree"
        class="el-tree"
        @check-change="handleCheckChange"
        :filter-node-method="filterNode"
      >
        <div
          style="display: flex"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <div style="margin-left: 0px; padding-left: 15px">
          <div style="">
            <i
              v-if="data.children && data.children.length > 0"
              style="color: yellow"
@@ -24,8 +34,20 @@
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div>

          <!-- <div style="">
            <i
              v-if="node.expanded && data.children && data.children.length > 0"
              style="color: yellow"
              class="el-icon-folder-opened"
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div> -->
          <div
            :style="
              data.children && data.children.length > 0
                ? 'padding-left: 20px'
                : 'padding-left: 20px'
            "
            class="tree-label"
            :title="node.label || '-'"
          >
@@ -34,14 +56,14 @@
        </div>
      </el-tree>
    </div>
    <div class="changeBaseLayer">
    <!-- <div class="changeBaseLayer">
      <div @click="changeMenulayer" class="CenDiv">
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
      </div>
    </div>
    </div> -->
  </div>
</template>

@@ -70,6 +92,7 @@
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
      filterText: '',
    }
  },

@@ -79,6 +102,11 @@
    this.changeSelectli = this.rightList[0].id
    this.changeSelectStyle = this.rightMenu[0].id
    this.addImageLayer()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    async addImageLayer() {
@@ -170,6 +198,10 @@
        Viewer.imageryLayers._layers[3].show = true
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  },
}
</script>
@@ -180,12 +212,26 @@
  width: 300px;
  height: 100%;
  transition: width 2s;
  background: url("~@/assets/img/themic/左框.png") no-repeat center;
  background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;

  background-size: 100% 100%;
  &__title {
    color: #fff;
    height: 30px;
    font-size: 20px;
    width: 130px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
  }
  .el-input {
    width: 80%;
    padding: 5px 0 5px 30px;
  }

  .tree-container {
    margin: 10px;
    height: 90%;
    height: 85%;
    overflow-y: auto;
  }
  .changeBaseLayer {
@@ -197,7 +243,6 @@
  .CenDiv {
    height: 40px;
    width: 60px;

    margin-right: 7%;
    border-radius: 5px;
    bottom: 3%;
@@ -223,11 +268,43 @@
    border-radius: 5px;
  }
}
/*  滚动条样式 */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #409eff;
}

::-webkit-scrollbar-track {
  background: #eee;
}

::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #409eff;
}

::-webkit-scrollbar-corner {
  background: #409eff;
}
</style>

<style lang="scss">
.leftContainer {
  .project_tree {
    .el-tree-node__content {
      margin-left: 20px;
    }

    .el-tree .el-tree-node .is-leaf {
      margin-left: -14px;
    }

    .el-tree-node__content > label.el-checkbox {
      margin-right: -30px;
    }
@@ -243,7 +320,6 @@
      // visibility: hidden;
    }
    .tree-label {
      padding-left: 10px;
      font-size: 16px;
      color: #fff;
    }

 src/components/Screen/bottom.vue

@@ -3,7 +3,13 @@
    <div class="bottom1">
      <div class="bottom11"></div>
      <div class="bottom12">
        <div class="bottombtn">
        <div
          :class="currMenu == item.menuName ? 'active' : ''"
          v-for="item in menuList"
          :key="item.menuName"
          class="bottombtn"
          @click="handleMenuClick(item)"
        >
          <el-popover
            popper-class="popover"
            placement="top"
@@ -17,26 +23,15 @@
              <div class="popover-content__list">
                <div
                  class="popover-content__list__item"
                  v-for="item in projectInfoList"
                  :key="item.id"
                  :class="currProject == item.name ? 'active' : ''"
                  v-for="child in item.children"
                  :key="child.id"
                  :class="currProject == child.name ? 'active' : ''"
                  @click="handlePopoverClick(child)"
                >
                  {{ item.name }}
                  {{ child.name }}
                </div>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="bottombtn">
          <el-popover placement="top" width="100" trigger="click">
            <!-- 内容 -->
            <span slot="reference">工程展示</span>
          </el-popover>
        </div>
        <div class="bottombtn">
          <el-popover placement="top" width="100" trigger="click">
            <!-- 内容 -->
            <span slot="reference">工程巡视</span>
          </el-popover>
        </div>
      </div>
@@ -55,23 +50,71 @@
    return {
      YXState: true,
      yxImg: require("../../assets/img/Screen/yximg.png"),
      currMenu: "项目展示",
      currProject: "全球管网图",
      projectInfoList: [
      menuList: [
        {
          name: "全国管网图",
          id: "qggwt",
          menuName: "项目展示",
          children: [
            {
              name: "全国管网图",
              id: "qggwt",
            },
            {
              name: "全球管网图",
              id: "qqgwt",
            },
            {
              name: "全国项目",
              id: "qgxm",
            },
            {
              name: "全球项目",
              id: "qqxm",
            },
          ],
        },
        {
          name: "全球管网图",
          id: "qqgwt",
          menuName: "工程展示",
          children: [
            {
              name: "中俄东线管道工程",
              id: "zedx",
            },
            {
              name: "西气东输三线中断管道工程",
              id: "xqds",
            },
            {
              name: "中缅天然气管道工程",
              id: "zmtrq",
            },
            {
              name: "山东官网新干线",
              id: "sdxgx",
            },
          ],
        },
        {
          name: "全国项目",
          id: "qgxm",
        },
        {
          name: "全球项目",
          id: "qqxm",
          menuName: "工程巡视",
          children: [
            {
              name: "中俄东线管道工程",
              id: "zedx",
            },
            {
              name: "西气东输三线中断管道工程",
              id: "xqds",
            },
            {
              name: "中缅天然气管道工程",
              id: "zmtrq",
            },
            {
              name: "山东官网新干线",
              id: "sdxgx",
            },
          ],
        },
      ],
    }
@@ -91,6 +134,28 @@
        Viewer.imageryLayers._layers[3].show = true
      }
      this.YXState = !this.YXState
    },
    handleMenuClick(menu) {
      this.currMenu = menu.menuName
    },
    handlePopoverClick(child) {
      this.currProject = child.name
    },

    //项目展示
    DisplayCurrentProject(parm) {
      console.log(parm)
      //打开或者加载图层

      //飞到指定位置
    },

    //工程漫游飞行
    FlyCurrentProject(parm) {
      console.log(parm)
      //打开或者加载图层

      //开始飞行
    },
  },
}
@@ -140,7 +205,7 @@
    .bottombtn {
      height: 36px;
      width: 147px;
      background: url(../../assets/img/Screen/centerbtn.png);
      background: url(~@/assets/img/Screen/centerbtn.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      font-size: 1rem;
@@ -150,6 +215,10 @@
      color: #fff;
      font-weight: 600;
      cursor: pointer;
      &.active {
        background: url(~@/assets/img/Screen/centerbtnc.png);
        background-size: 100% 100%;
      }
    }
  }

@@ -167,25 +236,58 @@
  }
}
.popover {
  background-color: aqua;

  display: flex;
  justify-content: center;
  width: 163px;
  height: 239px;
  background: url(~@/assets/img/Screen/centerTooltip.png);
  background-size: 100% 100%;
  border: none;
  .popper__arrow {
    display: none;
  }
  .popover-content {
    &__header {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 130px;
      height: 30px;
      font-size: 18px;
      color: #fff;
      &::before,
      &::after {
        margin: 0 5px;
        content: "";
        display: inline-block;
        background-color: aqua;
        background-color: #466c99;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        width: 8px;
        height: 8px;
      }
    }
    &__list {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 190px;

      &__item {
        background-color: orange;
        color: #fff;
        width: 130px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        // background-color: orange;
        cursor: pointer;
        background: url(~@/assets/img/Screen/btnbg.png);
        background-size: 100% 100%;

        &.active {
          background-color: aqua;
          // background-color: aqua;
          background: url(~@/assets/img/Screen/btnc.png);
          background-size: 100% 100%;
        }
      }
    }

 src/components/Screen/left.vue

@@ -3,16 +3,13 @@
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="!ChartDisplay">
      <div class="current1"></div>
      <div class="current1"></div>
      <div class="current1"></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>
    <div class="leftContainer" v-if="ChartDisplay">
    <div class="leftContainer" v-show="ProjectreeDisplay">
      <project-tree></project-tree>
      <!-- <div class="current1"></div>
      <div class="current1"></div>
      <div class="current1"></div> -->
    </div>
  </div>
</template>
@@ -24,21 +21,490 @@
  },
  data() {
    return {
      leftMessage: "init",
      ChartDisplay: true,
      ProjectreeDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
    }
  },
  mounted() {},
  mounted() {
    this.OpenLeftInit();
    this.OpenLeftInitChart();
  },
  methods: {
    ChangeLeft() {
      if (this.ChartDisplay) {
        this.leftImg = require("../../assets/img/Screen/leftArrow.png")
      } else {
        this.leftImg = require("../../assets/img/Screen/rightArrow.png")
      if (this.leftMessage == "init") {
        if (this.ChartDisplay) {
          this.leftImg = require("../../assets/img/Screen/leftArrow.png")
        } else {
          this.leftImg = require("../../assets/img/Screen/rightArrow.png")
        }
        this.ChartDisplay = !this.ChartDisplay;
      }
      this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("left")

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


      this.$parent.ChangeWidth("left");
    },
    //打开大屏左侧界面
    OpenLeftInit() {
      this.ChartDisplay = true;
      this.ProjectreeDisplay = false;
      this.leftMessage = "init";
      this.OpenLeftInitChart();
    },
    //打开工程树
    OpenLeftProjectTree() {
      this.ChartDisplay = false;
      this.ProjectreeDisplay = true;
      this.leftMessage = "projectree";
    },
    //大屏界面图表
    OpenLeftInitChart() {
      //左一图
      let option1 = {
        title: {
          text: '项目分类',
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        yAxis: {
          type: 'category',
          data: [
            '管道类',
            '管网类',
            '基建类',
            '航空测量',
            '风险排查',
            '工程培训',
          ],
          axisLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        series: [
          {
            name: '项目分类',
            type: 'bar',
            barWidth: 20,
            data: [36, 45, 25, 15, 49, 33],
            itemStyle: {
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [0, 90, 90, 0],
                color: (params) => {
                  var colorList = [
                    ['#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,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: colorItem[0],
                      },
                      {
                        offset: 1,
                        color: colorItem[1],
                      },
                    ],
                    false
                  );
                },
              },
            },
          },
        ],
      };
      let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"));
      myChart1.setOption(option1);
      window.addEventListener("resize", function () {
        myChart1.resize();
      });

      //左二图
      let dataAxis = [
        '中俄东线管道工程南段',
        '中俄东线管道工程中段',
        '广州站',
        '唐山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);
      }
      let option2 = {
        title: {
          text: '项目完成度',
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: dataAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
            formatter: function (params) {
              var newParamsName = ''; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 4; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
        },
        yAxis: {
          axisLine: {
            show: true,
          },

          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        series: [
          {
            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' },
              ]),
            },
            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' },
                ]),
              },
            },
            data: data,
          },
        ],
      };
      const zoomSize = 6;
      let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2'));
      myChart2.on('click', function (params) {
        myChart2.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
            Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });

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


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

      var indicator = [
        { 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],
          name: legendData[0],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4A99FF',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: '#4A99FF',
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
          //在拐点处显示数值
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            },
          },
        },
        {
          value: [40, 25, 110, 60, 18, 12],
          name: legendData[1],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4BFFFC',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: '#4BFFFC',
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
          //在拐点处显示数值
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            },
          },
        },
      ];
      var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
      let option3 = {
        title: {
          text: '人员变动',
          padding: [10, 30],
          textStyle: {
            color: '#fff',
            fontSize: 15
          },
        },
        color: colorArr,
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
          radius: 75,
          nameGap: 2, // 图中工艺等字距离图的距离
          splitNumber: 4, // 网格线的个数
          center: ["50%", "63%"], // 图的位置

          indicator: indicator,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#153269',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#113865', // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            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();
      });

    },






  },
}
</script>
@@ -50,18 +516,21 @@
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .leftarrow {
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 30px;
      height: 120px;
      cursor: pointer;
    }
  }

  .leftContainer {
    height: 100%;
    width: calc(100% - 36px);
@@ -70,6 +539,7 @@
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .current1 {
      height: 30%;
      width: 100%;

 src/components/Screen/mapsdk.vue

@@ -1,16 +1,15 @@
<template>
  <div  class="ParentCentermapdiv">
  <div class="ParentCentermapdiv">
    <div id="Centermapdiv"></div>
  </div>
</template>

<script>

export default {
  name: "",
  components: {},
  data() {
    return{} 
    return {}
  },
  mounted() {
    this.init3DMap()
@@ -25,10 +24,22 @@
      window.Viewer = window.sgworld._Viewer
      Viewer.imageryLayers._layers[0].show = false
      //定位
      // Viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),
      // })
      Viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(110, 33, 25000000),
        destination: {
          x: -3919623.6069864673,
          y: 13752070.475126158,
          z: 8307291.863719194,
        },
        orientation: {
          heading: 6.283185307179582,
          roll: 0,
          pitch: -1.5707039123519846,
        },
      })

      });
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,
@@ -46,8 +57,6 @@
        })
      )



      Viewer._enableInfoOrSelection = false
      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false
@@ -58,7 +67,6 @@
      //开启深度检测
      sgworld.Analysis.depthTestAgainstTerrain(true)


      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer,
      })
@@ -66,23 +74,20 @@
      //改变天空颜色为黑色
      Viewer.scene.skyBox.show = false //关闭天空盒，否则会显示天空颜色
      //背景透明
      Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
      Viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)
    },

  }
 
  },
}
</script>

<style scoped lang="scss">
.ParentCentermapdiv{
.ParentCentermapdiv {
  display: fixed;
  height: 100%;
    width: 100%;
  width: 100%;
}
  #Centermapdiv{
    height: 100%;
    width: 100%;
  }

#Centermapdiv {
  height: 100%;
  width: 100%;
}
</style>

 src/components/Screen/right.vue

@@ -1,82 +1,95 @@
<template>
    <div class="current">
        
        <div class="rightContainer"  v-show="ChartDisplay">
            <div class="current1"></div>
            <div class="current1"></div>
            <div class="current1"></div>
        </div>
        <div class="rightarrow">
            <img :src="RightImg"  @click="ChangeRight" />
        </div>

  <div class="current">
    <div class="rightContainer" v-show="ChartDisplay">
      <div class="current1">
        <div class="aside-title">目录分布</div>
        <echart11></echart11>
      </div>
      <div class="current1">
        <div class="aside-title">数据及服务提交</div>
        <echart12></echart12>
      </div>
      <div class="current1">
        <div class="aside-title">各类数据存储分布</div>
        <echart13></echart13>
      </div>
    </div>
    <div class="rightarrow">
      <img :src="RightImg" @click="ChangeRight" />
    </div>
  </div>
</template>
<script>
export default{
    data(){
        return{
            ChartDisplay:true,
            RightImg:require("../../assets/img/Screen/leftArrow.png")
        }
    },
    methods:{
        ChangeRight(){
            if(this.ChartDisplay){
                this.RightImg=require("../../assets/img/Screen/rightArrow.png");
            }else{
                this.RightImg=require("../../assets/img/Screen/leftArrow.png");
            }        
            this.ChartDisplay=!this.ChartDisplay;
            this.$parent.ChangeWidth("right");
        }
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
export default {
  components: {
    echart11,
    echart12,
    echart13,
  },
  data() {
    return {
      ChartDisplay: true,
      RightImg: require("../../assets/img/Screen/leftArrow.png"),
    }



  },
  methods: {
    ChangeRight() {
      if (this.ChartDisplay) {
        this.RightImg = require("../../assets/img/Screen/rightArrow.png")
      } else {
        this.RightImg = require("../../assets/img/Screen/leftArrow.png")
      }
      this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("right")
    },
  },
}



</script>
<style lang="scss">
.current {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .rightarrow {
    width: 36px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .rightarrow{
        width:36px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 30px;
            height: 120px;
            cursor: pointer;
        }
    img {
      width: 30px;
      height: 120px;
      cursor: pointer;
    }
    .rightContainer {
        height: 100%;
        width: calc(100% - 36px);
       
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .current1{
            height: 30%;
            width: 100%;
            background:url(../../assets/img/Screen/chartbg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
  }
  .rightContainer {
    height: 100%;
    width: calc(100% - 36px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .current1 {
      height: 30%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }



    .aside-title {
      padding-left: 30px;
      height: 27px;
      line-height: 27px;
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>
</style>

 src/components/Screen/top.vue

@@ -2,14 +2,14 @@
  <div class="top">
    <div class="topleft">
      <div
        class="topleft1 topleftC"
        class="topleft1 topleftC"  @click="OpenInitChart"
        :class="{ topleft1: screen == false, topleftC: screen == true }"
      >
        <img src="../../assets/img/Screen/bigST.png" />
        <span>大屏视图</span>
      </div>
      <div
        class="topleft1 topleftC"
        class="topleft1 topleftC" @click="OpenProjectree"
        :class="{ topleft1: tree == false, topleftC: tree == true }"
      >
        <img src="../../assets/img/Screen/ptree.png" />
@@ -40,6 +40,19 @@
    ReturnLast() {
      this.$router.push("/Synthesis")
    },

    //打开大屏
    OpenInitChart(){
      this.$parent.$refs.mapleft.OpenLeftInit();
    },

    //打开工程树
    OpenProjectree(){
      this.$parent.$refs.mapleft.OpenLeftProjectTree();
    }



  },
}
</script>

 src/components/echart11.vue

@@ -10,73 +10,73 @@
  components: {},
  data() {
    //这里存放数据
    return { myChart: null };
    return { myChart: null }
  },
  mounted() {
    this.lineChart();
    this.$bus.$on('resizeEchart', (res) => {
      this.myChart.resize();
    });
    this.lineChart()
    this.$bus.$on("resizeEchart", res => {
      this.myChart.resize()
    })
  },
  //方法集合
  methods: {
    lineChart() {
      let option = {
        title: {
          text: '目录分布',
          top: '15',
          text: "目录分布",
          top: "15",
          textStyle: {

            color: '#fff',
            color: "#fff",
          },
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        // legend: {},
        grid: {
          left: '0%',

          right: '4%',
          bottom: '0%',
          top: "5",
          left: "0%",
          right: "4%",
          bottom: "10",
          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 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) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
@@ -84,32 +84,32 @@
              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
            },
          },
        },
        series: [
          {
            name: '目录分布',
            type: 'bar',
            name: "目录分布",
            type: "bar",
            barWidth: 20,
            data: [120, 150, 110, 50, 70, 20, 70],
            showBackground: true,
@@ -117,17 +117,17 @@
              normal: {
                // 柱形图圆角，初始化效果

                color: (params) => {
                color: params => {
                  var colorList = [
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                    ['#188df0', '#83bff6'],
                  ];
                  var colorItem = colorList[params.dataIndex];
                    ["#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(
                    1,
                    0,
@@ -144,22 +144,22 @@
                      },
                    ],
                    false
                  );
                  )
                },
              },
            },
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById('echart6'));
      this.myChart.setOption(option);
      window.addEventListener('resize', function () {
        this.myChart.resize();
      });
      }
      this.myChart = this.$echarts.init(document.getElementById("echart6"))
      this.myChart.setOption(option)
      window.addEventListener("resize", function () {
        this.myChart.resize()
      })
    },
  },
  created() { },
};
  created() {},
}
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

 src/components/echart12.vue

@@ -136,22 +136,27 @@
            color: '#fff',
            // fontSize: "22",
          },
          show: false
          // subtextStyle: {
          //   color: "#90979c",
          //   fontSize: "16",
          // },
        },
        //  图表的位置
        // grid: {
        //   top:"4%"
        // },
        grid: {
          top: '10',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true,
        },

        color: colorArr,
        legend: {
          orient: 'vertical',
          icon: 'circle', //图例形状
          data: legendData,
          top: 10,
          top: 0,
          right: 0,
          itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
@@ -172,7 +177,7 @@
          radius: 80,
          nameGap: 2, // 图中工艺等字距离图的距离
          splitNumber: 4, // 网格线的个数
          center: ["50%", "65%"], // 图的位置
          center: ["50%", "45%"], // 图的位置

          indicator: indicator,
          splitArea: {

 src/components/echart13.vue

@@ -47,6 +47,7 @@
          textStyle: {
            color: '#fff',
          },
          show: false
        },
        tooltip: {
          trigger: 'axis',
@@ -55,6 +56,7 @@
          },
        },
        grid: {
          top: '10',
          left: '0%',
          right: '0%',
          bottom: '0%',

 src/views/Thematic/index.vue

@@ -2,9 +2,9 @@
  <div class="themaic">
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }"></left>
    <right class="mapright" :style="{ width: rightWidth }"></right>
    <bottom class="mapbottom"></bottom>
    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
    <right class="mapright" :style="{ width: rightWidth }"  ref="mapright"></right>
    <bottom class="mapbottom"  ref="mapbottom"></bottom>
  </div>
</template>