获取实时时间和天气

绿藻头就是索大

已于 2022-07-11 14:23:40 修改

阅读量297

点赞数

文章标签： javascript 前端 vue.js

于 2022-01-19 11:02:18 首次发布

本文链接：https://blog.csdn.net/weixin_43456164/article/details/122576284

版权

<div class="header">
          <!-- 天气 -->
          <div class="pointLeft">
            <!-- 时间 -->
            <div id="daytime">
              <div class="timeRight boxNum">
                {{ ShowData }} &nbsp;&nbsp;
                {{ hourData }} &nbsp;&nbsp;&nbsp;
                {{ weekData }}
              </div>
            </div>
            <img style="width:16px;height:24px;margin-left:30px;display:inline-block;" src="../assets/img/indexPage/location.png" alt=""/>
            <p style="display:inline-block;color: rgb(68, 253, 249);font-size: 20px;margin-left:10px;">
              <span>新吴区</span>
            </p>
          </div>
        </div>
        <div class="weatherRight">
          <div class="weatherCard" :style="{
            backgroundImage: 'url(' + coverImgUrl + ')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
          }"></div>
          <img style="width:20px;height:20px;margin-left:20px;" src="../assets/img/indexPage/userId.png" alt="" />
          <p style="margin-left:10px;">管理员</p>
          <p style="font-size:16px;margin-left:30px;cursor: pointer;z-index: 999;" @click="quitLogin">退出</p>
        </div>

天气

const weather = () => {
      proxy.$axios
        .get(
          "https://tianqiapi.com/api?unescape=1&version=v6&appid=66333896&appsecret=3joWNVWS"
        )
        .then((res) => {
          console.log(res.wea_img, 'AAAAA');
          // 根据条件 显示 天气图标和背景
          if (res.wea_img == "yun") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yun.png";
          } else if (res.wea_img == "xue") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/xue.png";
          } else if (res.wea_img == "lei") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/lei.png";
          } else if (res.wea_img == "shachen") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/shachen.png";
          } else if (res.wea_img == "wu") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/wu.png";
          } else if (res.wea_img == "bingbao") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/bingbao.png";
          } else if (res.wea_img == "yu") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yu.png";
          } else if (res.wea_img == "yin") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yin.png";
          } else if (res.wea_img == "qing") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/qing.png";
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    };

时间

// 获取当前时间
      formatDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        proxy.ShowData = `${year}-${month}-${day}`; // 当前时间
        proxy.weekData = `${weekArr[week]}`; // 周
        proxy.hourData = `${hour}:${minute}`; // 时
      },

整个文件实例

<template>
  <div class="indexContainer">
    <div class="contentBody">
      <div class="backgroundBlock">
        <div class="connectLine"></div>
        <!-- 主按钮 -->
        <div class="backMain" @click="jumpToPage(backgroundBlockData[4].code)">
          <div class="mainMessage">
            <div class="mainText">
              <p class="title">{{backgroundBlockData[4].name}}</p>
              <!-- <p>无锡高新区综合保税区</p> -->
            </div>
          </div>
        </div>
        <!-- 分按钮1 -->
        <div class="greenDot" @click="jumpToPage(backgroundBlockData[0].code)">
          <div class="greenMessage">
            <div class="mainText">
              <p class="title">{{backgroundBlockData[0].name}}</p>
            </div>
          </div>
        </div>
        <!-- 分按钮2 -->
        <div class="greenDot greenDot02" @click="jumpToPage(backgroundBlockData[1].code)">
          <div class="greenMessage">
            <div class="mainText">
              <p class="title">{{backgroundBlockData[1].name}}</p>
            </div>
          </div>
        </div>
        <!-- 分按钮3 -->
        <div class="greenDot greenDot03" @click="jumpToPage(backgroundBlockData[2].code)">
          <div class="greenMessage">
            <div class="mainText">
              <p class="title">{{backgroundBlockData[2].name}}</p>
            </div>
          </div>
        </div>
        <!-- 分按钮4 -->
        <div class="greenDot greenDot04" @click="jumpToPage(backgroundBlockData[3].code)">
          <div class="greenMessage">
            <div class="mainText">
              <p class="title">{{backgroundBlockData[3].name}}</p>
            </div>
          </div>
        </div>
      </div>
      <div id="index">
        <div class="header">
          <!-- 天气 -->
          <div class="pointLeft">
            <!-- 时间 -->
            <div id="daytime">
              <div class="timeRight boxNum">
                {{ ShowData }} &nbsp;&nbsp;
                {{ hourData }} &nbsp;&nbsp;&nbsp;
                {{ weekData }}
              </div>
            </div>
            <img style="width:16px;height:24px;margin-left:30px;display:inline-block;" src="../assets/img/indexPage/location.png" alt=""/>
            <p style="display:inline-block;color: rgb(68, 253, 249);font-size: 20px;margin-left:10px;">
              <span>新吴区</span>
            </p>
          </div>
        </div>
        <div class="weatherRight">
          <div class="weatherCard" :style="{
            backgroundImage: 'url(' + coverImgUrl + ')',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
          }"></div>
          <img style="width:20px;height:20px;margin-left:20px;" src="../assets/img/indexPage/userId.png" alt="" />
          <p style="margin-left:10px;">管理员</p>
          <p style="font-size:16px;margin-left:30px;cursor: pointer;z-index: 999;" @click="quitLogin">退出</p>
        </div>
        <img class="isShowLine" @click="isShowControlFunc" src="../assets/img/indexPage/btn_show.png" alt="" />
        <transition name="slide-fade" style="z-index: 9999;">
          <div class="centerClick" v-show="isShowContentBody" @click="isShowControlFunc"></div>
        </transition>
        <transition name="slide-fade" style="z-index: 9999;">
          <div class="content_body" v-show="isShowContentBody">
            <div class="left_body">
              <div class="left_box01">
                <img class="box_title" src="../assets/img/indexPage/1.png" alt=""/>
                <div class="box_content">
                  <div class="box01_body">
                    <div class="box01_flexDiv">
                      <p class="box01Number">1002</p>
                      <p class="box01Unit">(单位:天)</p>
                      <p class="box01BottomText">安全用电</p>
                    </div>
                    <div class="box01_flexDiv">
                      <p class="box01Number box01RightNumber">2121</p>
                      <p class="box01Unit">(单位:个)</p>
                      <p class="box01BottomText rightBottomText">站点数量</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="left_box02">
                <img class="box_title" src="../assets/img/indexPage/2.png" alt=""/>
                <div class="box_content">
                  <div class="rightChangeCard">
                    <el-tabs v-model="rightBottomChoose" type="card" @tab-click="handleRightChange">
                      <el-tab-pane label="日" name="3"></el-tab-pane>
                      <el-tab-pane label="月" name="4"></el-tab-pane>
                      <el-tab-pane label="年" name="5"></el-tab-pane>
                    </el-tabs>
                  </div>
                  <div class="box02_body">
                    <div id="box02Charts" style="width:100%; height: 250px;"></div>
                  </div>
                </div>
              </div>
              <div class="left_box03">
                <img class="box_title" src="../assets/img/indexPage/3.png" alt=""/>
                <div class="box_content">
                  <div class="box03_table">
                    <el-table :data="tableData" stripe style="width: 100%">
                      <el-table-column prop="id" label="序号" show-overflow-tooltip="true" align="center"/>
                      <el-table-column prop="alarmTime" label="时间"  show-overflow-tooltip="true" align="center"/>
                      <el-table-column prop="reason" label="告警内容"  show-overflow-tooltip="true" align="center"/>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
            <div class="right_body">
              <div class="right_box01">
                <img class="box_title" src="../assets/img/indexPage/4.png" alt=""/>
                <div class="box_content">
                  <div class="rightFlexBorder">
                    <div class="rightFlexDiv">
                      <div class="leftContent">
                        <p>摄像头</p>
                        <p><span class="num">100</span>台</p>
                      </div>
                      <div class="rightContent">
                        <p>
                          <span>在线率：</span>
                          <span class="num">100</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>正常率：</span>
                          <span class="num">92</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>告警率：</span>
                          <span class="num">8</span>
                          <span>%</span>
                        </p>
                      </div>
                    </div>
                    <div class="rightFlexDiv">
                      <div class="leftContent">
                        <p>桩温传感器</p>
                        <p><span class="num">100</span>台</p>
                      </div>
                      <div class="rightContent">
                        <p>
                          <span>在线率：</span>
                          <span class="num">100</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>正常率：</span>
                          <span class="num">92</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>告警率：</span>
                          <span class="num">8</span>
                          <span>%</span>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="rightFlexBorder">
                    <div class="rightFlexDiv">
                      <div class="leftContent">
                        <p>温湿度传感器</p>
                        <p><span class="num">100</span>台</p>
                      </div>
                      <div class="rightContent">
                        <p>
                          <span>在线率：</span>
                          <span class="num">100</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>正常率：</span>
                          <span class="num">92</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>告警率：</span>
                          <span class="num">8</span>
                          <span>%</span>
                        </p>
                      </div>
                    </div>
                    <div class="rightFlexDiv">
                      <div class="leftContent">
                        <p>水浸传感器</p>
                        <p><span class="num">100</span>台</p>
                      </div>
                      <div class="rightContent">
                        <p>
                          <span>在线率：</span>
                          <span class="num">100</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>正常率：</span>
                          <span class="num">92</span>
                          <span>%</span>
                        </p>
                        <p>
                          <span>告警率：</span>
                          <span class="num">8</span>
                          <span>%</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right_box02">
                <img class="box_title" src="../assets/img/indexPage/5.png" alt=""/>
                <div class="box_content box_content02">
                  <div id="rightBox02Charts" style="width:100%; height: 250px;"></div>
                </div>
              </div>
              <div class="right_box03">
                <img class="box_title" src="../assets/img/indexPage/6.png" alt=""/>
                <div class="box_content box_content02">
                  <div id="rightBox03Charts" style="width:100%; height: 250px;"></div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { ref, reactive, getCurrentInstance, onMounted, toRefs, onBeforeUnmount, inject, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "index ",
  components: {
  },
  setup() {
    let { proxy } = getCurrentInstance();
    const router = useRouter();
    let echarts = inject("ec"); //引入echarts
    const state = reactive({ 
      orgCode:'107640b6-8ea6-4d8b-8dbf-1632f3c440f7',
      backgroundBlockData:[
        {name:'',code:''},{name:'',code:''},{name:'',code:''},{name:'',code:''},{name:'',code:''},
      ],
      //head-start
      // 天气icon
      coverImgUrl: "",
      // 当前时间
      ShowData: "", // 日
      weekData: "", // 周
      hourData: "", // 时
      //head-end
      isShowContentBody:true,
      box01SearchValue:null,
      box01SearchOptions: [],
      dotsArr:[],
      dotsArrDown:[],
      tableData: [
        {id:'11122',createTime:'2021-11-19', reason:'定期巡检'},
        {id:'11122',createTime:'2021-11-19', reason:'定期巡检'},
        {id:'11122',createTime:'2021-11-19', reason:'定期巡检'},
        {id:'11122',createTime:'2021-11-19', reason:'定期巡检'},
      ],
      rightBottomChoose: '3',
      devicesDatas:{},//配电设备数据
      auxiliaryDatas:{},//辅助监控数据
    });
    onMounted(() => {
      // 天气
      weather();
      // 当前时间
      proxy.currentTime();
      proxy.changeEcharts();//echarts日月年
      proxy.drawEcharts();//echarts
      proxy.getLeftDatas();//
      let docElm = document.documentElement;
      //W3C
      if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
    })
    // 销毁定时器
    onBeforeUnmount(() => {
      if (proxy.formatDate) {
        clearInterval(proxy.formatDate);
      }
    });
    const weather = () => {
      proxy.$axios
        .get(
          "https://tianqiapi.com/api?unescape=1&version=v6&appid=66333896&appsecret=3joWNVWS"
        )
        .then((res) => {
          console.log(res.wea_img, 'AAAAA');
          // 根据条件 显示 天气图标和背景
          if (res.wea_img == "yun") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yun.png";
          } else if (res.wea_img == "xue") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/xue.png";
          } else if (res.wea_img == "lei") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/lei.png";
          } else if (res.wea_img == "shachen") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/shachen.png";
          } else if (res.wea_img == "wu") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/wu.png";
          } else if (res.wea_img == "bingbao") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/bingbao.png";
          } else if (res.wea_img == "yu") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yu.png";
          } else if (res.wea_img == "yin") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/yin.png";
          } else if (res.wea_img == "qing") {
            proxy.coverImgUrl = "/src/assets/img/tianqitong/qing.png";
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    };
    const methods = {
      quitLogin(){
        // alert('退出登录！')
        proxy.$axios.post("/api/api/logout",{}).then((res) => {
          if(res.code == 0 ) {
            ElMessage.success('已退出登录！');
            router.push('/login');
          } else {
            ElMessage.warning(res.message)
          }
        });
      },
      currentTime() {
        setInterval(proxy.formatDate, 500);
      },
      // 获取当前时间
      formatDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        proxy.ShowData = `${year}-${month}-${day}`; // 当前时间
        proxy.weekData = `${weekArr[week]}`; // 周
        proxy.hourData = `${hour}:${minute}`; // 时
      },
      //切换年月日
      handleRightChange(val){
        console.log(val.paneName,'111111')
        proxy.rightBottomChoose = val.paneName;
        nextTick(()=>{
          proxy.changeEcharts();
        })
      },
      changeEcharts(){
        //left 第二个板块
        proxy.$axios.get("/api/api/alarm/alarmCountByTime",{//获取告警统计数据
          timeIntervalType : proxy.rightBottomChoose 
        }).then((res) => {
          if(res.code == 0 ) {
            let echartDatas = res.body;
            let box02Charts = proxy.$echarts.init(
              document.getElementById("box02Charts")
            );
            box02Charts.clear(); //先销毁在重新创建
            var fontColor = '#30eee9';
            box02Charts.setOption({
              grid: {
                  left: '3%',
                  right: '3%',
                  top: '15%',
                  bottom: '3%',
                  containLabel: true
              },
              tooltip: {
                  show: true,
                  trigger: 'item'
              },
              xAxis: [{
                  type: 'category',
                  boundaryGap: false,
                  axisLabel: {
                      color: fontColor
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: '#397cbc'
                      }
                  },
                  axisTick: {
                      show: false,
                  },
                  splitLine: {
                      show: false,
                      lineStyle: {
                          color: '#195384'
                      }
                  },
                  data: echartDatas.labelList
              }],
              yAxis: [{
                      type: 'value',
                      name: '单位：个',
                      // min: 0,
                      // max: 1000,
                      axisLabel: {
                          formatter: '{value}',
                          textStyle: {
                              color: '#2ad1d2'
                          }
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#27b4c2'
                          }
                      },
                      axisTick: {
                          show: false,
                      },
                      splitLine: {
                          show: true,
                          lineStyle: {
                              color: 'rgba(0,212,199,0.3)'
                          }
                      }
                  },

              ],
              series: [{
                      name: '告警数',
                      type: 'line',
                      smooth:true,
                      symbol: 'circle',
                      symbolSize: 8,
                      itemStyle: {
                          normal: {
                              color: '#00d4c7',
                              lineStyle: {
                                  color: "#00d4c7",
                                  width: 1
                              },
                                        areaStyle: { 
                                    //color: '#94C9EC'
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                      offset: 0,
                                      color: 'rgba(0,212,199,0.3)'
                                    }, {
                                      offset: 1,
                                      color: 'rgba(0,212,199,0.9)'
                                    }]),
                                        }
                          }
                      },
                      markPoint: {
                          itemStyle: {
                              normal: {
                                  color: 'red'
                              }
                          }
                      },
                      data: echartDatas.dataList
                  },
              ]
            });
            window.onresize = function () {
              box02Charts.resize();
            };
          } else {
            ElMessage.warning(res.message)
          }
        });
      },
      drawEcharts() {
        //right第二个
        // proxy.$axios.get("/api/api/station/overview/devices",{//取出局放设备code
        //   enumValueCode : 'J',
        //   orgCode  : proxy.orgCode 
        // }).then((res) => {
        //   if(res.code == 0 ) {
        //     if(res.body[0].code) {
        //       proxy.$axios.get("/api/api/station/overview/jfData",{//获取局放设备数据
        //         devCode: res.body[0].code
        //       }).then((res) => {
        //         if(res.code == 0 ) {
        //           let echartDatas = res.body;
                  let rightBox02Charts = proxy.$echarts.init(
                    document.getElementById("rightBox02Charts")
                  );
                  rightBox02Charts.clear(); //先销毁在重新创建
                  let type= ['响应率','好评率','运维次数'];
                  rightBox02Charts.setOption({
                    grid: {
                        top: "25%",
                        bottom: "15%"//也可设置left和right设置距离来控制图表的大小
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: false
                            }
                        },
                        formatter: (pa) => {
                            let oneDotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:rgba(0,255,198,1);"></span>'
                            let twoDotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background:rgba(252,199,58,1);"></span>'
                            // return pa[0].name + pa[0].value
                            return (
                              pa[0].name + '<br/>'
                              + oneDotHtml +pa[1].seriesName+ '：' + pa[1].value + "<br>"
                              + twoDotHtml +pa[0].seriesName+ '：' + pa[0].value
                            );
                          }
                    },
                    legend: {
                        // top: "15%",
                        left: 'center',
                        textStyle: {
                            padding: [0,0,0,12],
                            color: "#ffffff",
                            fontSize: 14,
                            lineHeight: 16
                        },
                        itemGap: 50,
                        itemHeight: 10,
                        data: type,
                    },
                    xAxis: {
                        data: [
                            "2015",
                            "2016",
                            "2017",
                            "2018",
                            "2019",
                        ],
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: 'rgba(21,51,162,1)'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                padding: [10,0,0,0],
                                color: "rgba(255,255,255,1)" //X轴文字颜色
                            }
                        },
                    },
                    yAxis: [{
                            type: "value",
                            name: "单位：次",
                            nameTextStyle: {
                                color: "#ffffff"
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(33,35,98,1)'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#FFFFFF'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color: "rgba(255,255,255,1)"
                                }
                            },
                        },
                        {
                            type: "value",
                            name: "百分比%",
                            nameTextStyle: {
                                show: false,
                                color: "#ffffff"
                            },
                            position: "right",
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "rgba(255,255,255,1)"
                                }
                            }
                        },
                    ],
                    series: [{
                            name: "响应率",
                            type: "line",
                            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                            smooth: true, //平滑曲线显示
                            showAllSymbol: true, //显示所有图形。
                            symbol: "circle", //标记的图形为实心圆
                            symbolSize: 0, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "rgba(252,199,58,1)"
                            },
                            lineStyle: {
                                color: "rgba(252,199,58,1)"
                            },
                            data: [322, 408, 398, 450, 580]
                        },
                        {
                            name: "好评率",
                            type: "line",
                            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                            smooth: true, //平滑曲线显示
                            showAllSymbol: true, //显示所有图形。
                            symbol: "circle", //标记的图形为实心圆
                            symbolSize: 0, //标记的大小
                            itemStyle: {
                                //折线拐点标志的样式
                                color: "rgba(60, 147, 255,1)"
                            },
                            lineStyle: {
                                color: "rgba(60, 147, 255,1)"
                            },
                            data: [450, 480,422, 408, 548,]
                        },
                        {
                            name: "运维次数",
                            type: "bar",
                            barWidth: '30%',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(29, 193, 190,0.1)'
                            },
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [4,4,0,0],
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "rgba(29, 193, 190,1)"
                                        },{
                                            offset: 0,
                                            color: "rgba(29, 193, 190,1)"
                                        },{
                                            offset: 1,
                                            color: "rgba(29, 193, 190,1)"
                                        }
                                    ])
                                }
                            },
                            // label: {
                            //     normal: {
                            //         show: true,
                            //         textStyle: {
                            //             color: '#FFF'
                            //         },
                            //         position: 'outside'
                            //     }
                            // },
                            data: [142, 248, 368, 470, 500]
                        }
                    ]
                  });
                  window.onresize = function () {
                    rightBox02Charts.resize();
                  };
        //         } else {
        //           ElMessage.warning(res.message)
        //         }
        //       });
        //     }
        //   } else {
        //     ElMessage.warning(res.message)
        //   }
        // });
        //right第三个
        // proxy.$axios.get("/api/api/station/overview/devices",{//取出局放设备code
        //   enumValueCode : 'J',
        //   orgCode  : proxy.orgCode 
        // }).then((res) => {
        //   if(res.code == 0 ) {
        //     if(res.body[0].code) {
        //       proxy.$axios.get("/api/api/station/overview/jfData",{//获取局放设备数据
        //         devCode: res.body[0].code
        //       }).then((res) => {
        //         if(res.code == 0 ) {
        //           let echartDatas = res.body;
                  let rightBox03Charts = proxy.$echarts.init(
                    document.getElementById("rightBox03Charts")
                  );
                  rightBox03Charts.clear(); //先销毁在重新创建
                  var getname = ['110kV电站', '35-20kV电站', '10kV及以下电站'];
                  var getvalue = [300, 200, 100, 50];
                  var data = [];
                  for (var i = 0; i < getname.length; i++) {
                      data.push({
                          name: getname[i],
                          value: getvalue[i]
                      })
                  }
                  var colorList = ['#E9A90E', '#00AF6D', '#19F1F9', '#00FCFD'];
                  var rich = {
                      name: {
                          color: "#FFF",
                          fontSize: 14,
                          padding: [10, 15, 0, 10],
                          fontWeight: '400',
                          align: 'left'
                      },
                      value: {
                          color: "#FFF",
                          fontSize: 15,
                          padding: [10, 10, 0, 15],
                          fontWeight: '500',
                          align: 'right'
                      },
                      percent: {
                          color: "#FFF",
                          align: 'right',
                          fontSize: 15,
                          fontWeight: '500',
                          //padding: [0, 5]
                      },
                      hr: {
                          width: '100%',
                          height: 0,
                      },
                      cir: {
                          fontSize: 26,
                      }
                  }
                  rightBox03Charts.setOption({
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        type: "scroll",
                        // x: "right",
                        top: "bottom",
                        right: "15",
                        // bottom: "0%",
                        itemWidth: 16,
                        itemHeight: 8,
                        itemGap: 16,
                        textStyle: {
                            color: '#A3E2F4',
                            fontSize: 12,
                            fontWeight: 0
                        },
                        data: getname
                    },
                    series: [{
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                return params.name + '：' + params.value + '人<br>占比：' + params.percent.toFixed(2) + '%'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#0A1934',
                                borderWidth: 5,
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        type: 'pie',
                        radius: ['30%', '50%'],
                        center: ["50%", "50%"],
                        label: {
                            normal: {
                                show: false,
                                position: 'inner',
                                formatter: params => {
                                    return (
                                        '{percent|' + params.percent.toFixed(0) + '%}'
                                    );
                                },
                                rich: rich,
                            }
                        },
                        data: data
                    }, {
                        itemStyle: {
                            normal: {
                                borderColor: '#0A1934',
                                borderWidth: 5,
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        type: 'pie',
                        silent: true, //取消高亮
                        radius: ['30%', '50%'],
                        center: ["50%", "50%"],
                        labelLine: {
                            normal: {
                                length: 30,
                                length2: 0,
                                lineStyle: {
                                    color: 'transparent'
                                }
                            }
                        },
                        label: {
                            normal: {

                                formatter: params => {
                                    return '{value|' + params.value + '人' +'}\n{hr|————}';
                                },
                                rich: rich,
                                padding: [-20, 25, 0, 25]
                            }
                        },
                        data: data,
                        z: -1
                    }, {
                        itemStyle: {
                            normal: {
                                borderColor: '#0A1934',
                                borderWidth: 5,
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        type: 'pie',
                        silent: true, //取消高亮
                        radius: ['30%', '50%'],
                        center: ["50%", "50%"],
                        labelLine: {
                            normal: {
                                length: 30,
                                length2: 0,
                                lineStyle: {
                                    color: 'transparent'
                                }
                            }
                        },
                        label: {
                            normal: {
                                formatter: params => {
                                    return '\n{cir|●}\n';
                                },
                                rich: rich,
                            }
                        },
                        data: data,
                        z: -1
                    }]
                  });
                  window.onresize = function () {
                    rightBox03Charts.resize();
                  };
        //         } else {
        //           ElMessage.warning(res.message)
        //         }
        //       });
        //     }
        //   } else {
        //     ElMessage.warning(res.message)
        //   }
        // });
      },
      getLeftDatas() {
        //获取五个站房点 
        proxy.$axios.get("/api/api/model/orgList",{}).then((res) => {
          if(res.code == 0 ) {
            proxy.backgroundBlockData = res.body;
          } else {
            ElMessage.warning(res.message)
          }
        });
        // 告警列表
        proxy.$axios.get("/api/api/runMonitor/deviceAlarmInfoList",{}).then((res) => {
          if(res.code == 0 ) {
            proxy.tableData = res.body;
          } else {
            ElMessage.warning(res.message)
          }
        });
      },
      isShowControlFunc() {//控制隐藏
        proxy.isShowContentBody = !proxy.isShowContentBody;
      },
      //背景地图跳转
      jumpToPage(val) {
        if(val == null || val == '') {
          ElMessage.warning('当前暂无组织code，无法跳转！')
        }else {
          //存储站房code
          localStorage.setItem('indexCode',val);
          router.push('/environmentMonitor');
        }
      },
    }
    return {
      ...toRefs(state),
      ...methods,
      weather
    };
  },
};
</script>
<style scoped lang="scss">
.indexContainer {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.contentBody {
  width: 2560px;
  height: 1080px;
  transform: scale(0.75, 1) translateZ(0) translate3d(0, 0, 0);
  position: fixed;
  top: 0;
  left: -320px;
  background: url('../assets/img/index_dp/backImg.png') no-repeat center/cover;
}
// 背景
.backgroundBlock {
  width: 2560px;
  height: 1080px;
  position: fixed;
  left: 0px;
  top: 0px;
}
.connectLine {
  width: 283px;
  height: 349px;
  position: fixed;
  left: 832px;
  top: 335px;
  cursor: pointer;
  background: url('../assets/img/indexPage/connectLine.png') no-repeat center/cover;
}
.backMain {
  width: 153px;
  height: 102px;
  position: fixed;
  left: 1020px;
  top: 375px;
  cursor: pointer;
  background: url('../assets/img/indexPage/backMain.png') no-repeat center/cover;
}
.backMain:hover .mainMessage {
  display: block;
}
.mainMessage {
  width: 436px;
  height: 116px;
  position: relative;
  left: 75px;
  top: -65px;
  display: none;
  background: url('../assets/img/indexPage/mainMessage.png') no-repeat center/cover;
  .mainText {
    width: auto;
    height: auto;
    position: relative;
    left: 75px;
    top: 25px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    .title {
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
      color: #FFF08E;
    }
  }
}
.greenDot {
  width: 58px;
  height: 62px;
  position: fixed;
  left: 845px;
  top: 325px;
  cursor: pointer;
  background: url('../assets/img/indexPage/backSecondary.png') no-repeat center/cover;
}
.greenDot:hover .greenMessage {
  display: block;
}
.greenMessage {
  width: 312px;
  height: 96px;
  position: relative;
  left: -280px;
  top: -55px;
  display: none;
  background: url('../assets/img/indexPage/greenMessage.png') no-repeat center/cover;
  .mainText {
    width: auto;
    height: auto;
    position: relative;
    left: 35px;
    top: 10px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    .title {
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
      color: #FFF08E;
    }
  }
}
.greenDot02 {
  position: fixed;
  left: 805px;
  top: 565px;
}
.greenDot03 {
  position: fixed;
  left: 875px;
  top: 570px;
}
.greenDot04 {
  position: fixed;
  left: 885px;
  top: 640px;
}
/* header */
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  z-index:99;
  background: url('../assets/img/index_dp/top.png') no-repeat center/cover;
  position: relative;
}
.header button {
  display: block;
  width: 141px;
  height: 37px;
  border: none;
  position: absolute;
  bottom: 6px;
  cursor: pointer;
  transition: 0.3s ease-in-out all;
}
.isShowControl {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  cursor: pointer;
}
.isShowLine {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 999;
  cursor: pointer;
}
/* 左侧时间 */
.pointLeft {
  position: absolute;
  top: 10px;
  left: 50px;
  display: flex;
  align-items: center;
}
#daytime {
  position: relative;
}
#daytime span {
  color: #fff;
  font-size: 20px;
  position: absolute;
  top: 28px;
  left: -78px;
}
#daytime .timeRight {
  color: rgb(68, 253, 249);
  font-size: 20px;
}
// 右侧天气
.weatherRight {
  position: absolute;
  top: 10px;
  right: 85px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgb(68, 253, 249);
  font-size: 20px;
  .weatherCard {
    width: 30px;
    height: 30px;
  }
}
// 动画
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
//all
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(0px);
  opacity: 0;
}
// center click
.centerClick {
  width: calc( 100% - 1052px );
  height: calc( 100% - 80px );
  border:1px solid transparent;
  position:absolute;
  top:58px;
  left:520px;
  cursor: pointer;
}
/* body */
.content_body {
  width: calc( 100% - 60px );
  height: 987px;
  padding: 0px 30px;
  padding-bottom: 11px;
  margin-top:20px;
  display: flex;
  flex-direction: row;
  align-items: center ;
  justify-content: space-between;
  .left_body, .right_body {
    width: 470px;
    height: 100%;
    padding: 15px;
    background: rgba(0,14,20,0.8);
    display: flex;
    flex-direction: column;
    align-items: center ;
    justify-content: flex-start;
  }
  .box_title {
    width: 429px;
    height: 42px;
  }
  .left_body {
    .left_box01 {
      width: 100%;
      height: auto;
      text-align: center;
    }
    .left_box02 {
      width: 100%;
      height: auto;
      margin-top: 45px;
      text-align: center;
    }
    .left_box03 {
      width: 100%;
      height: auto;
      margin-top: 20px;
      text-align: center;
    }
  }
  .right_body {
    width: 476px;
    .right_box01 {
      width: 100%;
      height: auto;
      text-align: center;
    }
    .right_box02 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-top: 10px;
    }
    .right_box03 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-top: 10px;
    }
  }
  .box_content {
    width: calc( 100% - 30px );
    height: auto;
    padding: 10px 15px;
    .box01_body {
      width: 100%;
      padding-top: 15px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .box01_flexDiv {
        width: 189px;
        height: 190px;
        background: url(../assets/img/indexPage/left01Bg.png) no-repeat center/cover;
      }
      .box01Number {
        width: 189px;
        height: 30px;
        font-size: 40px;
        font-family: Digiface;
        font-weight: 400;
        color: #19E0FE;
        line-height: 25px;
        position:relative;
        top:75px;
        left: 0px;
      }
      .box01RightNumber {
        color: #F9DA6D;
      }
      .box01Unit {
        width: 189px;
        height: 18px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #44A8F8;
        line-height: 20px;
        position:relative;
        top:85px;
        left: 0px;
      }
      .box01BottomText {
        width: 189px;
        height: 20px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #7EF5E6;
        line-height: 4px;
        text-shadow: 0px 2px 2px rgba(2, 55, 48, 0.71);
        position:relative;
        top:145px;
        left: 0px;
      }
      .rightBottomText {
        color: #EEF57E;
      }
    }
    // 2
    .box02_body {
      width: 100%;
    }
    // 3
    .table_right01 {
      margin-top: 20px;
    }
    .table_right {
      margin-top: -25px;
    }
    //4
    .rightFlexBorder {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 20px 0px;
      .rightFlexDiv {
        width: 214px;
        height: 98px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: url('../assets/img/indexPage/rightBox01Bg.png') no-repeat center/cover;
        .leftContent {
          text-align: center;
          width:85px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          .num {
            font-family: DIN;
            font-weight: bold;
            color: #FCC83A;
          }
        }
        .rightContent {
          text-align: left;
          margin-left: 15px;
          width: auto;
          height: 98px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #00FAE2;
          line-height: 28px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .num {
            display: inline-block;
            width: 32px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 28px;
          }
        }
      }
    }
  }
  .box_content02 {
    position:relative;
    top: 0px;
  }
  .rightChangeCard {
    width: 120px;
    height: 24px;
    line-height: 24px;
    position:relative;
    top: 0px;
    left:320px;
    //切换栏
    &:deep(.el-tabs--card > .el-tabs__header) {
      border-bottom: none;
    }
    &:deep(.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2)) {
      padding-left: 10px;
    }
    &:deep(.el-tabs__item) {
      width: 36px;
      height: 24px;
      line-height: 24px;
      color: #19E1CB;
      text-align: center;
      background: rgba(4, 135, 121, 0.2);
      border: 1px solid #19E1CB;
      border-radius: 0px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      padding: 0px 10px;
    }
    &:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
      border-bottom-color: none;
      color: #0D5754;
      background: #19E1CB;
      border: 1px solid #19E1CB;
      border-radius: 0px;
      width: 36px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      padding: 0px 10px;
    }
    &:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
      border-radius: 0px;
      border: none;
    }
  }
}
</style>
<style lang="scss">
.el-scrollbar__wrap {
  width: 100% !important;
}
.el-select-dropdown {
  width: 100% !important;
  background: rgba(5, 92, 91, 1);
}
.el-select-dropdown__item {
  height: 30px;
  line-height: 30px;
  font-size: 12px !important;
  color: #ffffff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(5, 92, 91, 1);
  color: #fff;
}
.el-select-dropdown__item.selected {
  color: #fff;
  background: rgba(5, 92, 91, 1);
}
.el-select__popper.el-popper[role="tooltip"] {
  border: none;
  color: #fff;
}
</style>
<style lang="scss">
.box03_table {
  //new table
  .el-table {
    background: rgba(1,84,114,0.16);
    border: 1px solid rgba(58,252,248,0.16);      
    color: #ffffff;
  }
  .el-table th {
    padding: 0px 0px;
    background: linear-gradient(0deg, #003C5A 0%, #015472 100%) !important;
  }
  .el-table tr {
    background-color: transparent !important;
  }
  .el-table thead {
    background: linear-gradient(0deg, #003C5A 0%, #015472 100%);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #77F8FA;
    line-height: 48px;
    height: 48px;
  }
  .el-table td, .el-table th.is-leaf {
    border-bottom: none;
    height: 48px;
    line-height: 48px !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(1,84,114,0.16) !important;
    height: 45px !important;
    line-height: 45px !important;
    font-family: Microsoft YaHei;
  }
  .el-table td, .el-table th.is-leaf {
    background: transparent !important;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: transparent !important;
  }
}
</style>