大屏改版代码提交

zhangchunxia

2024-05-06 a3bc1499023bfcca59d823aefae8c546e36e7a45

 src/views/largeScreen/component/middleArea.vue

@@ -28,72 +28,63 @@
          <!-- <span class="unit-text">万m³</span> -->
        </div>
      </div>
      <!-- <div v-for="(item,index) in processData" :key="index">
        <div class="num-title">
          <div><span class="high-text">{{ item.firstEle }}</span>{{ item.endEle }}</div>

        </div>
        <div class="num-item">
          <span class="num-style color0" :class="[{ 'num-bg0': s !== '.' && index==0 },{ 'num-bg2': s !== '.' && index==1 },{'color2':index==1}]" v-for="(s, i) in item.count" :key="i">{{ s }}</span>
          <span class="unit-text">{{ item.unit }}</span>
        </div>
      </div> -->
    </div>
    <div>
      <!-- <div id="echartMap" style="width: 500px; height: 500px"></div> -->
      <!--地图-->
      <div id="mapcontainer" ref="mapcontainer" style="width: 9rem; height: 80vh"></div>
      <div class="map-infos">
        <dv-border-box-13>
          <div class="map-title">吉木乃县</div>
          <div class="map-item">
            <div class="item-title">安装水表数量:</div> <div class="item-num">328个</div>
          </div>
          <div class="map-item">
            <div class="item-title">累计用水量:</div> <div class="item-num">2943.8 m³</div>
          </div>
          <div class="map-item">
            <div class="item-title">当前欠费数量:</div><div class="item-num">3 户</div>
          </div>
        </dv-border-box-13>
      </div>
    <div class="item-block height35">
      <dv-border-box-10>
        <div class="echart-title">水表状态</div>
        <div id="yibiaoEchart" :chart-data="chartData" style="height:90%; width:100%"></div>
      </dv-border-box-10>
    </div>
    <div class="item-block">
      <dv-border-box-10>
        <div class="echart-title">近一年用水量</div>
        <left-middle-bottom style="height: 29vh"></left-middle-bottom>
      </dv-border-box-10>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import echartsGL from 'echarts-gl'
import datajson from './jimunai'
import { getScAmount } from '@/api/largeScreen'
// import { getLargeScreenProcessInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
import leftMiddleBottom from './middleAreaBottom'

export default {
  components: {
    leftMiddleBottom
  },
  data() {
    return {
      amountTotal: [], // 今日累计处理量
      amountCurYearTotal: [], // 本年累计处理量
      amountYesterdayTotal: [], // 总累计处理量
      myChart: null,
      stationData: [],
      processData: [],
      data:[
        { name: '托普铁热克乡', centroid: [87.047533,47.875751],value: 100 },
        { name: '托普铁热克镇', centroid: [85.885448,47.439013],value: 100 },
        { name: '吉木乃镇', centroid: [85.882013,47.44893],value: 100 },
        { name: '喀尔交乡', centroid: [86.410528,47.201893],value: 200  },
        { name: '乌拉斯特镇',centroid: [85.782084,47.669236],value: 100 },
        { name: '托斯特乡',  centroid: [86.13412,47.285077],value: 100},
        { name: '恰勒什海乡', centroid: [86.153288,47.535675],value: 100 },
        { name: '别斯铁热克乡',centroid: [85.88913,47.309702],value: 100 },
        { name: '兵团一八六团', centroid: [85.678458,47.556221],value: 100 }
        // 托普铁热克镇、吉木乃镇、喀尔交乡、托斯特乡、兵团一八六团、别斯铁热克乡、恰勒什海乡、托普铁热克乡
      ]
      chart:null,
      chartData:{
        data: [80, 15, 5, 10],
        nameList: ['在线', '离线', '异常', '未上报'],
        newData:[]
      },
      // newData: chartData.data.map((item, idx) => { 
      //   return {
      //       value: item,
      //       name: '师资力量',
      //       unit: 'm²',
      //   }
      // })
    }
  },
  created() {
    this.getScAmount()
    // setTimeout(this.initChart, 5000)
    // this.initChart()
    // this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
    this.chartData.newData = this.chartData.data.map(item => {
      return {
        value: item,
        // name: '水表状态',
        unit:'%',
      } 
    })
  },
  props: {
    baseInfos: {
@@ -102,13 +93,9 @@
    }
  },
  watch: {


  },
  mounted() {
    // this.getData()
    this.$nextTick(() => {
      // this.getStationList()
      this.initCharts()
    })
  },
@@ -128,129 +115,151 @@
        }
      })
    },
    initCharts() {
      const charts = echarts.init(this.$refs['mapcontainer'])
     setOptions({ newData, nameList } = {}) {
      const option = {
        geo: { // 2D地图坐标系
            show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
            map: 'centerMap',
            roam: false, // 禁用缩放、拖拽
            layoutCenter: ['50%', '47%'], // 地图中心位置
            layoutSize: '90%', // 控制地图尺寸（地图的宽度和高度都会改变）
            aspectScale: 0.85, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
            zlevel: 1,
        },
        geo3D: { // 3D地图坐标系
            show: true, // 显示3D地图版块
            map: "centerMap",
            top: "-20",
            regionHeight: 16, // 地图版块厚度
            label: {
              show: true,
              borderRadius: 0,
              distanca: 0,
              textStyle: {
                  fontSize: 14,
                  color: "#C23531", // 地图初始化区域字体颜色
                  borderWidth: 1,
                  borderColor: '#FFFF10',
              }
            },
            itemStyle: {
              // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
              color: "rgba(11,59,121,0.5)", // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
              borderColor: "#2FB5FA", // 图形描边的颜色。[ default: #333 ]
            },
            emphasis: {
              label: {
                  show: true,
                  color: "#fff000",
              },
              itemStyle: {
                  color: "#146fd7",
                  opacity: 0.5,
              },
            },
            light: {
              // 光照阴影
              main: {
                  color: "#FFFFFF", // 光照颜色
                  intensity: 2, // 光照强度
                  shadowQuality: "light", // 阴影亮度
                  shadow: true, // 是否显示阴影
                  alpha: 50,
                  beta: 10,
              },
            },
            viewControl: {
              "projection": "perspective",
              "autoRotate": false,
              "distance": 208, // 控制地图版块的大小
              "alpha": 72, // 地图版块垂直方向的角度
              "beta": 2, // 地图版块水平方向的角度
              rotateSensitivity: 0, // 禁用旋转
              panSensitivity: 0, // 禁用平移
              zoomSensitivity: 0, // 禁用缩放
            },
            zlevel: 2,
        },
        series: [
            { // 动效散点图层，使用2D地图坐标系
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 3,
              rippleEffect: { //涟漪特效
                  period: 4, //动画时间，值越小速度越快
                  brushType: 'stroke', //波纹绘制方式 stroke, fill
                  scale: 10 //波纹圆环最大限制，值越大波纹越大
              },
              symbol: 'circle',
              symbolSize: function (val) {
                  return (5 + val[2] * 5) / 150; //圆环大小
              },
              itemStyle: {
                  normal: {
      grid: {},
      series: newData.map((item, idx) => {
        if (idx === 0) {
            return {
                name: '',
                type: 'gauge', 
                radius: '40%', // 表盘大小
                splitNumber: 5, // 刻度数量
                data: [item],
                center: [`${20 + idx * 20}%`, '40%'],
                splitLine: {
                    show: false,
                },
                progress: {
                    show: true,
                    color: '#2FB5FA'
                  }
              },
              data: [],
            },
        ]

                },
                itemStyle: {
                    color: '#FF8C00',
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 10,
                        color: [
                            [item.value ? item.value / 100 : 0, '#FF8C00'],
                            [1, '#01A0FE'],
                        ],
                    },
                },
                axisLabel: {
                    show: true,
                    distance: -45, // 坐标轴数字位置
                    color: '#888888',
                },
                detail: {
                    offsetCenter: [0, '120%'],
                    fontWeight: 'bold',
                    formatter: function (value) {
                        return `{a|${value + item.unit}}\n{b|${nameList[idx]}}`;
                    },
                    rich: {
                        a: {
                            color: '#01a0fe',
                            fontSize: 12,
                        },
                        b: {
                            fontSize: 14,
                            color: '#888888',
                        },
                    },
                },
                title: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    // fontWeight: 'bolder',
                    fontSize: 14,
                    color: '#1170b7',
                    padding: [0, 10, 0, 10],
                    offsetCenter: ['400%', '200%'],
                    // fontStyle: 'italic'
                    borderColor: 'red',
                    lineHeight: 30,
                    borderRadius: 16,
                    backgroundColor: 'rgba(17,112,183,0.3)',
                },
            };
        }else{
             return {
                name: '',
                type: 'gauge',
                radius: '40%', 
                splitNumber: 5,
                data: [item],
                center: [`${20 + idx * 20}%`, '40%'],
                splitLine: {
                    show: false,
                },
                progress: {
                    show: true,
                },
                itemStyle: {
                    color: '#FF8C00',
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 10,
                        color: [
                            [item.value ? item.value / 100 : 0, '#FF8C00'],
                            [1, '#01A0FE'],
                        ],
                    },
                },
                axisLabel: {
                    show: true,
                    distance: -45,
                    color: '#888888',
                },
                detail: {
                    offsetCenter: [0, '120%'],
                    fontWeight: 'bold',
                    formatter: function (value) {
                        return `{a|${value + item.unit}}\n{b|${nameList[idx]}}`;
                    },
                    rich: {
                        a: {
                            color: '#01a0fe',
                            fontSize: 12,
                        },
                        b: {
                            fontSize: 14,
                            color: '#888888',
                        },
                    },
                },
                title: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    // fontWeight: 'bolder',
                    show:false,
                    fontSize: 14,
                    color: '#1170b7',
                    padding: [0, 10, 0, 10],
                    offsetCenter: ['0', '0%'],
                    // fontStyle: 'italic'
                    borderColor: 'red',
                    lineHeight: 30,
                    borderRadius: 16,
                    backgroundColor: 'rgba(17,112,183,0.3)',
                },
            };
        }
    }),
      }
  var mapFeatures = this.data
   console.log('mapFeatures',mapFeatures)
   var geoCoordMap = {};
   mapFeatures.forEach(function (v) {
      // 地区名称
      var name = v.name;
      // 地区经纬度
      geoCoordMap[name] = v.centroid;
   });

   var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
         var geoCoord = geoCoordMap[data[i].name];
         if (geoCoord) {
            res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value)
            });
         }
      }
      console.log(res)
      return res;
   };
   // alert(JSON.stringify(convertData(areaMapData)));
   option.series[0].data = convertData(this.data); // 设置动效散点数据
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap('centerMap', datajson)
      charts.setOption(option)

      this.chart.setOption(option) 
     },
    initCharts() {
      this.chart = echarts.init(document.getElementById('yibiaoEchart'))
      this.setOptions(this.chartData)
    }
  }
}
@@ -309,35 +318,32 @@
  }

}
.map-infos {
    // border: 1px dashed #ddd;
    width: 4.0rem;
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    // margin-top: 0.5rem;
    font-size: .2rem;
    color: #d0cbcb;
  }

.map-title {
  padding: 0.15rem;
  text-align: center;
}
.map-item {
  display: flex;
  padding: 0.15rem;
  font-size: .2rem;
  align-items: center;
  .item-title {
    width: 50%;
    font-size: 0.1rem;
    letter-spacing: 2px;
.item-block {
  width: 90%;
  text-align: center;
  height: 38vh;
  margin: 0.35rem auto 0.5rem;
  .panel .panel-header {
    background-image: none !important;
  }
  .item-num {
    font-family: 'screen-font';
  .echart-title {
    color: white;
    font-size: 0.18rem;
    text-align: left;
    padding: 0.1rem;
  }
}
.dv-border-box-13 {
  padding: .2rem;
.height35 {
  height: 31vh;
}
</style>
<style>
.dv-border-box-10 .dv-border-svg-container {
  display: none
}
</style>