大屏改版代码提交

zhangchunxia

2024-05-06 a3bc1499023bfcca59d823aefae8c546e36e7a45

大屏改版代码提交

 config.js

@@ -10,3 +10,4 @@
        baseUrl = "http://xxxxt"
}
export default baseUrl;
    

 src/api/largeScreen.js

@@ -18,7 +18,7 @@
}
// 获取近一年用水量
export function getEchartData (data){
  return request({
  return request({ 
    url: '/waterScreen/ScYearAmount!get.action',
    method: 'POST',
    data
@@ -26,14 +26,14 @@
}
// 获得累计水量，本年累计水量，昨日水量
export function getScAmount (data){
  return request({
  return request({ 
    url: '/waterScreen/ScAmount!get.action',
    method: 'POST',
    method: 'POST', 
    data
  })
}
// 获得报警信息
export function getScAlarm (data){
export function getScAlarm (data){ 
  return request({
    url: '/waterScreen/ScAlarm!get.action',
    method: 'POST',

 src/components/echarts/echarsBar.vue

@@ -50,7 +50,7 @@
          }
        },
        grid: {
          left: '5%',
          left: '5%', 
          top: '10%',
          right: '10%',
          bottom: '3%',
@@ -93,8 +93,7 @@
      for (let i = 1; i < this.param.seriesCount; i++) {
        this.data.series[i] = {
          stack: this.param.seriesStack[i],
          name: this.param.seriesName[i],
          type: this.param.seriesType[i],
          name: this.param.seriesName[i], 
          data: this.param.seriesData[i],
          color: this.param.seriesColorData[i],
          yAxisIndex: this.param.yAxisIndexData[i]
@@ -107,7 +106,7 @@
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        if (this.chart) {
        if (this.chart) {  
          if (newVal) {
            if (newVal.chartType === 'transverse') {
              this.transverse()

 src/utils/request.js

@@ -25,7 +25,7 @@
  //    request.headers.common['X-HTY-Token'] = token
  //  }
  return request
},(error) =>{
},(error) =>{ 
  console.error('request.js request error：--------------:', error)
  return Promise.reject(error);
})

 src/views/largeScreen/component/leftBottom.vue

@@ -1,7 +1,7 @@
<template>
  <!-- 污染物消减量 -->
  <div class="panel">
    <div class="panel-header">地区水管理员</div>
    <div class="panel-header">运行状态</div>
    <!-- <div>
      <line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart>
    </div> -->
@@ -23,18 +23,18 @@
  data() {
    return {
      config: {
        header: ['地区', '水管员姓名', '联系方式'],
        header: ['用水户', '阀门状态', '上报时间'],
        data: [
          ['恰勒什海乡', '张三', '13821200000'],
          ['恰勒什海乡', '王大海', '行2列3'],
          ['恰勒什海乡', '李', '行3列3'],
          ['恰勒什海乡', '行4列2', '13821200000'],
          ['恰勒什海乡', '行5列2', '行5列3'],
          ['恰勒什海乡', '行6列2', '行6列3'],
          ['恰勒什海乡', '行7列2', '13821200000'],
          ['恰勒什海乡', '行8列2', '行8列3'],
          ['恰勒什海乡', '行9列2', '行9列3'],
          ['恰勒什海乡', '行10列2', '行10列3']
          ['二号井带阀', '阀关', '2024-04-29 00:08:50'],
          ['二号井带阀', '阀关', '2024-04-29 00:07:54'],
          ['二号井带阀', '阀关', '2024-04-26 00:07:23'],
          ['二号井带阀', '阀关', '2024-04-29 00:05:47'],
          ['一号井带阀', '阀关', '2024-04-29 00:04:48'],
          ['一号井带阀', '阀关', '2024-04-29 00:03:47'],
          ['一号井带阀', '阀关', '2024-04-29 00:02:47'],
          ['一号井带阀', '阀关', '2024-04-29 00:01:49'],
          ['一号井带阀', '阀关', '2024-04-29 00:02:05'],
          ['二号井带阀', '阀关', '2024-04-29 00:00:44']
        ],
        headerBGC: '',
        oddRowBGC: '#0b283e',

 src/views/largeScreen/component/leftMiddle.vue

@@ -1,7 +1,7 @@
<template>
  <!-- 污染物消减量 -->
  <div class="panel">
    <div class="panel-header">近一年用水量统计</div>
    <div class="panel-header">近一年充值金额</div>
    <div>
      <line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart>
    </div>
@@ -13,18 +13,20 @@
export default {
  components: {
    // mainEcharts,
    lineChart
    lineChart,
  },
  data() {
    return {
      datetiems: [],
      chartData: {
        chartType:'portrait',
        time: [],
        // time: ['2024-05','2024-04','2024-03','2024-02','2024-01','2023-12'],
        Data: [
          {
            // data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
            data: [],
            type: 'line',
            data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
            // data: [],
            type: 'bar',
            // name: 'BOD',
            connectNulls: true,
            smooth: true,
@@ -44,7 +46,7 @@
  },
  mounted() {
    this.getEchartData()
    // this.chartData.time = this.getlastYearMonth().reverse()
    this.chartData.time = this.getlastYearMonth().reverse()
  },
  methods: {
    getEchartData() {

 src/views/largeScreen/component/leftTop.vue

@@ -10,7 +10,7 @@
          <div class="item-value"><span class="item-num">{{ item.count }}</span> {{ item.unit }}</div>
        </div>
      </div> -->
      <div class="info-items flex-item">
      <!-- <div class="info-items flex-item">
        <div>
          <div class="item-label" style="white-space: nowrap">用水户数</div>
          <div class="item-value bg-b"><span class="item-num">{{ infos.clientTotal }}</span></div>
@@ -27,7 +27,7 @@
          <div class="item-label" style="white-space: nowrap">今日充值</div>
          <div class="item-value bg-b"><span class="item-num">{{ infos.chargeTotal }}</span></div>
        </div>
      </div>
      </div> -->
      <div class="info-items flex-item">
        <div>
          <div class="item-label" style="white-space: nowrap">昨日上报</div>

 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>

 src/views/largeScreen/component/middleAreaBottom.vue

New file
@@ -0,0 +1,98 @@
<template>
  <!-- 污染物消减量 -->
  <div class="panel">
    <!-- <div class="panel-header">近一年用水量统计</div> -->
    <div>
      <line-chart :chart-data="chartData" :width="'100%'" :height="'29vh'"></line-chart>
    </div>
  </div>
</template>
<script>
import lineChart from '@/components/echarts/lineChart'
import { getEchartData } from '@/api/largeScreen'
export default {
  components: {
    // mainEcharts,
    lineChart
  },
  data() {
    return {
      datetiems: [],
      chartData: {
        time: [],
        // time: ['2024-05','2024-04','2024-03','2024-02','2024-01','2023-12'],
        Data: [
          {
            data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
            // data: [],
            type: 'line',
            // name: 'BOD',
            connectNulls: true,
            smooth: true,
            areaStyle: {}
          }
        ],
        config: {
          // name: ['BOD', 'TP', 'TN', 'NH3-N'],
          color: ['#5470c6'],
          textStyleColor: '#fff',
          XlineColor: '#022C5A',
          YlineColor: '#022C5A',
          xRotate: 30
        }
      }
    }
  },
  mounted() {
    this.getEchartData()
    this.chartData.time = this.getlastYearMonth().reverse()
  },
  methods: {
    getEchartData() {
      getEchartData({orgTag: 'dy'}).then((res) => {
        if (res.succ == 1) {
          res.amounts.forEach(ele=>{
            this.chartData.time.push(ele.yyyyMm)
            this.chartData.Data[0].data.push(ele.amount)
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
  getlastYearMonth() {
    // 1、封装方法
    var result = [];
    for (var i = 0; i < 12; i++) {
        var d = new Date();
        d.setDate(1);
        d.setMonth(d.getMonth() - i-1); // 获取上个月往前12个月，所以-1
        var m = d.getMonth() + 1;
        m = m < 10 ? "0" + m : m; //在这里可以自定义输出的日期格式
        result.push(d.getFullYear() + "-" + m); //result.push(d.getFullYear() + "年" + m + '月');
    }
    return result; // return 创建好的日期数组
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题
.info-title {
  height: 4.4vh;
  background: url('../../../image/screen/bg_title.png') no-repeat;
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'screen-font';
  margin-bottom: 2%;
  .info-title-text {
    padding-left: 2vw;
    font-size: 1rem;
  }
}
</style>

 src/views/largeScreen/component/middleAreajimunai.vue

New file
@@ -0,0 +1,343 @@
<template>
  <div style="position:relative">
    <div style="display: flex; justify-content: space-around; margin-bottom: 1vh">
      <div>
        <div class="num-title">
          <div><span class="high-text">总</span>累计用水量</div>
        </div>
        <div class="num-item">
          <span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
          <!-- <span class="unit-text">m³</span> -->
        </div>
      </div>
      <div>
        <div class="num-title">
          <div><span class="high-text">本</span>年度累计用水量</div>
        </div>
        <div class="num-item">
          <span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
          <!-- <span class="unit-text">万m³</span> -->
        </div>
      </div>
      <div>
        <div class="num-title">
          <div><span class="high-text">昨</span>日累计用水量</div>
        </div>
        <div class="num-item">
          <span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
          <!-- <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>
  </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'
export default {
  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 }
        // 托普铁热克镇、吉木乃镇、喀尔交乡、托斯特乡、兵团一八六团、别斯铁热克乡、恰勒什海乡、托普铁热克乡
      ]
    }
  },
  created() {
    this.getScAmount()
    // setTimeout(this.initChart, 5000)
    // this.initChart()
    // this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
  },
  props: {
    baseInfos: {
      type: Object,
      default: () => {}
    }
  },
  watch: {


  },
  mounted() {
    // this.getData()
    this.$nextTick(() => {
      // this.getStationList()
      this.initCharts()
    })
  },
  methods: {
    getScAmount() {
      const param = {"orgTag":"dy"}
      getScAmount(param).then(res=>{
        if (res.succ == 1) {
          this.amountTotal = res.amountTotal.toString().split("")
          this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
          this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    initCharts() {
      const charts = echarts.init(this.$refs['mapcontainer'])
      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: {
                    show: true,
                    color: '#2FB5FA'
                  }
              },
              data: [],
            },
        ]

      }
  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)

    }
  }
}
</script>
<style lang="scss" scoped>
.num-title {
  color: #fff;
  font-family: 'screen-font';
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  .high-text {
    font-size: 0.24rem;
    margin-right: 0.05rem;
  }
  .unit-text {
    font-size: 0.12rem;
    font-family: 'element-icons';
  }
}

.num-item {
  display: flex;
  // justify-content: space-between;
  overflow: hidden;
  align-items: flex-end;
  .num-style {
    font-size: 0.36rem;
    font-family: 'screen-font';
    padding: 0.05rem;
    background-size: 100% 100% !important;
  }
  .num-bg0 {
    background: url('../../../image/screen/bg_num_blue.png') no-repeat;

  }
  .num-bg1 {
    background: url('../../../image/screen/bg_num_green.png') no-repeat;
  }
  .num-bg2 {
    background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
  }
  .color0 {
    color: #36a8ff;
  }
  .color1 {
    color: #00f170;
  }
  .color2 {
    color: #04ddff;
  }
  .unit-text {
    color: #fff;
    margin-left: 5px;
  }

}
.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-num {
    font-family: 'screen-font';
  }
}
.dv-border-box-13 {
  padding: .2rem;
}
</style>

 src/views/largeScreen/component/rightBottom.vue

@@ -5,8 +5,8 @@
      小程序信息
    </div>
    <div class="img-container">
      <!-- <img class="img-items" src="../../../image/screen/xiaochengxuma.jpg" alt=""> -->
      <img class="img-items" :src="wxMiniQrClientUrl" alt="">
      <img class="img-items" src="../../../image/screen/xiaochengxuma.jpg" alt="">
      <!-- <img class="img-items" :src="wxMiniQrClientUrl" alt=""> -->
    </div>
  </div>
</template>

 src/views/largeScreen/component/rightMiddle.vue

@@ -6,20 +6,20 @@
    </div>
      <!-- <line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart> -->
       <div class="flex panel-body" style="flex-wrap: wrap;">
          <div class="info-items flex-item">
          <!-- <div class="info-items flex-item">
            <div class="info-img"><img src="../../../image/screen/image_厕所.png" alt=""></div>
            <div>
              <div class="item-label" style="white-space: nowrap">48小时未用水</div>
              <div class="item-value"><span class="item-num">{{ alarmInfo.no48AmountTotal }}</span></div>
            </div>
          </div>
          <div class="info-items flex-item">
          </div> -->
          <!-- <div class="info-items flex-item">
            <div class="info-img"><img src="../../../image/screen/image_水质.png" alt=""></div>
            <div>
              <div class="item-label" style="white-space: nowrap">阀门关闭报警</div>
              <div class="item-value"><span class="item-num">{{ alarmInfo.valveTotal }}</span></div>
            </div>
          </div>
          </div> -->
          <div class="info-items flex-item">
            <div class="info-img"><img src="../../../image/screen/image_巡检.png" alt=""></div>
            <div>

 src/views/largeScreen/component/rightTophubiao.vue

New file
@@ -0,0 +1,191 @@
<template>
  <!-- 运营概况 -->
  <div class="panel">
    <div class="panel-header">运维数据</div>
    <div>
        <div>
            <div class="num-title">
            <div><span class="high-text">总</span>累计用水量</div>
            </div>
            <div class="num-item">
            <span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
            <!-- <span class="unit-text">m³</span> -->
            </div>
        </div>
        <div>
            <div class="num-title">
                <div><span class="high-text">本</span>年度累计用水量</div>
                </div>
                <div class="num-item">
                <span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
                <!-- <span class="unit-text">万m³</span> -->
            </div>
        </div>
        <div>
            <div class="num-title">
                <div><span class="high-text">昨</span>日累计用水量</div>
                </div>
                <div class="num-item">
                <span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
                <!-- <span class="unit-text">万m³</span> -->
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { getScAmount } from '@/api/largeScreen'
export default {
  name: 'RightTop',
  props: {
    baseInfos: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      devopsData: []
    }
  },
  watch: {
    baseInfos: {
      handler(newValue) {
        this.baseInfos = newValue
      },
      immediate: true
    }
  },
  created() {
    this.getScAmount()
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getScAmount() {
      const param = {"orgTag":"dy"}
      getScAmount(param).then(res=>{
        if (res.succ == 1) {
          this.amountTotal = res.amountTotal.toString().split("")
          this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
          this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.num-title {
  color: #fff;
  font-family: 'screen-font';
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  .high-text {
    font-size: 0.24rem;
    margin-right: 0.05rem;
  }
  .unit-text {
    font-size: 0.12rem;
    font-family: 'element-icons';
  }
}

.num-item {
  display: flex;
  // justify-content: space-between;
  overflow: hidden;
  align-items: flex-end;
  .num-style {
    font-size: 0.36rem;
    font-family: 'screen-font';
    padding: 0.05rem;
    background-size: 100% 100% !important;
  }
  .num-bg0 {
    background: url('../../../image/screen/bg_num_blue.png') no-repeat;

  }
  .num-bg1 {
    background: url('../../../image/screen/bg_num_green.png') no-repeat;
  }
  .num-bg2 {
    background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
  }
  .color0 {
    color: #36a8ff;
  }
  .color1 {
    color: #00f170;
  }
  .color2 {
    color: #04ddff;
  }
  .unit-text {
    color: #fff;
    margin-left: 5px;
  }

}
  .panel-body{
    justify-content: space-around;
  }
  .info-items-top {
    width: 3.4rem;
    margin-bottom: .3rem;
    font-size: .14rem;
    text-align: center;
    .item-text {
      margin-top: 0.2rem;
      color: #fff;
    }
  }

  .info-items{
    width: 1.36rem;
    margin-bottom: .1rem;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    text-align: center;
    font-size: .14rem;
    .item-text {
      margin-top: 0.3rem;
      color: #fff;
    }
    .info-img {
      width: .6rem;
      height: .6rem;
      img{
        width: 100%;
      }
    }
    .item-label {
      width: .64rem;
      font-size: .14rem;
      color: #fff;
    }
    .item-value {
      font-size: .1rem;
      color: #fff;
    }
    .item-num {
      font-family: 'screen-font';
      font-size: .20rem;
    }
  }
  .dv-decoration-9 {
    color: #fff;
    width: 1.36rem;
    height: 0.26rem;
  }

</style>

 src/views/largeScreen/index.vue

@@ -3,7 +3,8 @@
    <div class="content-head">
      <div class="content-titles">
        <div class="img-container">
          <img :src="titleUrl" alt="吉木乃县人饮项目监测平台">
          <!-- <img :src="titleUrl" :alt="titleAlt"> -->
          {{titleAlt}}
        </div>

        <!-- <img style="width: 100%" src="../../image/screen/image_head.png" alt="" /> -->
@@ -22,9 +23,10 @@
      <div class="content-body flex" style="padding: 0 0.1rem">
      <!-- 左侧内容 -->
      <div class="flex-item" style="width: 4.8rem">
        <left-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></left-top>
        <left-top :baseInfos="baseInfos" class="item-area" style="height: 29vh"></left-top>
        <left-middle class="item-area" style="height: 29vh"></left-middle>
        <left-bottom class="item-area" style="height: 29vh"></left-bottom>
        <!-- <left-bottom class="item-area" style="height: 29vh"></left-bottom> -->
        <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
      </div>
      <!-- 中间部分 -->
      <div class="flex-main" style="width: 9.2rem">
@@ -32,9 +34,11 @@
      </div>
      <!-- 右侧内容 -->
      <div class="flex-item" style="width: 4.8rem">
        <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
        <!-- <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top> -->
        <!-- <right-tophubiao :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-tophubiao> -->
        <right-middle class="item-area" style="height: 29vh"></right-middle>
        <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 29vh"></right-bottom>
        <left-bottom class="item-area" style="height: 29vh"></left-bottom>
        <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 24vh"></right-bottom>
      </div>
    </div>
  </div>
@@ -42,11 +46,13 @@
<script>
import leftTop from './component/leftTop'
import leftMiddle from './component/leftMiddle'
import leftBottom from './component/leftBottom'
import middleArea from './component/middleArea'
import leftBottom from './component/leftBottom.vue'
import rightTop from './component/rightTop'
import middleArea from './component/middleArea'
import rightTophubiao from './component/rightTophubiao'
import rightMiddle from './component/rightMiddle'
import rightBottom from './component/rightBottom'

import './index.scss'

import { getProjectInfo } from '@/api/largeScreen'
@@ -59,8 +65,9 @@
    leftTop,
    leftMiddle,
    leftBottom,
    middleArea,
    rightTop,
    middleArea,
    rightTophubiao,
    rightMiddle,
    rightBottom
  },
@@ -90,6 +97,7 @@
      fullScreen: false,
      baseInfos: {}, // 项目基本信息&运营概况
      titleUrl: '',
      titleAlt: '',
      wxMiniQrClientUrl: '' // 小程序信息
    }
  },
@@ -109,7 +117,6 @@
    },
    // 全屏
    toggleFullScreen() {
      console.log(document.fullscreenElement)
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
@@ -127,6 +134,9 @@
    getProjectInfo() {
      getProjectInfo({orgTag: 'dy'}).then((res) => {
        if(res.succ==1){
          console.log('........', res)
          
          this.titleAlt = res.title
          this.titleUrl = res.wxMiniQrManageUrl || ''
          this.wxMiniQrClientUrl = res.wxMiniQrClientUrl || ''
        }else{

 src/views/largeScreen/indexijmunai.vue

New file
@@ -0,0 +1,248 @@
<template>
  <div class="container">
    <div class="content-head">
      <div class="content-titles">
        <div class="img-container">
          <!-- <img :src="titleUrl" alt="吉木乃县人饮项目监测平台"> -->
          吉木乃县人饮项目监测平台
        </div>

        <!-- <img style="width: 100%" src="../../image/screen/image_head.png" alt="" /> -->
      </div>
      <div class="time-head">
        <div class="time-head-content">
          <span>{{ this.time }}</span> {{ this.date }} {{ this.week }}
        </div>
      </div>
      <div class="icon-items">
        <div @click="toggleFullScreen" class="fullscreen"></div>
        <!-- <div class="logout" @click="goBack"></div> -->
      </div>
    </div>
    <!-- <div class="content-body flex" style="padding: 0 0.1rem; height: 100%"> -->
      <div class="content-body flex" style="padding: 0 0.1rem">
      <!-- 左侧内容 -->
      <div class="flex-item" style="width: 4.8rem">
        <left-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></left-top>
        <left-middle class="item-area" style="height: 29vh"></left-middle>
        <left-bottom class="item-area" style="height: 29vh"></left-bottom>
      </div>
      <!-- 中间部分 -->
      <div class="flex-main" style="width: 9.2rem">
        <middle-area :baseInfos="baseInfos"></middle-area>
      </div>
      <!-- 右侧内容 -->
      <div class="flex-item" style="width: 4.8rem">
        <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
        <right-middle class="item-area" style="height: 29vh"></right-middle>
        <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 29vh"></right-bottom>
      </div>
    </div>
  </div>
</template>
<script>
import leftTop from './component/leftTop'
import leftMiddle from './component/leftMiddle'
import leftBottom from './component/leftBottom'
import middleArea from './component/middleArea'
import rightTop from './component/rightTop'
import rightMiddle from './component/rightMiddle'
import rightBottom from './component/rightBottom'
import './index.scss'

import { getProjectInfo } from '@/api/largeScreen'

document.documentElement.style.fontSize = '20px'

export default {
  name: 'LargeScreen',
  components: {
    leftTop,
    leftMiddle,
    leftBottom,
    middleArea,
    rightTop,
    rightMiddle,
    rightBottom
  },
  created() {
    document.documentElement.style.fontSize = (window.innerWidth / 1920) * 100 + 'px'
    // 12px => 0.12rem
    // 200px => 2rem
    // this.dateFormat()
    this.timer = setInterval(() => {
      this.dateFormat()
    }, 1000)
    this.getProjectInfo()
  },
  beforeDestroy() {
    document.documentElement.style.fontSize = this.originalFontSize
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  data() {
    return {
      originalFontSize: document.documentElement.style.fontSize,
      timer: null,
      time: '',
      date: '',
      week: '',
      fullScreen: false,
      baseInfos: {}, // 项目基本信息&运营概况
      titleUrl: '',
      wxMiniQrClientUrl: '' // 小程序信息
    }
  },
  methods: {
    dateFormat() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()

      this.date = year + '-' + month + '-' + day + ' '
      this.time = hours + ':' + minutes + ':' + seconds
      this.week = '星期' + '日一二三四五六'.charAt(date.getDay())
    },
    // 全屏
    toggleFullScreen() {
      console.log(document.fullscreenElement)
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
      this.fullScreen = !this.fullScreen
    },
    // 退出
    goBack() {
      this.$router.go(-1)
    },
    // 获取项目信息
    getProjectInfo() {
      getProjectInfo({orgTag: 'dy'}).then((res) => {
        if(res.succ==1){
          this.titleUrl = res.wxMiniQrManageUrl || ''
          this.wxMiniQrClientUrl = res.wxMiniQrClientUrl || ''
        }else{
          this.$message({
            type: 'error',
            message: res.message
          })
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '../../font/font.css';
.container {
  // width: 100vw;
  height: 100vh;
  width: 100%;
  // height: 100%;
  background: url('../../image/screen/image_background.png') no-repeat fixed center;
  background-size: 100% 100%;
  // 标题
  .content-head {
    height: 10vh;
    // border-bottom: 1px dashed #707070;
    // margin-bottom: 15px;
    position: relative;
    // line-height: 10vh;
  }
  .content-titles {
    text-align: center;
    font-family: 'LED-FONT';
    font-size: .6rem;
    color: #fff;
    // padding-top: 10px;
    .img-container {
      width: 60%;
      height: 10vh;
      margin: 0 auto;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .time-head {
    color: #fff;
    position: absolute;
    left: 0.2rem;
    top: 0;
    width: 20rem;
    padding: 0.13rem 0;
    font-size: 0.12rem;
    .time-head-content {
      width: 2.8rem;
      height: 0.5rem;
      background: url('../../image/screen/bg_time.png') no-repeat;
      background-position: center center;
      background-size: contain;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      & span {
        display: inline-block;
        width: 1.2rem;
        font-size: 20px;
        font-family: Impact-Regular, Impact;
        font-weight: 400;
        letter-spacing: 0.04rem;
      }
    }
    .time-item {
      font-size: 1rem !important;
      padding-right: 5px;
    }
  }
  .icon-items {
    position: absolute;
    top: 13px;
    right: 0.12rem;
    .fullscreen {
      float: left;
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.11rem;
      cursor: pointer;
      background: url('../../image/screen/bg_button@2x.png') no-repeat;
      background-position: center center;
      background-size: 255% 255%;
    }
    .fullscreen:hover {
      background: url('../../image/screen/bg_button_hover@2x.png') no-repeat;
      background-position: center center;
      background-size: 255% 255%;
    }
    .logout {
      float: left;
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.11rem;
      background: url('../../image/screen/bg_button_exit@2x.png') no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
    .logout:hover {
      background: url('../../image/screen/bg_button_exit_hover@2x.png') no-repeat;
      background-position: center center;
      background-size: 100% 100%;
    }
  }
  // 内容
  .item-area {
    margin-bottom: 15px;
  }
}
</style>