<template>
  <section class="app-main">
    <div class="container">
      <div class="container-nav">
        <div class="nav-item">
          <div class="item tj">
            <img src="~@/assets/home/统计2.png" alt="">
            <div class="navname">
              <span class="itemName">统计分析</span>
            </div>
            <router-link to="/statisticalAnalysis"><img class="tjdetail" src="~@/assets/home/统计3.png" alt=""></router-link>
          </div>
          <div class="item kz">
            <img src="~@/assets/home/控制2.png" alt="">
            <div class="navname">
              <span class="itemName">设备控制</span>
            </div>
            <router-link to="/equipControl"><img class="tjdetail" src="~@/assets/home/控制3.png" alt=""></router-link>
          </div>
        </div>
        <div class="nav-item">
          <div class="item lq">
            <img src="~@/assets/home/粮情2.png" alt="">
            <div class="navname">
              <span class="itemName">粮情监控</span>
            </div>
            <router-link to="/grainDetection"><img class="tjdetail" src="~@/assets/home/粮情3.png" alt=""></router-link>
          </div>
          <div class="item tb">
            <img src="~@/assets/home/同步2.png" alt="">
            <div class="navname">
              <span class="itemName">数据同步</span>
            </div>
            <router-link to="/dataSynchronism"><img class="tjdetail" src="~@/assets/home/同步3.png" alt=""></router-link>
          </div>
        </div>
        <div class="nav-item ">
          <div class="item pz">
            <img src="~@/assets/home/配置2.png" alt="">
            <div class="navname">
              <span class="itemName">设备配置</span>
            </div>
            <router-link to="/equipConfig"><img class="tjdetail" src="~@/assets/home/配置3.png" alt=""></router-link>
          </div>
          <div class="item xt">
            <img src="~@/assets/home/系统管理2.png" alt="">
            <div class="navname">
              <span class="itemName">系统管理</span>
            </div>
            <router-link to="/system"><img class="tjdetail" src="~@/assets/home/系统3.png" alt=""></router-link>
          </div>
        </div>

      </div>
      <div class="info">
        <div class="info-item">
          <div class="info-content">
            <div class="info-title"><span>粮情信息</span></div>
            <div class="info-list">
              <van-list>
                <van-cell v-for="(item,index) in grainlist" :key="index"  :value="item.time">
                  <template #title>
                    <i class="title-dot" v-show="item.warnningLevel == 1"></i>
                    <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
                    <i class="title-dot2" v-show="item.warnningLevel == 3"></i>
                    <span>{{item.title}}</span>
                  </template>
                </van-cell>
              </van-list>
            </div>
          </div>
          <div class="info-content">
            <div class="info-title"><span>报警信息</span></div>
            <div class="info-list">
              <van-list>
                <van-cell v-for="item in alarmList" :key="item.time" :value="item.time">
                  <template #title>
                    <i class="title-dot" v-show="item.warnningLevel == 1"></i>
                    <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
                    <i class="title-dot2" v-show="item.warnningLevel == 3"></i>
                    <span>{{item.title}}</span>
                  </template>
                </van-cell>
              </van-list>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-content">
            <div class="info-title"><span>运行日志</span></div>
            <div class="info-list">
              <van-list>
                <van-cell v-for="item in runninglist" :key="item.time" :value="item.time">
                  <template #title>
                    <i class="title-dot" v-show="item.warnningLevel == 1"></i>
                    <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
                    <i class="title-dot2" v-show="item.warnningLevel == 3"></i>
                    <span>{{item.title}}</span>
                  </template>
                </van-cell>
              </van-list>
            </div>
          </div>
          <div class="info-content">
            <div class="info-title"><span>在线运行设备</span></div>
            <div class="info-list">
              <van-list>
                <van-cell v-for="item in onLinelist" :key="item.time" :value="item.time">
                  <template #title>
                    <i class="title-dot" v-show="item.warnningLevel == 1"></i>
                    <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
                    <i class="title-dot2" v-show="item.warnningLevel == 3"></i>
                    <span>{{item.title}}</span>
                  </template>
                </van-cell>
              </van-list>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
// getAlarmInfoList
import { getGainList, getAlarmInfoList, getLogList, getOnlineList } from '@/api/home/index'
export default {
  name: 'AppMain',
  data () {
    return {
      grainlist: [
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:00',warnningLevel:'1'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:01',warnningLevel:'2' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:02',warnningLevel:'1' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:03' ,warnningLevel:'3'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:04',warnningLevel:'1' }
      ],
      alarmList: [
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:00',warnningLevel:'1'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:01',warnningLevel:'2' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:02',warnningLevel:'1' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:03' ,warnningLevel:'3'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:04',warnningLevel:'1' }
      ],
      runninglist: [
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:00',warnningLevel:'1'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:01',warnningLevel:'2' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:02',warnningLevel:'1' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:03' ,warnningLevel:'3'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:04',warnningLevel:'1' }
      ],
      onLinelist: [
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:00',warnningLevel:'1'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:01',warnningLevel:'2' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:02',warnningLevel:'1' },
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:03' ,warnningLevel:'3'},
        { title: '1号仓最高温11℃，最低温1℃，平均温度5℃', time: '08:04',warnningLevel:'1' }
      ]
    }
  },
  mounted() {
    this.getList()
    this.getAlarmList()
    this.getLogInfoList()
    this.getOnLineInfoList()
  },
  methods:{
    lintToTj() {
       this.$router.push({ path: "/front/statisticalAnalysis" })
    },
    getList() {
      let orgCode = JSON.parse(localStorage.getItem("userInfo")).orgCode
      getGainList(orgCode).then(res => {
        console.log(res,'getGainList')
        // if(res.data) {
        //   this.grainlist = res.data
        // }
      }).catch(err => {
        console.log(err)
      })
    },
    getAlarmList() {
      let orgCode = JSON.parse(localStorage.getItem("userInfo")).orgCode
      getAlarmInfoList(orgCode).then(res => {
        console.log(res,'getAlarmInfoList')
      }).catch(err => {
        console.log(err)
      })
    },
    getLogInfoList() {
      let orgCode = JSON.parse(localStorage.getItem("userInfo")).orgCode
      getLogList(orgCode).then(res => {
        console.log(res,'getLogList')
      }).catch(err => {
        console.log(err)
      })
    },
    getOnLineInfoList() {
      let orgCode = JSON.parse(localStorage.getItem("userInfo")).orgCode
      getOnlineList(orgCode).then(res => {
        console.log(res,'getOnlineList')
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 100px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f5f5fa;
  margin: 0 auto;
  .container {
    min-height: calc(100vh - 100px);
    padding: 10px;
    // background-color: pink;
    .container-nav {
      // background: yellow;
      display: flex;
      // flex-wrap:wrap ;
      justify-content: space-between;
      .nav-item1 {
        min-width: 400px;
        height: 248px;
        flex: auto;
        // background-color: purple;
        display: flex;
        // flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
      .navname {
        display: flex;
        flex-direction: column;
        color: #fff;
        .sysName {
          font-size: 16px;
        }
        .itemName {
          font-size: 25px;
          margin-top: 10px;
        }
      }
      .nav-item {
        min-width: 400px;
        height: 248px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: auto;
        .item {
          height: 120px;
          width: 100%;
          // background-color: red;
          border-radius: 10px;
          position: relative;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          // background: url("~@/assets/home/统计1.png") no-repeat;
          // background-size: 100% 100%;
          .navname {
            display: flex;
            flex-direction: column;
            color: #fff;
            .sysName {
              font-size: 16px;
            }
            .itemName {
              font-size: 25px;
              margin-top: 10px;
            }
          }
          img {
            width: 90px;
            height: 90px;
          }
          .xtimg {
            width: 90px;
            height: 90px;
          }
          .tjdetail {
            width: 60px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            text-align: center;
            position: absolute;
            bottom: 15px;
            right: 35px;
            cursor: pointer;
          }
        }
      }
      .nav-item:nth-child(2) {
        // flex: auto;
        margin: 0 15px;
        /* width: 400px;
        height: 300px;
        background-color: purple; */
      }
      .tj {
        position: relative;
        background: url("~@/assets/home/统计1.png") no-repeat;
        background-size: 100% 100%;
        img {
          width: 110px;
          height: 110px;
        }
        .tjdetail {
          width: 80px;
          height: 36px;
          position: absolute;
          bottom: 28px;
          right: 40px;
          cursor: pointer;
        }
      }
      .lq {
        position: relative;
        background: url("~@/assets/home/粮情1.png") no-repeat;
        background-size: 100% 100%;
      }
      .kz {
        position: relative;
        background: url("~@/assets/home/控制1.png") no-repeat;
        background-size: 100% 100%;
      }
      .pz {
        position: relative;
        background: url("~@/assets/home/配置1.png") no-repeat;
        background-size: 100% 100%;
      }
      .tb {
        position: relative;
        background: url("~@/assets/home/同步1.png") no-repeat;
        background-size: 100% 100%;
      }
      .xt {
        position: relative;
        background: url("~@/assets/home/系统管理1.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .info {
      width: 100%;
      // height: 600px;
      margin-top: 10px;
      .info-item {
        width: 100%;
        // height: 300px;
        display: flex;
        justify-content: space-between;

        .info-content {
          width: 49.5%;
          height: 250px;
          padding: 10px;
          background-color: #ffffff;
          border-radius: 10px;
          box-shadow: rgb(21, 17, 24) 0px 0px 2px;
          .info-title {
            border-left: 4px solid #5283e7;
            padding-left: 10px;
          }
          .info-list {
            padding: 4px;
            .van-cell {
              line-height: 20px;
            }
            .van-cell__title {
              display: flex;
              justify-content: flex-start;
              width: 90%;
              align-items: center;
              flex: none;
            }
            .van-cell:nth-child(odd) {
              background: #f2f6ff;
            }
          }
        }
      }
      .info-item:last-child {
        margin-top: 5px;
      }
    }
    .title-dot {
      // content:'';
      display: block;
      width: 8px;
      height: 8px;
      background: green;
      border-radius: 50%;
      margin-right: 6px;
    }
    .title-dot1 {
      // content:'';
      display: block;
      width: 8px;
      height: 8px;
      background: #ffc320;
      border-radius: 50%;
      margin-right: 6px;
    }
    .title-dot2 {
      // content:'';
      display: block;
      width: 8px;
      height: 8px;
      background: #ff6666;
      border-radius: 50%;
      margin-right: 6px;
    }
  }
}
</style>

