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

TreeWish

2023-02-16 998bcc72127c975ec0ffbfd4fd6cdb055f49fbe4

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

 src/components/Screen/bottom.vue

@@ -32,12 +32,43 @@
          <el-popover placement="top" width="100" trigger="click">
            <!-- 内容 -->
            <span slot="reference">工程展示</span>
            <div class="popover-content">
              <div class="popover-content__header">项目信息</div>
              <div class="popover-content__list">
                <div
                  class="popover-content__list__item"
                  v-for="item in displayProject"
                  :key="item.id"
                  :class="currProject == item.name ? 'active' : ''"
                  :title="item.name"
                  @click="DisplayCurrentProject(item.name)"
                >
                  {{ item.name.length>8?item.name.substring(0,8):item.name }}
                </div>
              </div>
            </div>
          </el-popover>
        </div>
        <div class="bottombtn">
          <el-popover placement="top" width="100" trigger="click">
            <!-- 内容 -->
            <span slot="reference">工程巡视</span>
            <div class="popover-content">
              <div class="popover-content__header">项目信息</div>
              <div class="popover-content__list">
                <div
                  class="popover-content__list__item"
                  v-for="item in FlyProject"
                  :key="item.id"
                  :class="currProject == item.name ? 'active' : ''"
                  :title="item.name"
                  @click="FlyCurrentProject(item.name)"
                >
                  {{ item.name.length>8?item.name.substring(0,8):item.name }}
                </div>
              </div>
            </div>

          </el-popover>
        </div>
      </div>
@@ -75,6 +106,47 @@
          id: "qqxm",
        },
      ],

      displayProject:[
        {
          name:"中俄东线管道工程",
          id:"zedx"
        },
        {
          name:"西气东输三线中断管道工程",
          id:"xqds"
        },
        {
          name:"中缅天然气管道工程",
          id:"zmtrq"
        },
        {
          name:"山东官网新干线",
          id:"sdxgx"
        },
      ],
      FlyProject:[
        {
          name:"中俄东线管道工程",
          id:"zedx"
        },
        {
          name:"西气东输三线中断管道工程",
          id:"xqds"
        },
        {
          name:"中缅天然气管道工程",
          id:"zmtrq"
        },
        {
          name:"山东官网新干线",
          id:"sdxgx"
        },
      ]




    }
  },
  methods: {
@@ -96,6 +168,25 @@
    handlePopoverClick(params) {
      this.currProject = params.name
    },

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

      //飞到指定位置
    },

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

      //开始飞行
    }



  },
}
</script>

 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/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/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>