大屏调整

fuliqi

2024-09-23 22d285974b8c6552b4cb5901d613e7d715d18182

大屏调整

 public/index.html

@@ -12,7 +12,9 @@
  </title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style>
    html,
    html {
      font-size: 14px
    }
    body,
    #app {
      height: 100%;

 src/App.vue

@@ -24,8 +24,19 @@
<style>
#app .theme-picker {
  display: none;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.72916667vw;
}
.el-dialog__body {
  padding: 10px 20px !important;
}
*{
  margin: 0;
  padding: 0;
}
#app {

}
</style>

 src/views/screen/components/lineChart.vue

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

<script>
import * as echarts from "echarts";

export default {
  name: 'lineChart',
@@ -28,68 +27,70 @@
      const that = this
      let option = {
        grid: {
          width: '100%'
          left: '12%',
          right: '5%'
        },
        tooltip: {
          trigger: 'item',
              formatter: function (params) {
          formatter: function (params) {
            let str = '<div><p>' + params.name + '</p></div>'
            str += params.marker + params.seriesName + '：' + params.data
            return str
          },
          textStyle: {
            fontSize: 12
            fontSize: 16
          }
        },

        // 图例组件
        legend: {
          type: 'plain',
              top: 20,
              data: ['已处理工单数', '未处理工单数'],
              textStyle: {
            color: '#A0AEC0'
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0',
            fontSize: 14
          }
        },

        // X轴配置
        xAxis: {
          type: 'category',
              boundaryGap: false,
              axisTick: {
          boundaryGap: false,
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#A0AEC0',
                  type: 'solid'
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#A0AEC0',
                fontSize: 12,
                margin: 20,
                rotate: 30
            fontSize: 14,
            margin: 20,
            rotate: 30
          },
          data: that.name,
        },
        // Y轴配置
        yAxis: {
          type: 'value',
              splitLine: {
          splitLine: {
            lineStyle: {
              color: '#A0AEC0',
                  type: 'dashed'
              type: 'dashed'
            }
          },
          splitNumber: 5,
              axisLine: {
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#A0AEC0',
                fontSize: 12,
                margin: 15
            fontSize: 14,
            margin: 5
          }
        },
        // 系列列表（多个折线图）
@@ -138,6 +139,7 @@
          }
        ]
      }

      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(option)
      window.addEventListener('resize', function () {
@@ -149,9 +151,9 @@
  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        this.name =[]
        this.data1=[]
        this.data2=[]
        this.name = []
        this.data1 = []
        this.data2 = []
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);

 src/views/screen/components/map.vue

@@ -20,184 +20,6 @@
  },
  data () {
    return {
      // geoCoordinates: {
      //   自流井区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   高新区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   大安区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   沿滩区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   贡井区: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   荣县: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ],
      //   富顺县: [
      //     {
      //       value: 12312,
      //       name: '得分'
      //     }
      //   ]
      // },

      // 地图配置
      // option: {
      //   tooltip: {
      //     trigger: 'item',
      //     triggerOn: 'mousemove|click', // 必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
      //     extraCssText: 'border:none;', // 清除tooltip自带颜色
      //     // hideDelay: 2000, // 提示框2秒后小时
      //     formatter: function (params) {
      //       // 自定义tooltip内容
      //       this.fetchData(params.name)
      //       return `Custom Tooltip Content for ${params.name}`
      //     }
      //   },

      //   series: [
      //     {
      //       type: 'map3D',
      //       map: 'zgs',
      //       boxWidth: 100,
      //       regionHeight: 2,

      //       markPoint: {
      //         symbol: 'pin', // 标记点形状
      //         symbolSize: 50, // 标记点大小
      //         data: [
      //           {
      //             name: '标记点1',
      //             coord: ['104.3334', '29.2938'] // 标记点的三维坐标
      //           }
      //           // 可以添加更多标记点
      //         ]
      //       },

      //       // 地图的颜色
      //       itemStyle: {
      //         color: '#8adfff', // 地图板块的颜色
      //         opacity: 0.98, // 图形的不透明度 [ default: 1 ]
      //         borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
      //         borderColor: '#35b5ff' // 图形描边的颜色。[ default: #333 ]
      //       },

      //       realisticMaterial: {
      //         detailTexture: require('../assets/images/face-num-bg3.png'),
      //         textureTiling: 1,
      //         textureOffset: 0,
      //         roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
      //         metalness: 0,
      //         roughnessAdjust: 0
      //       },

      //       shading: 'realistic',

      //       // 标签的相关设置
      //       label: {
      //         show: true, // (地图上的城市名称)是否显示标签
      //         distance: 5,
      //         formatter: function (params) {
      //           return params.name ? params.name : ' '
      //         },
      //         // 标签的字体样式
      //         color: '#fff', // 地图初始化区域字体颜色
      //         fontSize: 16, // 字体大小
      //         fontWeight: '300'
      //       },

      //       // 鼠标 hover 高亮时图形和标签的样式
      //       emphasis: {
      //         label: {
      //           // label 高亮时的配置
      //           show: true,
      //           color: '#fff', // 高亮时标签颜色变为 白色
      //           fontSize: 16 // 高亮时标签字体 变大
      //         },
      //         scale: true,
      //         itemStyle: {
      //           // itemStyle 高亮时的配置
      //           color: '#ffc23e' // 高亮时地图板块颜色改变
      //         }
      //       },

      //       // 地面可以使整个场景看起来更真实，更有模型感。
      //       light: {
      //         main: {
      //           // 场景主光源的设置，在 globe 组件中就是太阳光。
      //           color: '#fff', // 主光源的颜色。
      //           intensity: 0.6, // 主光源的强度。
      //           shadow: true, // 主光源是否投射阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
      //           shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
      //           alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。
      //           beta: 20 // 主光源绕 y 轴，即左右旋转的角度。
      //         },
      //         ambient: {
      //           // 全局的环境光设置。
      //           color: '#fff', // 环境光的颜色。[ default: #fff ]
      //           intensity: 0.45 // 环境光的强度。[ default: 0.2 ]
      //         },
      //         ambientCubemap: {
      //           exposure: 2,
      //           diffuseIntensity: 1,
      //           specularIntensity: 1
      //         }
      //       },

      //       postEffect: {
      //         depthOfField: {
      //           enable: false // 关闭景深效果
      //         }
      //       },

      //       groundPlane: {
      //         show: false, // 是否显示地面
      //         color: '#ffffff' // 地面颜色
      //       },

      //       viewControl: {
      //         projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
      //         autoRotate: false,
      //         dispose: 100,
      //         rotateSensitivity: 0, // 旋转
      //         minBeta: -13,
      //         maxBeta: -13,
      //         zoomSensitivity: 0, // 缩放
      //         panSensitivity: 0, // 平移
      //         center: [0, 0, 0],
      //         alpha: 70, // 倾斜角度
      //         animationDurationUpdate: 1000, // 过渡动画的时长
      //         animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
      //       },
      //       left: '-5%',
      //       top: '5%'
      //     }
      //   ]
      // },
      activerName: null, // 选中的名称
      activerData: [], // 选中的数据
      map: null

 src/views/screen/components/map3.vue

New file
@@ -0,0 +1,421 @@
<template>
  <div class="map-container">
    <div class="map-main-container" id="main"></div>
  </div>
</template>

<script>
import * as chinaJson from '@/assets/map/zigong.json'

export default {
  name: 'mapApp',
  props: {
    geoCoordinates: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myChart: null, // ECharts 实例
      big: 130,
      data: [
        {
          name: '自流井区',
          number: '0',
          value: [104.616237686031, 29.081, 300]
        },
        {
          name: '高新区',
          number: '0',
          value: [104.84, 29.405, 300]
        },
        {
          name: '大安区',
          number: '0',
          value: [105.136, 29.30548885792289, 300]
        },
        {
          name: '沿滩区',
          number: '0',
          value: [104.956237686031, 29.2, 300]
        },
        {
          name: '贡井区',
          number: '0',
          value: [104.436237686031, 29.16048885792289, 300]
        },
        {
          name: '荣县',
          number: '0',
          value: [104.480237686031, 29.40048885792289, 300]
        },
        {
          name: '富顺县',
          number: '0',
          value: [105.12, 29.076, 300]
        }
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.myChart = this.$echarts.init(document.getElementById('main'))
        this.initializeMap()
      }, 100)
    })
  },
  methods: {
    initializeMap() {
      this.updateMapData()
      this.getChinData('自贡市', chinaJson)
    },
    updateMapData() {
      this.data.forEach(item => {
        if (this.geoCoordinates[item.name]) {
          item.number = this.geoCoordinates[item.name].score || '0'
        }
      })
    },
    updateChart() {
      if (this.myChart) {
        const option = this.myChart.getOption();
        // Update the scatter3D series data
        const scatterSeries = option.series.find(s => s.type === 'scatter3D' && s.name !== '散点图');
        if (scatterSeries) {
          scatterSeries.data = this.data;
        }
        this.myChart.setOption(option);
      }
    },
    getChinData(name, jsons) {
      this.num = 1
      this.$echarts.registerMap(name, jsons)
      const myChart = this.myChart
      const that = this
      myChart.clear()
      const option = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}'
        // },
        geo3D: {
          name: name,
          type: 'map',
          map: name,
          left: '-5%',
          top: '5%',
          boxWidth: 100,
          regionHeight: 2,
          zlevel: 5,

          tooltip: {
            show: true,
            trigger: 'item'
          },

          itemStyle: {
            color: '#8adfff',
            opacity: 1,
            borderWidth: 1,
            borderColor: '#008ee0' // 边框颜色为更深的蓝色
          },

          label: {
            show: true, // (地图上的城市名称)是否显示标签
            distance: 5,
            formatter: function (params) {
              return params.name ? params.name : ' '
            },
            // 标签的字体样式
            color: '#fff', // 地图初始化区域字体颜色
            fontSize: 14, // 字体大小
            fontWeight: '300'
          },

          emphasis: {
            label: {
              show: true,
              textStyle: {
                color: '#ffffff' // 高亮文字为亮蓝色
              }
            }
          },

          shading: 'realistic',

          realisticMaterial: {
            detailTexture: require('@/assets/images/face-num-bg3.png'),
            textureTiling: 1,
            textureOffset: 0,
            roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0,
            roughnessAdjust: 0
          },

          viewControl: {
            projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            autoRotate: false,
            dispose: 100,
            rotateSensitivity: 0, // 旋转
            minBeta: -13,
            maxBeta: -13,
            zoomSensitivity: 0, // 缩放
            panSensitivity: 0, // 平移
            center: [0, 0, 0],
            alpha: 70, // 倾斜角度
            animationDurationUpdate: 1000, // 过渡动画的时长
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
          },
          light: {
            main: {
              // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#fff', // 主光源的颜色。
              intensity: 0.6, // 主光源的强度。
              shadow: true, // 主光源是否投射阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
              shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
              alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。
              beta: 20 // 主光源绕 y 轴，即左右旋转的角度。
            },
            ambient: {
              // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.45 // 环境光的强度。[ default: 0.2 ]
            },
            ambientCubemap: {
              exposure: 2,
              diffuseIntensity: 1,
              specularIntensity: 1
            }
          },
          selectedMode: false
        },

        series: [
          {
            name: name,
            type: 'map3D',
            map: name,
            boxWidth: 100,
            regionHeight: 2,
            left: '-5%',
            top: '5%',
            zlevel: 10,

            // tooltip: {
            //   show: true,
            //   trigger: 'item'
            // },

            itemStyle: {
              color: '#8adfff',
              opacity: 1,
              borderWidth: 1,
              borderColor: '#008ee0' // 边框颜色为更深的蓝色
            },

            label: {
              show: false // (地图上的城市名称)是否显示标签
            },

            emphasis: {
              label: {
                show: false,
                textStyle: {
                  color: '#ffffff' // 高亮文字为亮蓝色
                }
              }
            },

            viewControl: {
              projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false,
              dispose: 100,
              rotateSensitivity: 0, // 旋转
              minBeta: -13,
              maxBeta: -13,
              zoomSensitivity: 0, // 缩放
              panSensitivity: 0, // 平移
              center: [0, 0, 0],
              alpha: 70 // 倾斜角度
            }
          },
          {
            name: '散点图',
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            zlevel: 10,

            silent: true,

            itemStyle: {
              color: '#fc840e',
              borderWidth: 1,
              borderColor: '#fff'
            },

            data: [
              {
                name: '自流井区',
                value: [104.665471408, 29.23008885, 300]
              },
              {
                name: '高新区',
                value: [104.805193, 29.3, 300]
              },
              {
                name: '大安区',
                value: [104.90805, 29.345946, 300]
              },
              {
                name: '沿滩区',
                value: [104.80804, 29.200594, 300]
              },
              {
                name: '贡井区',
                value: [104.579106, 29.241427, 300]
              },
              {
                name: '荣县',
                value: [104.3534, 29.3538, 300]
              },
              {
                name: '富顺县',
                value: [104.96, 29.08, 300]
              }
            ]
          },
          {
            type: 'lines3D',
            coordinateSystem: 'geo3D',
            polyline: true,
            lineStyle: {
              color: '#a4ddee',
              width: 1,
              opacity: 1
            },
            data: [
              {
                coords: [
                  [104.665471408, 29.23008885, 300],
                  [104.6, 29.125, 430]
                ]
              },
              {
                coords: [
                  [104.805193, 29.30148885792289, 300],
                  [104.780237686031, 29.39548885792289, 430]
                ]
              },
              {
                coords: [
                  [104.90805, 29.345946, 300],
                  [105.056237686031, 29.33548885792289, 430]
                ]
              },
              {
                coords: [
                  [104.80804, 29.200594, 300],
                  [104.906237686031, 29.20048885792289, 430]
                ]
              },
              {
                coords: [
                  [104.579106, 29.241427, 300],
                  [104.486237686031, 29.19048885792289, 430]
                ]
              },
              {
                coords: [
                  [104.3534, 29.3538, 300],
                  [104.456237686031, 29.39048885792289, 430]
                ]
              },
              {
                coords: [
                  [104.96, 29.08, 300],
                  [105.05, 29.083, 430]
                ]
              }
            ],
            effect: {
              show: true,
              constantSpeed: 10,
              symbol: 'arrow', // 使用箭头指示标志
              trailLength: 0, // 不显示尾迹
              symbolSize: 10
            }
          }
        ]
      }
      // 添加动态标注
      option.series.push({
        type: 'scatter3D',
        coordinateSystem: 'geo3D',
        symbol: 'circle',
        symbolSize: 0,
        data: that.data,

        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          borderColor: 'a4ddee'
        },

        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#c6f4ff',
            fontSize: '16px',
            backgroundColor: 'rgba(25,56,97,1)',
            borderColor: '#a4ddee',
            borderWidth: 0.5,
            borderRadius: 5,
            padding: [8, 15]
          },

          formatter: function (params) {
            return `{style|${params.data.name}\n得分：${params.data.number}}`
          },
          rich: {
            style: {
              fontSize: 16,
              lineHeight: 22
              // 其他需要的样式
            }
          },
          distance: 0 // 标签与点的距离，确保标签不会重叠
        }
      })
      myChart.setOption(option)
      myChart.on('click', function (params) {
        if (params.seriesType === 'map3D') {
          that.$emit('clickMap', params.name);
        }
      })
    },
  },
  watch: {
    geoCoordinates: {
      handler(newValue) {
        this.updateMapData(newValue);
        this.updateChart();
      },
      deep: true
    }
  },
}
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
}

.map-main-container {
  width: 100%;
  height: 100%;
}
</style>

 src/views/screen/components/subheading.vue

@@ -148,7 +148,6 @@

    .title {
      text-align: center;
      font-size: 14px;
      color: #dcf8ff;
      white-space: nowrap;
      overflow: hidden;

 src/views/screen/index.vue

@@ -192,7 +192,7 @@
<script>
import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
import mapApp from '../screen/components/map.vue' // 地图
import mapApp from '../screen/components/map3.vue' // 地图
import {
  getDepartmentData,
  getDeviceData,
@@ -405,7 +405,6 @@
      item2.color = '#ff7b72'
      item2.title = '未处理'
      this.statistics.push(item2)
      console.log( this.statistics)
    },

    videoData() {
@@ -916,8 +915,8 @@
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //justify-content: center;
            //align-items: center;

            .item-facility-icon {
              margin: 0 auto;
@@ -935,9 +934,9 @@
              flex-direction: column;
              justify-content: space-around;
              text-align: center;
              font-size: 14px;
              list-style-type: none;
              padding-left: 0;
              //font-size: 14px;
              //padding-left: 0;

              li:nth-child(1) {
                .value {
@@ -979,7 +978,7 @@
        display: flex;
        flex-direction: column;
        height: 0;
        overflow: hidden;
        //overflow: hidden;

        .title {
          width: 100%;
@@ -1020,9 +1019,11 @@

          .list-title-container {
            width: 100%;
            height: 45px;
            margin: 4px 0 0 0;
            line-height: 45px;
            //height: 45px;
            //margin: 4px 0 0 0;
            //line-height: 45px;
            height: 4.17vh;
            line-height: 4.17vh;
            list-style-type: none;
            display: flex;
            flex-direction: row;
@@ -1095,9 +1096,9 @@

            .list-content-to {
              height: 100%;
              overflow-y: auto;
              overflow-y: hidden;
              overflow-x: hidden;
              padding: 10px 0;
              //padding: 10px 0;
            }

            .item-list {
@@ -1106,19 +1107,22 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              margin: 10px 0;
              margin: 8px 0;
              li {
                width: 25%;
                text-align: center;
                font-size: 14px;
                //font-size: 14px;
                font-size: 0.72916667vw !important;
                color: #dcf8ff;
                flex-shrink: 0;
                flex-grow: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 28px;
                line-height: 28px;
                //height: 28px;
                //line-height: 28px;
                height: 2.59vh;
                line-height: 2.59vh;
              }

              .name {
@@ -1201,7 +1205,8 @@
    }

    .footer-container {
      height: 220px;
      //height: 220px;
      height: 24.15vh;
      box-sizing: border-box;
      position: relative;
      background-image: url("../../assets/images/footer-bg.png");
@@ -1227,19 +1232,10 @@
          position: relative;

          background-image: url("../../assets/images/face-bg.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

          // .face-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }

          .item-face-container {
            position: absolute;
@@ -1247,7 +1243,8 @@
            width: 22.296173%;

            .proportion {
              width: 50px;
              //width: 50px;
              width: 2.60416vw;
              margin: 0 auto;
              color: #00eaff;
              text-shadow: 2px 2px 4px #152944;
@@ -1263,13 +1260,14 @@
                left: 50%;
                top: 53%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                //font-size: 14px;
              }
            }

            .title {
              text-align: center;
              font-size: 12px;
              //font-size: 12px;
              font-size: 0.625vw;
              color: #dcf8ff;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 隐藏超出的内容 */
@@ -1281,7 +1279,8 @@
        .car-container {
          position: relative;
          background-image: url("../../assets/images/car-bg2.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

@@ -1302,6 +1301,7 @@
            font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
            position: absolute;
            z-index: 5;

@@ -1349,7 +1349,8 @@
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
                //font-size: 20px;
                font-size: 1.04166vw;
                font-weight: bold;
                color: #00fcff;
                text-shadow: 2px 2px 4px #152944;
@@ -1359,10 +1360,13 @@
            .item-video-title {
              text-align: center;
              color: #dcf8ff;
              height: 32px;
              font-size: 13px;
              //height: 32px;
              //font-size: 13px;
              //flex-shrink: 0;
              //flex-grow: 0;
              flex-shrink: 0;
              flex-grow: 0;
              height: 3.51851vh;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 显示的行数 */
              -webkit-box-orient: vertical;