station-test-ui/src/views/screen/index.vue

<template>
<div id="content">
  <el-carousel indicator-position="none" :autoplay="false">
    <el-carousel-item v-for="item in 1" :key="item">
   
        <div v-if=" item==1 "> 
             <previewV1 
             :date='date'
             :nowWeek='nowWeek' 
             :workData='workData' 
             :alarmData='alarmData' 
             :deviceStatusData='deviceStatusData' 
             :pieStateOptions='pieStateOptions'
             :pieFaultOptions='pieFaultOptions'
             :pieDeviceOptions='pieDeviceOptions'
             :pieOptions='pieOptions'
             :pieRightOptions='pieRightOptions'
             :pieCenterOptions='pieCenterOptions'
             :barPlanOptions='barPlanOptions'
             :barOptions='barOptions'
             :lineOptions='lineOptions'
             :mapOptions='mapOptions'
            />
        </div>
       <!-- <div v-else> 
             <previewV2
             :date='date'
             :nowWeek='nowWeek' 
             :alarm_data='alarm_data' 
             :alarmData='alarmData' 
             :deviceStatusData='deviceStatusData' 
             :netPieOptions='netPieOptions'
             :barPlanOptions='barPlanOptions'
             :barOptions='barOptions'
             :lineOptions='lineOptions'
             :barRealtimeAlarmOptions='barRealtimeAlarmOptions'
             :subRealtimeAlarmOptions='subRealtimeAlarmOptions'
             />
        </div> -->
  

       
    </el-carousel-item>
  </el-carousel>
</div>
</template>
<script>
import previewV1 from "./preview_v1";
import previewV2 from "./preview_v2";


export default {
  name: "screen_screen",
  components: {
    previewV1,
    previewV2,
  },
  data() {
    return {
      data:[],
      date: this.initDate(),//实时时间
      nowWeek:'',
  
      netPieData:[],
      workData:[
        {
          'number': 'A0001B',
          'position': '固定轴—机座',
          'user': '员工1'
        },{
          'number': 'A0001B',
          'position': '固定轴—机座',
          'user': '员工1'
        },{
          'number': 'A0001B',
          'position': '固定轴—机座',
          'user': '员工1'
        },{
          'number': 'A0001B',
          'position': '固定轴—机座',
          'user': '员工1'
        },{
          'number': 'A0001B',
          'position': '固定轴—机座',
          'user': '员工1'
        },
      ],
      mapData: [],//地图数据
      mapData1: [],//地图数据
      mapData2: [],//地图数据
      alarmData: [],//实时告警数据
      PlanBarxAxisData:['1月','2月','3月','4月','5月','6月','7月'],//频繁告警区域X轴
      PlanBarData: [70,42,28,23,45,23,52],//频繁告警区域数据
      // fengxAxisData:['总数','在线','异常'],//液压泵设备统计X轴
      fengTypeData:[
        {
          'value': 150,
          'name': '新增'
        }, {
          'value': 37,
          'name': '异常'
        },
      ],//井类型数据
      barTypexAxisData:['一季度','二季度','三季度','四季度'],//液压泵设备统计X轴
      barTypeData:[100,76,24,20],//井类型数据
      lineAlarmxAxisData:[],//月告警曲线图X轴
      lineAlarmData:[],//月告警曲线图数据
      deviceStatusData:[],//设备状态统计数据
      pieOptions: {},
      pieStateOptions:{},
      pieFaultOptions:{},
      pieRightOptions:{},
      pieCenterOptions:{},
      pieDeviceOptions:{},
      netPieOptions:{},
      barPlanOptions: {},
      RealAlarmBarData:[],
      RealAlarmBarxAxisData:[],
      barRealtimeAlarmOptions:{},//当前告警数统计 
      subRealAlarmBarData:[],
      subRealAlarmBarxAxisData:[],
      subRealtimeAlarmOptions:{},//分体告警
      barOptions: {},
      lineOptions:{},
      mapOptions: {},
      signalColor:[],
      netStateColor:[],
      deviceTotal:'',
    };
  },
  methods: {
    goback(){  
      this.$router.go(-1)
    },
     getNetPieOptions() {
      return {
        color: this.netStateColor,
        title: {
          text: "设备状态",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 30,
         
          textStyle: {
            color: "#FFF"
          }
        },
        series: [
          {
            name: "设备状态",
            type: "pie",
            radius: ["45%", "60%"], // 内外半径
            left: 200,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            center: ['10%', '50%'],
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              
              }
            },
            labelLine: {
              show: false
            },
            data: this.netPieData
          }
        ]
      };
    },
    getPieDeviceOptions(){
      return {
        title: {
                text: "故障设备状态",
                textStyle: {
                  fontWeight: "600",
                  fontSize: "18",
                  color: "#3fd5f1"
                }
        },
        color:['#FE7E00','#FEC400','#22DACE'],
        tooltip: {},
        legend: {
            x : '50%',
            y : '38%',
            textStyle : {
              color:'#FFF',
            },
            orient : 'vertical',
            data:['液压泵','液压扳手','中空液压扳手'],
            formatter: function(name) {
                var index = 0;
                var clientlabels =['液压泵','液压扳手','中空液压扳手']
                var clientcounts = [400,300,200];
                clientlabels.forEach(function(value,i){
                  if(value == name){
                        index = i;
                  }
                });
                return name + "  " + clientcounts[index];
            }
        },
    
        calculable : false,
        series: [{
    
            name: '故障设备',
            type: 'pie',
            radius: ["35%", "60%"], // 内外半径
            center: ['25%', '55%'],
            startAngle:90,  //开始 的旋转角度
    
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'inner'
    
                    },
                    labelLine: {
                        show: false,
                    }
                }
            },
            data: [
                {value:400, name:'液压泵'},
                {value:300, name:'液压扳手'},
                {value:200, name:'中空液压扳手'},
 
            ]
    
        }
        ]
    
      };
    },
    getpieRightOptions(){
      return  {
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: "{a} : {c} ({d}%)"
        },
        legend: {
          show:false
        },
        //  color: ['#546570', '#c4ccd3'],
        // color: ['rgb(255,159,127)', 'rgb(50,197,233)'],
        // legend: {
        //   orient: 'vertical',
        //   x: '35%',
        //   top: '27%',
        //   itemHeight: 10,//图例的高度
        //   itemGap: 8,//图例之间的间距
        //   data: ['通过率' + pass_rate + '%', '平均值' + average + '%']
        //   //图例的名字需要和饼图的name一致，才会显示图例
        // },
        title: {
          text: 80+ '%',  //图形标题，配置在中间对应效果图的80%
          left: "center",
          top: "50%",
          textStyle: {
            color: "rgb(50,197,233)",
            fontSize: 16,
            align: "center"
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '90%'],  //设置内外环半径,两者差值越大，环越粗
            hoverAnimation: false,　 //移入图形是否放大
            label: {     //对应效果图中的Angular显示与否以及设置样式
              // show: true,
              // position: 'center',
              normal: {
                show: true,
                position: 'center',
                padding: [0, 0, 20, 0],  //设置字angular的边距
                fontSize: 16,
              }
            },
            labelLine: {
              normal: {  //label线不显示
                show: false
              }
            },
            // emphasis: { //鼠标移入时效果
            //   label: {
            //     show: false,
            //     fontSize: '20',
            //     fontWeight: 'bold'
            //   }
            // },
            data: [
              {                  
                name: '良好',   //数据，name对应Angular
                value: 80,  //对应显示的部分数据即80%
                itemStyle: {
                  normal: {
                    color: 'rgb(50,197,233)',
                  }
                }
              },
              {
                value: 20,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          }
        ]
      };
    },
    getpieCenterOptions(){
      return  {
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: "{a} : {c} ({d}%)"
        },
        legend: {
          show:false
        },
        //  color: ['#546570', '#c4ccd3'],
        // color: ['rgb(255,159,127)', 'rgb(50,197,233)'],
        // legend: {
        //   orient: 'vertical',
        //   x: '35%',
        //   top: '27%',
        //   itemHeight: 10,//图例的高度
        //   itemGap: 8,//图例之间的间距
        //   data: ['通过率' + pass_rate + '%', '平均值' + average + '%']
        //   //图例的名字需要和饼图的name一致，才会显示图例
        // },
        title: {
          text: 70+ '%',  //图形标题，配置在中间对应效果图的80%
          left: "center",
          top: "50%",
          textStyle: {
            color: "green",
            fontSize: 16,
            align: "center"
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '90%'],  //设置内外环半径,两者差值越大，环越粗
            hoverAnimation: false,　 //移入图形是否放大
            label: {     //对应效果图中的Angular显示与否以及设置样式
              // show: true,
              // position: 'center',
              normal: {
                show: true,
                position: 'center',
                padding: [0, 0, 20, 0],  //设置字angular的边距
                fontSize: 16,
              }
            },
            labelLine: {
              normal: {  //label线不显示
                show: false
              }
            },
            // emphasis: { //鼠标移入时效果
            //   label: {
            //     show: false,
            //     fontSize: '20',
            //     fontWeight: 'bold'
            //   }
            // },
            data: [
              {                  
                name: '良好',   //数据，name对应Angular
                value: 70,  //对应显示的部分数据即80%
                itemStyle: {
                  normal: {
                    color: 'green',
                  }
                }
              },
              {
                value: 30,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          }
        ]
      };
    },
    getPieFaultOptions(){
      return {
        title: {
                text: "故障代码状态(TOP5)",
                textStyle: {
                  fontWeight: "600",
                  fontSize: "18",
                  color: "#3fd5f1"
                }
        },
        
        tooltip: {},
        legend: {
            x : '50%',
            y : '28%',
            textStyle : {
              color:'#FFF',
            },
            orient : 'vertical',
            data:['液压油偏低','扳手校验不合格','液压泵校验过期','扳手外观不合格','设备异常'],
            formatter: function(name) {
                var index = 0;
                var clientlabels =['液压油偏低','扳手校验不合格','液压泵校验过期','扳手外观不合格','设备异常']
                var clientcounts = [400,300,200,200,200];
                clientlabels.forEach(function(value,i){
                  if(value == name){
                        index = i;
                  }
                });
                return name + "  " + clientcounts[index];
            }
        },
    
        calculable : false,
        series: [{
    
            name: '故障代码',
            type: 'pie',
            radius: ["35%", "60%"], // 内外半径
            center: ['25%', '55%'],
            startAngle:90,  //开始 的旋转角度
    
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'inner'
    
                    },
                    labelLine: {
                        show: false,
                    }
                }
            },
            data: [
                {value:400, name:'液压油偏低'},
                {value:300, name:'扳手校验不合格'},
                {value:200, name:'液压泵校验过期'},
                {value:200, name:'扳手外观不合格'},
                {value:200, name:'设备异常'},
            ]
    
        }
        ]
    
      };
    },
    getPieStateOptions(){
      return  {
        color: ['green','red','yellow'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
          show:false
          },
          series: [
            {
              name: '校准状态',
              type: 'pie',
              radius: ['0', '90%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'inner', // 数值显示在内部
                  color:'#32c5e9',
                  formatter: '{b}', // 格式化数值百分比输出
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '已校准' },
                { value: 735, name: '过期' },
                { value: 580, name: '待检' },
              ]
            }
          ]
        };
    },
    getPieOptions() {

      return  {
              color: this.signalColor,
              legend: {
                show: false
              },
              title: {
                text: "服务螺栓区域分布(单位:根)",
                textStyle: {
                  fontWeight: "600",
                  fontSize: "18",
                  color: "#3fd5f1"
                }
              },
              tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}（{d}%）'
              },
                
                graphic:{
                    type: "text",
                    left: "center",
                    top: "center",
                    style:{
                        text: this.total,
                        fill: "#fff",
                        fontSize: 30,
                        fontWeight: 700
                    }
                },
                series: [
                  {
                    name: '服务螺栓数',
                    type: 'pie',
                   
                    radius: [0, '57%'],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                      borderRadius: 20
                    },
                     label: {            
                            // show: false,                
                            formatter: '{b} : {c}',
                            position: 'outer',
                            alignTo: 'labelLine',
                            bleedMargin: 5
                        },
                    data: [
                      { value: 40, name: '华北大区' },
                      { value: 38, name: '东北大区' },
                      { value: 32, name: '西北大区' },
                      { value: 30, name: '南部大区' },
                      { value: 28, name: '中部大区' },
                      { value: 26, name: '内蒙大区' },
                      { value: 22, name: '江苏大区' }
                     
                    ]
                  }
                ]

            }
    },
    getBarOptions() {
      return {
        title: {
          text: "已服务统计",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "1%",
         
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
          
            nameLocation: "end",
            data: this.barTypexAxisData,
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              },
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: "value",
          
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "40%",
            data:this.barTypeData,
            showBackground: true,
            itemStyle: {
              normal: {
                       label: {
                           show: true,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: "white",
                               fontSize: 12
                           }
                       }
                   },
              
            },
     
             
            
          }
        ]
      };
    },

    getLineOptions() {
      return {
        title: {
          text: "设备利用率",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        grid: {
           left: "14%",
          right: "13%",
         
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          padding: [5, 10]
        },
        xAxis: {
          type: "category",
          name: "月份",
          nameLocation: "end",

          data: this.lineAlarmxAxisData,
          nameTextStyle: {
            color: "#fff"
          },
          axisLine: {
            lineStyle: { color: "#FFF" }
          },
          axisLabel: {
            textStyle: {
              fontSize: "10",
              color: "#fff"
            },
            
            rotate: -40
          }
        },
        yAxis: {
          
          nameTextStyle: {
            color: "#fff"
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: { color: "#FFF" }
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            data: this.lineAlarmData,
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#eab72c"
            },
            itemStyle: {
              color: "#eab72c"
            }
          }
        ]
      };
    },
    getSubRealAlarmBarOptions(){
        return {
        title: {
          text: "告警状态统计(分体)",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "5%",
          right: "15%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "状态",
            nameLocation: "end",
            data: this.subRealAlarmBarxAxisData,
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize:10
              },
              rotate: -40
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "设备数量",
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",

            barWidth: "20%",
            data: this.subRealAlarmBarData,
            itemStyle: {
                   normal: {
                       label: {
                           show: true,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: "white",
                               fontSize: 12
                           }
                       }
                   }
            }
          }
        ]
      };
    },
    getRealAlarmBarOptions(){
      return {
        title: {
          text: "告警状态统计(主体)",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "5%",
          right: "15%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "状态",
            nameLocation: "end",
            data: this.RealAlarmBarxAxisData,
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize:10
              },
              rotate: -40
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "设备数量",
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",

            barWidth: "20%",
            data: this.RealAlarmBarData,
            itemStyle: {
                   normal: {
                       label: {
                           show: true,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: "white",
                               fontSize: 12
                           }
                       }
                   }
            }
          }
        ]
      };
    },
    getPlanBarOptions() {
      return {
        title: {
          text: "校准计划",
          textStyle: {
            fontWeight: "600",
            fontSize: "18",
            color: "#3fd5f1"
          }
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis"
        },
         legend: {
                show: false
              },
        grid: {
          left: "5%",
          right: "10%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
           
            nameLocation: "end",
            data: this.PlanBarxAxisData,
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              },
              
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: { color: "#FFF" }
            },
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            name:'实际校准',
            barWidth: "20%",
            data: this.PlanBarData,
            itemStyle: {
                   normal: {
                       label: {
                           show: false,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: "white",
                               fontSize: 12
                           }
                       }
                   }
            }
          },
           {
            type: "bar",
            name:'计划校准',
            barWidth: "20%",
            data: this.PlanBarData,
            itemStyle: {
                   normal: {
                       label: {
                           show: false,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: "white",
                               fontSize: 12
                           }
                       }
                   }
            }
          }
          
        ]
      };
    },
    getMapOptions() {
      return {
        //  title: {
        //   text: "风场位置地图",
        //   textStyle: {
        //     fontWeight: "600",
        //     fontSize: "18",
        //     color: "#3fd5f1"
        //   }
        // },
        color: ['#dd4444', '#fec42c', '#80F1BE'],
        geo: {
          // 这个是重点配置区
          map: "china",
          label: {
            emphasis: {
              show: true
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#245baf",
              borderColor: "#FFF"
            },
            emphasis: {
              areaColor: "#33c4f6" //鼠标指上市时的颜色
            }
          }
        },
        // aspectScale: 1.1, //地图的长宽比
				// itemStyle: {
				// 	borderWidth: 1,
				// 	borderColor: '#0090fe', //边框颜色
				// 	areaColor: '#003399', //地图区域颜色
				// 	shadowColor: '#182f68',
				// 	shadowOffsetX: 0,
				// 	shadowOffsetY: 10
				// },

				// emphasis: {
				// 	itemStyle: {
				// 		show: 'true',
				// 		borderWidth: 4,
				// 		borderColor: '#b2163c', //边框颜色
				// 		areaColor: '#531f67', //鼠标移上去的颜色
				// 	},
				// 	label: {
				// 		color: '#fff',
				// 		fontWeight: 'bold',
				// 		show: true,
				// 	}
				// },

        //滑动显示数据
        tooltip: {
          trigger: "item",
         formatter:function (params) {

				    var res = '';
            // res+=params['data'].name+'</br>';
            res+='风场名称' +' : '+params['name']+'</br>';			
            res+='风场位置' +' : '+params['data']['address']+'</br>';			
            res+='液压泵数量' +' : '+params['data']['number']+'</br>';			
            res+='液压扳手数量' +' : '+params['data']['number']+'</br>';			
            return res;
				  }
        },
        series: [
          {
            name: "三天内使用",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,

            label: {
              position: "right",
              show: false
            },
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "yellow"
              }
            },
            data: this.mapData
          },
          {
            name: "静止状态",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,

            label: {
              position: "right",
              show: false
            },
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "red"
              }
            },
            data: this.mapData1
          },
          {
            name: "当天使用",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,

            label: {
              position: "right",
              show: false
            },
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "green"
              }
            },
            data: this.mapData2
          }
        ]
      };
    },
    
    //地图左上 设备状态数量统计
    // getDeviceStatusCount(){
    //   this.$http.get('total/device/statusCount').then(response => {
    //     this.deviceStatusData=response.data
    //   })
    // },
    //获取地图上设备数据
    getDeviceData() {
      // this.$http.get('preview/getDeviceTotal').then(response => {
        // console.log(response.data);
        let data=[];
        // //设备地址
        // this.mapData  =data.addrList
        // this.mapOptions = this.getMapOptions();
        //地图左上 设备状态数量统计
        // this.deviceStatusData=data.statusTotal
        let netState= this.$appConfig.netState;
        let netTotalArr=[];
        for(let i=0;i<netState.length;i++){
            // let netItem={value: data.statusTotal[netState[i].value], name: netState[i].label}
            // netTotalArr.push(netItem)
        }
        // this.netPieData=netTotalArr
        this.netPieOptions = this.getNetPieOptions();
        //左上 设备信号统计
        // this.pieData=data.signalTotal
        this.pieOptions = this.getPieOptions();
        this.pieStateOptions = this.getPieStateOptions();
        this.pieFaultOptions=this.getPieFaultOptions();
        this.pieCenterOptions=this.getpieCenterOptions()
        this.pieRightOptions=this.getpieRightOptions()
        this.pieDeviceOptions=this.getPieDeviceOptions()
          //左中 液压泵设备统计 
        // this.barTypeData =  data.typeTotal.yAxisData;
        // this.barTypexAxisData=data.typeTotal.xAxisData;
        this.barOptions = this.getBarOptions();
      // })
     
    },
    async getDeviceAddress() {
      var query={start:0,limit:10000}
      var that=this
      await this.$http.get('preview/getDeviceAddressList',{ params: query}).then(response => {
        // console.log(response.data);
        let data=response.data;
        //设备地址
        this.mapData  =data.addrList
        this.mapData1  =data.addrList1
        this.mapData2  =data.addrList2

        this.mapOptions = this.getMapOptions();

      }) 
     
    },
    async getDeviceAddressBatch(start,limit) {
      var query={start:start,limit:limit}
      await this.$http.get('preview/getDeviceAddressList',{ params: query}).then(response => {
        let data=response.data;
        this.mapData = this.mapData.concat(data.addrList)
        this.deviceTotal = data.total;
      })
     
    },
    async getAlldeviceListBatch(start,limit){
      var length=Math.ceil(this.deviceTotal/limit)
      if(length<=start){
        return
      }
      for(var i=start;i<length;i++){
        await this.getDeviceAddressBatch(i,limit);
      }
      this.mapOptions = this.getMapOptions();
    },
    //左下 当天告警统计
     getAlarmData(){
      // this.$http.get('preview/alarmTotal').then(response => {
        // console.log(response.data)
        // this.alarm_data=response.data
      // })
      
    },
   
    //右上 月告警统计
    getLineAlarmData(){
      this.$http.get('preview/monthAlarmData').then(response => {
        this.lineAlarmxAxisData=response.data.xAxisData;
        this.lineAlarmData=response.data.yAxisData;
        this.lineOptions = this.getLineOptions();
      })
    },
    //右下 实时告警信息  
    getScrollAndAreaData() {
     
      // this.$http.get('preview/realTimeAlarmData').then(response => {
        // let data  =response.data
        // this.alarmData  =data.scrollData
        this.alarmData=[
        {
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        }
        ,{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        },{
          'date': '2022-03-04 09:40:35',
          'name': '测试设备',
          'number': '000001',
          'result': '正常',
        }
      ]
        //中下 频繁告警区域
        // this.PlanBarData =data.areaData.yAxisData;
        // this.PlanBarxAxisData=data.areaData.xAxisData;
        this.barPlanOptions = this.getPlanBarOptions();
      // })

    },
     //中下 实时告警类型统计
    getrealAlarmTypeTotal(){
      // this.$http.get('preview/realAlarmTypeTotal').then(response => {
        // console.log(response.data)
        // this.barRealtimeAlarmOptions=response.data
        // this.RealAlarmBarData =response.data.yAxisData;
        // this.RealAlarmBarxAxisData=response.data.xAxisData;
        this.barRealtimeAlarmOptions = this.getRealAlarmBarOptions();

        // this.subRealAlarmBarData =response.data.subyAxisData;
        // this.subRealAlarmBarxAxisData=response.data.subxAxisData;
        this.subRealtimeAlarmOptions= this.getSubRealAlarmBarOptions();
      // })
      
    },
    
    
    //获取并格式化时间
    initDate(){
      var tmpDate = new Date(); // 每一秒取一次当前时间
       let wk = tmpDate.getDay()
      //格式化 Date()
      var year = tmpDate.getFullYear();
      var month = ("0" + (tmpDate.getMonth() + 1)).slice(-2)
      
      var date = ("0" + tmpDate.getDate()).slice(-2)
      var h =("0" + tmpDate.getHours()).slice(-2)
      var m =("0" + tmpDate.getMinutes()).slice(-2)
      var s =("0" + tmpDate.getSeconds()).slice(-2)
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
       this.nowWeek = weeks[wk]
      return year+'-'+month+'-'+date+ ' '+h+':'+m+':'+s
    },
    initSignalColor(){
        let signal_color = this.$appConfig.signalColor;
        signal_color .forEach((item) => {
                this.signalColor.push(item.color)
        })
        let netStateColor= this.$appConfig.netState;
        netStateColor.forEach((item) => {
                this.netStateColor.push(item.color)
        }) 
  
    }
  },
  mounted() {
    var that = this;
    var alarmTimer=30000
    var deviceTimer=900000
    //初始化大屏
    //获取地图设备数据时  重新调用获取地图options方法
    this.getDeviceData();
    this.getDeviceAddress();  
    //获取设备状态统计数据
    // this.getDeviceStatusCount();
      //获取告警统计
    this.getAlarmData();
    //告警状态统计
    this.getrealAlarmTypeTotal();
    //获取月告警曲线图数据
    this.getLineAlarmData();
    //实时滚动警告信息 频繁告警区域信息
    this.getScrollAndAreaData();
    this.initSignalColor();
    //初始化时间
    this.timer = setInterval(() => {
      that.date = this.initDate()
    }, 1000)

    //获取配置请求时间
    // this.$http.get('preview/getScreenRequestConfig').then(response => {
    //     var config=response.data
    //     if(config.device_request_interval){
    //         deviceTimer=config.device_request_interval*1000
    //     }
    //     if(config.alarm_request_interval){
    //         alarmTimer=config.alarm_request_interval*1000
    //     }
    //     this.timer1 = setInterval(() => {
    //       this.getScrollAndAreaData();
    //       this.getAlarmData();
    //       this.getrealAlarmTypeTotal();
          
    //     }, alarmTimer)
    //     this.timer2 = setInterval(() => {
    //       this.getDeviceData();
    //       this.mapData=[];
    //       this.getAlldeviceListBatch(0,10000); 
    //       this.getLineAlarmData();
    //     }, deviceTimer)
    // })
    

  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
    if (this.timer1) {
      clearInterval(this.timer1); // 在Vue实例销毁前，清除我们的定时器
    }
    if (this.timer2) {
      clearInterval(this.timer2); // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style scoped>


#content{
  width:100%;
  min-width: 1280px;
  height: calc(60vw - 84px);
  /* height: 100vh; */
  min-height: calc(100vh - 84px);
  background-image: url("../../assets/screen/bg_body.png");
    background-position-x: initial;
    background-position-y: initial;
    background-size: 100% 100%;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
::v-deep .el-carousel{
    width:100%;
    height:100%;
}
::v-deep .el-carousel__container{
     width:100%;
    height:100%;
}

::v-deep .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 100%;
    margin: 0;
  }
  
 ::v-deep .el-carousel__item:nth-child(2n) {
   
    background-image: url("../../assets/screen/bg_body.png");
    background-position-x: initial;
    background-position-y: initial;
    background-size: 100% 100%;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
  }
  
 ::v-deep .el-carousel__item:nth-child(2n+1) {
 
        background-image: url("../../assets/screen/bg_body.png");
        background-position-x: initial;
        background-position-y: initial;
        background-size: 100% 100%;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: initial;
  }
 ::v-deep .el-carousel__indicators{
      display: none;
  }
::v-deep .el-carousel__arrow{
    display: none;
}
</style>