<template>
  <div class="page-cloud">
    <div class="public-nav-div">
      <div :style="'width: calc(100% - 280px); float: left;'">
        <div class="genert-div button-div">
          <div class="title" >云端数据概况</div>
          <div class="content-div buttom-div" v-if="userType === 'SYSTEM'">
            <i class="iconfont icon-chanpinC fontsize"></i>
            <p class="buttom-div-p">{{tempObject.modelCount}}</p>
            <p>全部型号数量</p>
            <el-button type="text" :disabled="true" @click="toProdFu">管理型号</el-button>
          </div>
          <div class="content-div buttom-div" v-else-if="userType === 'TENANT'">
            <i class="iconfont icon-chanpinC fontsize"></i>
            <p class="buttom-div-p">{{tempObject.modelCount}}</p>
            <p>全部项目数量</p>
            <el-button type="text" :disabled="true" @click="toProdFu">管理项目</el-button>
          </div>
          <div class="content-div buttom-div" v-else>
            <i class="iconfont icon-chanpinC fontsize"></i>
            <p class="buttom-div-p">0</p>
            <p>全部项目数量</p>
            <el-button type="text" :disabled="true" @click="toProdFu">管理项目</el-button>
          </div>
          <div class="content-div buttom-div">
            <i class="iconfont icon-shebeishuliang fontsize"></i>
            <p class="buttom-div-p">{{tempObject.deviceCount}}</p>
            <p>全部设备数量</p>

            <el-button type="text" :disabled="true" @click="toDeviceFu">管理设备</el-button>
          </div>
          <div class="content-div buttom-div">
            <i class="iconfont icon-chufaqi fontsize"></i>
            <p class="buttom-div-p">{{tempObject.onlineCount}}</p>
            <p>在线设备数量</p>

            <el-button type="text" :disabled="true" @click="toDeviceFu">管理设备</el-button>
          </div>
          <div class="content-div buttom-div">
            <div style=" width: 100%; height: 160px; position: relative; top: 32px;">
              <span
                style="font-size: 14px; font-family: 'Microsoft YaHei'; font-weight: bold; position: relative;top: 35px;left: 20px;"
              >在线率</span>
              <span
                style="font-size: 17px; font-family: 'Microsoft YaHei'; font-weight: bold; color: #30ff00; position: relative;top: 20px;left: -20px;"
              >{{deviceRate( tempObject.deviceCount, tempObject.onlineCount)}}</span>
              <pancake
                styles="width: 100%; height: 160px; width: 158px; border-radius: 50%; border: 1px solid; height: 158px;"
                id="pancake026"
                :config="deviceConfig"
                :option="{ data: [{value: tempObject.onlineCount, name:'在线'}, {value: tempObject.offlineCount, name:'离线'}], title: '设备状态' }"
              ></pancake>
            </div>
          </div>

          <div class="content-div buttom-div">
            <i class="iconfont icon-baojing fontsize"></i>
            <p class="buttom-div-p">{{alarmCount.alarmCount}}</p>
            <p>报警总数</p>

            <el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
          </div>
          <div class="content-div buttom-div">
            <i class="iconfont icon-gaojingyichuli fontsize"></i>
            <p class="buttom-div-p">{{alarmCount.processCount}}</p>
            <p>已处理</p>
            <el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
          </div>
          <div class="content-div buttom-div">
            <i class="iconfont icon-weichuligaojing fontsize"></i>
            <p class="buttom-div-p">{{alarmCount.unProcessCount}}</p>
            <p>未处理</p>
            <el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
          </div>

          <div class="content-div buttom-div">
            <div style=" width: 100%; height: 160px; position: relative; top: 32px;">
              <span
                style="font-size: 14px; font-family: 'Microsoft YaHei'; font-weight: bold; position: relative;top: 35px;left: 18px;"
              >处理率</span>
              <span
                style="font-size: 17px; font-family: 'Microsoft YaHei'; font-weight: bold; color: #30ff00; position: relative;top: 20px;left: -20px;"
              >{{alarmRate(alarmCount.alarmCount, alarmCount.processCount)}}</span>
              <pancake
                styles="width: 100%; height: 160px; height: 160px; width: 158px; border-radius: 50%; border: 1px solid; height: 158px;"
                :config="alarmConfig"
                id="pancake157"
                :option="{ data: [{value: alarmCount.processCount, name:'已处理'}, {value: alarmCount.unProcessCount, name:'未处理'}], title: '报警处理' }"
              ></pancake>
            </div>
          </div>
        </div>

        <div class="genert-div" v-if="index_m_tzgg">
          <div class="title">云端设备组态流程</div>
          <div class="content">
            <div class="content-div" @click="toProdFu">
              <i class="iconfont icon-chanpinC fontsize"></i>
              <p>添加产品</p>
              <p>定义产品属性</p>
            </div>
            <div class="right-icon">
              <i class="iconfont icon-right-fill youjiantou"></i>
            </div>
            <div class="content-div" @click="toDeviceFu">
              <i class="iconfont icon-tianjiashebei fontsize"></i>
              <p>添加设备</p>
              <p>创建设备与实物对应</p>
            </div>
            <div class="right-icon">
              <i class="iconfont icon-right-fill youjiantou"></i>
            </div>
            <div class="content-div">
              <i class="iconfont icon-icon_xinyong_xianxing_jijin- fontsize"></i>
              <p>数据上报</p>
              <p>设备实时数据上传云端</p>
            </div>
            <div class="right-icon">
              <i class="iconfont icon-right-fill youjiantou"></i>
            </div>
            <div class="content-div">
              <i class="iconfont icon-lishijilu fontsize"></i>
              <p>云端查看</p>
              <p>云端查看设备历史数据</p>
            </div>
          </div>
        </div>

        <div
          class="genert-div button-div"
          style="width: calc((100% - 30px) / 2); margin-right: 30px;"
        >
          <div class="title">
            更新日志
            <div class="see-more" @click="versionSeeMoreClick()">查看更多</div>
          </div>
          <div class="new-div-wrap">
            <div
              style="font-size: 20px; line-height: 24px; margin-bottom: 3px;"
            >更新内容 ( {{versionObj.version}} )</div>
            <div
              style="font-size: 16px; line-height: 25px; padding-left: 0px;  height: 140px; overflow: auto;"
              class="new-info-wrap"
              v-html="versionObj.content"
            >
              <!-- <el-input v-model="versionObj.content" :readonly="true" type="textarea" class="version-input" :rows="6"></el-input> -->
            </div>
          </div>
        </div>

        <div class="genert-div button-div" style="width: calc((100% - 30px) / 2)">
          <div class="title">
            通知公告
            <div class="see-more" @click="noticeSeeMoreClick()">查看更多</div>
          </div>
          <div style="padding: 20px 5px; " class="new-div-wrap">
            <div v-for="(item, index) in newsList" :key="index" class="news-item">
              <span class="ontice-span"></span>
              <span @click="noticeClick(item)">{{item.noticeTitle}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="dashboard-tips">
        <indexTips title="微信小程序" :option="option1"></indexTips>
        <indexTips title="微信公众号" :option="option2"></indexTips>
      </div>
    </div>
  </div>
</template>

<script>
import indexTips from "./bashboardcom/indexTips";
import pancake from "./bashboardcom/pancake_echarts";
import { homeCount } from "@/api/system/home";
import { newUplog } from '@/api/system/uplog'
import { listNotice } from "@/api/system/notice";
import gzhqr from "@/assets/images/gzhqr.jpg"
import ydxcx from "@/assets/images/ydxcx.jpg"
export default {
  name: "cloud",
  data() {
    return {
      activeNames: ["1", "2", "3", "4"],
      DATA: [],
      text: "",
      actor: "",
      count: 0,
      isText: false,
      currentRole: "adminDashboard",
      headerObj: "",
      versionObj: {},
      newsList: [],
      tempObject: {
        onlineCount: "0",
        activeCount: "0",
        deviceCount: "0",
        modelCount: "0",
        offlineCount: "0",
        userId: "",
        userName: ""
      },
      alarmCount: {
        processCount: "0",
        unProcessCount: "0",
        alarmCount: "0"
      },
      deviceConfig: {
        tooltip: {
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: {
          radius: ["50%", "75%"]
        },
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = ["#00cefc", "rgb(211, 251, 253)"];
              return colorList[params.dataIndex];
            }
          }
        }
      },
      alarmConfig: {
        tooltip: {
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: {
          radius: ["50%", "75%"]
        },
        itemStyle: {
          normal: {
            color: function(params) {
              var colorList = ["rgb(255, 158, 98)", "rgb(255, 233, 213)"];
              return colorList[params.dataIndex];
            }
          }
        }
      },
      option1: [
        {
          img: ydxcx,
          lable: "微信小程序",
          describe: "企业用户和个人用户通过微信小程序，可以查看设备，控制设备，查看设备实时数据和历史数据；查看报警信息，处理报警信息，查看项目信息等。"
        }
      ],
      option2: [
        {
          img: gzhqr,
          lable: "微信公众号",
          describe: "通过关注微信公众号，可以实时接收到系统通知，触发器消息等。"
        }
      ],
      index_m_tzgg: false,
      head_btn_gjjk: false,
      head_btn_sbjk: false,
      index_m_ydxcx: false,
      userType: null
    };
  },
  components: {
    indexTips,
    pancake
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.userType = this.$store.getters.userType;
      this.getCount();
      this.getVersionList();
      this.getNoticeList();
    },
    versionSeeMoreClick() {
      this.$router.push({
        path: "/uplog/list"
      });
    },
    noticeSeeMoreClick() {
      this.$router.push({ path: "/news" });
      // this.$router.push({
      //   path: "/admin/notices/list"
      // });
    },
    getNoticeList() {
      listNotice({
          pageNum: 1,
          pageSize: 5
      }).then(response => {
          this.newsList = response.rows
      }).catch(err => {})
    },
    getVersionList() {
      newUplog().then(response => {
        this.versionObj = response.data
      }).catch(err => {})
    },
    noticeClick(row) {
      this.$router.push({ path: "/news", query: { newId: row.noticeId } });
    },
    contentToString(val) {
      let str = "";
      if (val) {
        let list = new Array();
        list = val.split(";");
        list.forEach((v, index) => {
          // if (index !== list.length -1) {
          str += v + " <br>";
          // }
        });
      }

      return str;
    },
    deviceRate(count, zk) {
      let num = ((parseInt(zk) / parseInt(count)) * 100).toFixed(0);
      if (num !== "NaN") {
        return num + " %";
      } else {
        return "0 %";
      }
    },
    alarmRate(count, zk) {
      let num = ((parseInt(zk) / parseInt(count)) * 100).toFixed(0);
      if (num !== "NaN") {
        return num + " %";
      } else {
        return "0 %";
      }
    },
    getAlarmCount() {
    },
    getCount() {
      homeCount().then(response => {
          this.tempObject = {
              onlineCount: response.data.onlineTotal,
              activeCount: response.data.activeCount,
              deviceCount: response.data.deviceTotal,
              modelCount: response.data.projectTotal,
              offlineCount: (response.data.deviceTotal - response.data.onlineTotal) || 0
          }
          this.alarmCount = {
            processCount: response.data.processed,
            unProcessCount: response.data.unProcessed,
            alarmCount: response.data.alarmTotal
          };
      }).catch(err => {
          console.log(err)
      })
    },
    toDeviceFu() {
      this.$router.push({
        path: "/iot/devices"
      });
    },
    toProdFu() {
      this.$router.push({
        path: "/iot/prod"
      });
    },
    toAlarmFu() {
      this.$router.push({
        path: "/trigger/trigger/log"
      });
    },
    getData() {
      if (this.count < this.DATA.length - 1) {
        this.count++;
      } else {
        this.count = 0;
      }
      this.isText = true;
      this.actor = this.DATA[this.count];
    },
    setData() {
      let num = 0;
      let count = 0;
      let active = false;
      let timeoutstart = 5000;
      let timeoutend = 1000;
      let timespeed = 10;
      setInterval(() => {
        if (this.isText) {
          if (count == this.actor.length) {
            active = true;
          } else {
            active = false;
          }
          if (active) {
            num--;
            this.text = this.actor.substr(0, num);
            if (num == 0) {
              this.isText = false;
              setTimeout(() => {
                count = 0;
                this.getData();
              }, timeoutend);
            }
          } else {
            num++;
            this.text = this.actor.substr(0, num);
            if (num == this.actor.length) {
              this.isText = false;
              setTimeout(() => {
                this.isText = true;
                count = this.actor.length;
              }, timeoutstart);
            }
          }
        }
      }, timespeed);
    }
  }
};
</script>

<style lang="scss">
.page-cloud {
  padding: 20px;
  height: calc(100vh - 84px);
  width: 100%;
  padding: 20px;
  background: #f0f2f5;
  overflow: auto;

  .public-nav-div {
    // 最小宽度
    width: 100%;
    min-width: 1100px;
  }

  .genert-div {
    border: 0px;
    border-radius: 5px;
    box-shadow: 0px 1px 3px 1px;
    background-color: white;
    font: 14px/16px "Roboto", sans-serif;
    color: #666666;
    width: 100%;
    float: left;
    margin-bottom: 20px;
    cursor: default;
  }

  .new-div-wrap {
    height: 200px;
    width: calc(100% - 35px);
    overflow: auto;
    padding: 20px 5px 10px 30px;
    padding-left: 30px;
  }

  .title {
    height: 50px;
    border-bottom: 1px solid #c4c4c4;
    padding: 21px 10px 10px 30px;
    font-size: 18px;
  }

  .content {
    height: 160px;
    padding: 30px 20px 30px 30px;
    color: #999;
  }

  .content-div {
    float: left;
    width: 160px;
    min-height: 150px;
    font-size: 16px;
    text-align: center;
    padding-top: 25px;
    border-radius: 5px;

    p {
      margin-top: 10px;
    }
  }

  .content-div:hover {
    box-shadow: 0 0 10px #09c;
    color: #09c;
  }

  .buttom-div {
    margin: 20px 20px 20px 20px;
    margin-left: calc((100% - (170px * 4)) / 8);
    margin-right: calc((100% - (170px * 4)) / 8);
  }

  .fontsize {
    font-size: 64px;
    line-height: 1;
  }

  .dashboard-tips {
    width: 260px;
    float: left;
    margin-left: 20px;
  }

  .youjiantou {
    font-size: 18px;
  }

  .right-icon {
    width: calc((100% - (170px * 4)) / 3);
    float: left;
    padding-top: 65px;
    margin-right: 10px;
    text-align: center;
  }
}

.wel-contailer {
  position: relative;
}

.banner-text {
  position: relative;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}

.buttom-div-p {
  font-size: 22px;
}

.news-item {
  position: relative;
  left: 20px;
  line-height: 30px;
  font-size: 16px;
  width: calc(100% - 20px);
  overflow: hidden;
}

.news-item:hover {
  color: #1890ff;
}

.ontice-span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #1890ff;
  margin-right: 20px;
  position: relative;
  top: -1px;
}

.see-more {
  position: relative;
  // left: 10px;
  float: right;
  font-size: 12px;
  // top: 10px;
}

.see-more:hover {
  color: #1890ff;
}
.new-div-wrap .new-info-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.new-div-wrap .new-info-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #9e9d9d;
  background: #ffffff;
}
.new-div-wrap .new-info-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}

.page-cloud::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.page-cloud::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #9e9d9d;
  background: #ffffff;
}
.page-cloud::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
<style>
.version-input .el-textarea__inner {
  border: 0px;
  cursor: default;
}
</style>
