<template>
  <div id="index" ref="appRef">
<!--   <div
      class="bg"
      :style="{
        backgroundImage:
          'url(' + require(`../assets/${backgroundPic.index}.png`) + ')',
      }"
    >-->
    <div
      class="bg"
    >
    <!-- <div class="body-header"></div> -->
      <div class="body-left"></div>
      <div class="body-right"></div>
      <div class="body-bottom"></div>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <headerIndex
          :cdata="{ title: '首页', margin: '40px auto' }"
          :isShow="false"
        />

        <div class="body-box">
          <!-- 第三行数据 -->
  <div class="content-box">
            <!-- <div>
              <dv-border-box-12>
                <emergencyLeft />
              </dv-border-box-12>
            </div> -->

            <!-- <div class="leftTravel">
               <indexLeft />
            </div>


            <div class="rightTravel">
              <indexRight />
            </div> -->
                <!-- <div class="food-content-box">
            <div>
              <div class="data-block-bk">
                <div class="data-tit-bg">总巡查接警占比</div>
                <div class="tabs_datag" style="margin: 9px 0 0 17px;">
                  <ul style="justify-content: flex-start;">
                    <li>昨日</li>
                    <li>本月</li>
                    <li>本年</li>
                  </ul>
                </div>
                <div class="data-flex" style="height: auto;">
                  <WaterChart />
                  <span class="data1-text">
                    <li><i>1000</i><span>电话联络量</span></li>
                    <li><i>236</i><span>真警数量</span></li>
                    <li>
                      <i style="color: #50d8fa">30%</i><span>真警占比</span>
                    </li>
                  </span>
                </div>
              </div>
              <div class="data-block-bk mar-top">
                <div class="data-tit-bg">本周/月/季度巡查</div>
                <div class="">
                  <HoriBar />
                </div>
              </div>
              <div class="data-block-bk mar-top">
                <div class="data-tit-bg">巡查轨迹</div>
                <div class="tabs_datag" style="margin: 9px 0 0 17px;">
                  <ul style="justify-content: flex-start;">
                    <li>本周</li>
                    <li>本月</li>
                    <li>本年</li>
                  </ul>
                </div>
                <div class="data-flex" style="height: auto;">
                  <PieChart />
                </div>
              </div>
            </div>
            <div>

            </div>

            <div class="rightIndex">
              <div class="data-block-bk">
                <div class="data-tit-bg">总巡防设备记录</div>
                <div class="data-flex">
                  <Chart :cdata="xdata" />
                </div>
              </div>
              <div class="data-block-bk mar-top">
                <div class="data-tit-bg">总巡防管路记录</div>
                <Chart :cdata="cdata" />
              </div>
              <div class="data-block-bk mar-top" style="height: 316px;">
                <div class="data-tit-bg">总巡防异动记录</div>
                <div class="tabs_datag">
                  <ul>
                    <li>本周</li>
                    <li>本月</li>
                    <li>本年</li>
                  </ul>
                </div>
                <ul class="data-exce">
                  <li><span>异动信息</span><span>无巡查</span></li>
                  <li><span>异动信息</span><span>无巡查</span></li>
                  <li><span>异动信息</span><span>无巡查</span></li>
                  <li><span>异动信息</span><span>无巡查</span></li>
                </ul>
              </div>
            </div>
          </div> -->
          </div>
          <!-- 第四行数据 -->
          <div class="bottom-box">
            <!-- <dv-border-box-13> </dv-border-box-13>
            <dv-border-box-12> </dv-border-box-12> -->
          </div>
          <div class="footer-nav">
            <!-- <div class="carChange" v-show="carChangeShow">
                <div class="carMange" @click="goPage(0)">车辆管理</div>
                <div class="carMange" >车辆资产管理</div>
            </div> -->
            
          
              <div class="baseBlock green" @click="goPage(7)">
              <p>绿色双碳</p>
            </div>
            <div class="baseBlock land" @click="goPage(1)">
              <p>房地资源</p>
            </div>
              <!-- <div class="baseBlock carAdmin" @mouseover="mouseOver"
                @mouseleave="mouseLeave"> -->
                 <div class="baseBlock carAdmin" @mouseover="mouseOver"
                @mouseleave="mouseLeave">
                <div class="carChange" v-show="carChangeShow">
                      <!-- <div class="carChange"> -->
              <div class="carMange" @click="goPage(0)">
                <div class="zhihui">
                   车辆管理 
                </div>
                 <!-- <span>车辆管理</span> -->
               </div>
              <div class="carMange2" @click="goPage(8)">
                <div class="zhihui">
                   智慧出行 
                </div>
               </div>
            </div>
              <p>车辆管理</p>
            </div>
             <div class="baseBlock fire" @click="goPage(2)">
<!--                <div class="baseBlock fire">-->
              <p>消防安全</p>
            </div>
             <div class="baseBlock quanjing" @click="goPage(9)">
              <p>360全景</p>
            </div>
            <div class="baseBlock travel" @click="goPage(5)">
              <p>出行安全</p>
            </div>
            <div class="baseBlock wisdom" @click="goPage(3)">
              <p>智慧工地</p>
            </div>
            <div class="baseBlock food" @click="goPage(4)">
              <p>食品安全</p>
            </div>
            <!-- <div class="baseBlock emergency" @click="goPage(6)"> -->
                 <div class="baseBlock emergency">
              <p>应急保障</p>
            </div>
          
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import indexLeft from "./index/indexLeft";
import indexRight from "./index/indexRight";
import headerIndex from "../components/layout/header";
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import Chart from "./index/chart.vue";
import HoriBar from "./index/horiBar.vue";
import PieChart from "./index/pieChart.vue";
import LineChart from "./index/lineChart.vue";
import WaterChart from "./index/waterChart.vue";
// import { url } from "inspector";

export default {
  mixins: [drawMixin],
  data() {
    return {
      backgroundPic: {
        index: "bird-bg",
      },
      cdata: {
        dataSH: [
          { name: "管路1", value: 80 },
          { name: "管路2", value: 50 },
          { name: "管路3", value: 70 },
          { name: "管路4", value: 30 },
          { name: "管路5", value: 20 },
          { name: "管路6", value: 65 },
          { name: "管路7", value: 73 },
        ],
      },
      xdata: {
        dataSH: [
          { name: "设备1", value: 61 },
          { name: "设备2", value: 22 },
          { name: "设备3", value: 15 },
          { name: "设备4", value: 82 },
          { name: "设备5", value: 53 },
          { name: "设备6", value: 80 },
          { name: "设备7", value: 40 },
        ],
      },
      carChangeShow: false,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
    };
  },
  components: {
    headerIndex,
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight,
    indexRight,
    indexLeft,
    Chart,
    HoriBar,
    PieChart,
    LineChart,
    WaterChart,
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    goPage(val) {
      if (val == 0) {
        console.log("车辆管理-主场景")
        this.$router.push("/car");
        
      } else if (val == 1) {
         console.log("房地资源-主场景")
        this.$router.push("/land");
      } else if (val == 2) {
         console.log("消防安全-主场景")
        this.$router.push("/fire");
      } else if (val == 3) {
         console.log("智慧工地-主场景")
        this.$router.push("/wisdom");
      } else if (val == 4) {
           console.log("食品安全-主场景")
        this.$router.push("/food");
      } else if (val == 5) {
          console.log("出行安全-主场景")
        this.$router.push("/travel");
      } else if (val == 6) {
          console.log("应急保障-主场景")
        this.$router.push("/emergency");
      } else if (val == 8) {
          console.log("智慧出行-主场景")
        this.$router.push("/carTravel");
      }else if (val == 9) {
          console.log("360全景-主场景")
      }else {
           console.log("绿色双碳-主场景")
        this.$router.push("/green");

      }
    },
    mouseOver() {
      //   this.active = "background-color:black";
      //   // 操作dom 获取p标签改变其样式
      //   var acps = this.$refs.acp
      //   acps.style.color = "red"
      this.carChangeShow = true;
    },
    // 移出
    mouseLeave() {
      //   this.active = "";
      //   this.$refs.acp.style=''
      this.carChangeShow = false;
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
.body-left{
    background: url('../assets/left.png') no-repeat!important;
}
.body-right{
    background: url('../assets/right.png') no-repeat!important;
}

.body-bottom{
    background: url('../assets/down.png') no-repeat!important;
}
 .leftTravel{
      position: absolute;
    left: 2%;
    }
    .rightTravel{
      position: absolute;
    right: 2%;
    }
    .food-content-box {
  display: grid;
  grid-template-columns: 2.3fr 5fr 1.8fr;
  margin: -45px 50px;
}
.rightIndex{
     position: absolute;
    right: 2%;
}
.data-block-bk {
  border: 2px solid #29a3d3a1;
//   background: #11223289;
  background: rgba(16,29,37,0.8);
  // height: 280px;
  .data-tit-bg {
    height: 22px;
    width: 430px;
    padding: 16px 0px 16px 41px;
    margin: 2px 0 0 0px;
    font-size: 15px;
    line-height: 9px;
    font-weight: 700;
    color: #a8ddf4;
    background: url("../assets/tit.png") no-repeat -10px 10px;
    background-size: contain;
  }
  .data-flex {
    display: flex;
    justify-content: center;
    // padding: 20px;
  }
}
$box-height: 410px;
$box-width: 300px;
.mar-top {
  margin: 15px 0 0 0;
}
.bg-color-black {
  height: $box-height - 30px;
  border-radius: 10px;
}
.times_info {
  // width: 232px;
  // height: 360px;
  padding: 16px 20px;
  background: #112232b0;
  .times_tit {
    font-size: 14px;
    color: #97c6d9;
    text-align: left;
    margin: 0px 0 12px 8px;
  }
  ul {
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // width: 200px;
      padding: 0 8px;
      margin: 0 0 15px 0;
      span {
        width: 128px;
        text-align: left;
        float: left;
      }
    }
  }
}
.right_h {
  width: 101px;
  float: left;
}
.right_flex {
  display: flex;
}
.right_bot {
  margin: 12px 0 2px 0;
}
.right_text {
  font-size: 12px;
  color: #fff;
}
.right_desc {
  font-size: 12px;
  color: #91a3ab;
}
.times_info2 {
  height: 263px;
  width: 220px;
  padding: 16px 16px;
  background: #112232b0;
  .times_tit {
    font-size: 14px;
    color: #97c6d9;
    text-align: left;
    margin: 0px 0 12px 8px;
  }
  ul {
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // width: 200px;
      padding: 0 8px;
      margin: 0 0 15px 0;
      span {
        width: 128px;
        text-align: left;
        float: left;
      }
    }
  }
}
.footer-nav {
  position: absolute;
//   bottom: -100px;
//   height: 200px;
//   bottom: -6px;
 bottom: -35px;
  left: 50%;
  margin: auto;
  transform: scale(1, 1) translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1178px;
  .carChange {
   position: absolute;
    bottom: 95px;
    left: 21%;
}
.carMange{
    width: 100px;
    height: 50px;
    background: url("../assets/indexCar.png") no-repeat 0px -25px;
    display: inline-block;
cursor: pointer;
    // color: ;
    .zhihui{
        width: 50px;
    height: 45px;
    margin-right: 31px;
    margin-top: -13px;
    /* padding: 10px; */
    display: inline-block;
    }
}
.carMange2{
    // margin-left: 15px;
    width: 100px;
    height:50px;
    background: url("../assets/indexCar.png") no-repeat 0px -25px;
    display: inline-block;
    cursor: pointer;
    margin-left: -31px;
    // color: ;
     .zhihui{
        width: 50px;
    height: 45px;
    margin-right: 31px;
    margin-top: -13px;
    /* padding: 10px; */
    display: inline-block;
    }
}
  .baseBlock {
    cursor: pointer;
    color: #68bff4;
    font-size: 20px;
    width: 120px;
    height: 100px;
    text-align: center;
    letter-spacing: 3px;
  }
  .baseBlock:hover {
    cursor: pointer;
    color: #c7fcff;
    font-size: 20px;
    width: 120px;
    height: 100px;
    text-align: center;
    letter-spacing: 3px;
  }
  .carAdmin {
    background: url("../assets/index/car.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .carAdmin:hover {
    background: url("../assets/index/car_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .land {
    background: url("../assets/index/land.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .land:hover {
    background: url("../assets/index/land_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .fire {
    // background: url("../assets/index/fire.png") no-repeat 0px -25px;
    background: url("../assets/index/fire_display.png") no-repeat 0px -25px;
    background-size: cover;
      color: #c7fcff;
  }
  .fire:hover {
    // background: url("../assets/index/fire_hot.png") no-repeat 0px -25px;
    // background-size: cover;
     color: #c7fcff;
  }
  .wisdom {
    background: url("../assets/index/wisdom.png") no-repeat 0px -25px;
    background-size: cover;
  }

  .wisdom:hover {
    background: url("../assets/index/wisdom_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .food {
    background: url("../assets/index/food.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .food:hover {
    background: url("../assets/index/food_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .travel {
    background: url("../assets/index/travel.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .travel:hover {
    background: url("../assets/index/travel_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .emergency {
    // background: url("../assets/index/emergency.png") no-repeat 0px -25px;
    background: url("../assets/index/emergency_display.png") no-repeat 0px -25px;   
    background-size: cover;
      color: #c7fcff;
  }
  .emergency:hover {
    // background: url("../assets/index/emergency_hot.png") no-repeat 0px -25px;
    // background-size: cover;
   color: #c7fcff;
  }
  .green {
    background: url("../assets/index/green.png") no-repeat 0px -25px;
    background-size: cover;
  }
  .green:hover {
    background: url("../assets/index/green_hot.png") no-repeat 0px -25px;
    background-size: cover;
  }
    p {
    margin: 90px 0 0 0;
  }
  .quanjing{
    //  background: url("../assets/index/360.png") no-repeat 0px -25px;
    background: url("../assets/index/360.png") no-repeat 0px -35px;
    //  width: 150px;
    // height: 120px;
    // background-size: 150px 120px;
    width: 155px;
    height: 130px;
    background-size: 150px 130px;
    margin-top: -17px;
     p {
     margin: 110px 0 0 0;   
    }
  }

   .quanjing:hover{
     background: url("../assets/index/360_hot.png") no-repeat 0px -35px;
    //   width: 150px;
    // height: 120px;
    //  background-size: 150px 120px;
    width: 155px;
    height: 130px;
    background-size: 150px 130px;
    margin-top: -17px;
    p {
     margin: 110px 0 0 0;   
    }
  }

  
}
</style>
<style lang="scss">
.timeStle {
  width: 150px !important;
  color: #0e8bff;
  input {
    background: transparent;
    border: 0;
    height: 23px;
    line-height: 23px;
    color: #0e8bff;
    padding: 0 3px;
  }
  .el-input__inner {
    padding: 0 3px;
  }
  .el-input__inner:hover {
    color: #0e8bff;
  }
  .el-input__prefix {
    display: none;
    top: -8px;
    left: 2px;
  }
  .el-input__suffix {
    top: -8px;
  }
}
</style>
<style lang="scss" scoped>
@import "../assets/scss/index.scss";
.food-content-box {
  display: grid;
  grid-template-columns: 2.3fr 5fr 1.8fr;
  margin: -48px 50px;
}
.float_time {
  float: right;
  margin: -23px 10px 0 0;
  font-size: 13px;
  padding: 2px 8px;
  background: #0b4471;
  border: 1px solid #0e8bff;
  color: #0e8bff;
  cursor: pointer;
}

.leftt_bg {
  width: 70px;
  float: left;
  border-right: 1px solid aqua;
  margin: 0 8px 0 0;
  padding: 0 6px 0 0;
  .left_arrow {
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 3px 0 0 8px;
    margin: 10px 0 23px 0;
    width: 66px;
    height: 26px;
    background: url("../assets/fire/blue.png");
  }
  .left_arrow1 {
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 10px 0 23px 0;
    padding: 3px 0 0 8px;
    width: 66px;
    height: 26px;
    background: url("../assets/fire/red.png");
  }
  .left_arrow:hover {
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 10px 0 23px 0;
    padding: 3px 0 0 8px;
    width: 66px;
    height: 26px;
    background: url("../assets/fire/red.png");
  }
}
.right_h {
  width: 101px;
  float: left;
}
.right_flex {
  display: flex;
}
.right_bot {
  margin: 12px 0 2px 0;
}
.right_text {
  font-size: 12px;
  color: #fff;
}
.right_desc {
  font-size: 12px;
  color: #91a3ab;
}
.times_info {
  // width: 232px;
  // height: 360px;
  padding: 16px 20px;
  background: #112232b0;
  .times_tit {
    font-size: 14px;
    color: #97c6d9;
    text-align: left;
    margin: 0px 0 12px 8px;
  }
  ul {
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // width: 200px;
      padding: 0 8px;
      margin: 0 0 15px 0;
      span {
        width: 128px;
        text-align: left;
        float: left;
      }
    }
  }
}
.times_info2 {
  height: 263px;
  width: 220px;
  padding: 16px 16px;
  background: #112232b0;
  .times_tit {
    font-size: 14px;
    color: #97c6d9;
    text-align: left;
    margin: 0px 0 12px 8px;
  }
  ul {
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      // width: 200px;
      padding: 0 8px;
      margin: 0 0 15px 0;
      span {
        width: 128px;
        text-align: left;
        float: left;
      }
    }
  }
}
.out_nums {
  font-size: 12px;
  color: #dbdbdc;
  // display: flex;
  margin: 0 0 6px 0;
}
.times_nums {
  display: flex;
  i {
    font-style: normal;
    font-size: 18px;
    color: #ffc426;
  }
  span {
    font-size: 12px;
    color: #fff;
  }
}
.times_precent {
  display: flex;
  i {
    font-style: normal;
    font-size: 15px;
    color: #ffc426;
  }
  span {
    font-size: 12px;
    color: #fff;
  }
}
.data-block-bk {
  border: 2px solid #29a3d3a1;
//   background: #11223289;
  background: rgba(16,29,37,0.8);
  // height: 280px;
  .data-tit-bg {
    height: 22px;
    width: 430px;
    padding: 16px 0px 16px 41px;
    margin: 2px 0 0 0px;
    font-size: 15px;
    line-height: 9px;
    font-weight: 700;
    color: #a8ddf4;
    background: url("../assets/tit.png") no-repeat -10px 10px;
    background-size: contain;
  }
  .data-flex {
    display: flex;
    justify-content: center;
    // padding: 20px;
  }
}
$box-height: 410px;
$box-width: 300px;
.mar-top {
  margin: 15px 0 0 0;
}
.bg-color-black {
  height: $box-height - 30px;
  border-radius: 10px;
}
.text {
  color: #c3cbde;
}
.body-box {
  .dv-scr-board {
    // width: 270px;
    height: 450px;
  }
}
.dv-padd {
  // line-height: 19px;
  padding: 10px 10px 0 30px;
}
.center_block {
  width: 260px;
  height: 265px;

  .cen_block {
    width: 195px;
    height: 148px;
    background: url("../assets/foodSafe/card.png");
    margin: auto;
    cursor: pointer;
    .cen_tit {
      color: rgba(255, 255, 255, 0.826);
      font-weight: 570;
      font-size: 14px;
      text-align: center;
      letter-spacing: 1px;
      padding: 22px 0 3px 0;
    }
    .cen_bg {
      width: 128px;
      height: 81px;
      margin: auto;
    }
  }

  .cen_map {
    width: 35px;
    height: 45px;
    background: url("../assets/foodSafe/map.png");
    margin: auto;
    cursor: pointer;
  }
}
.center_block:hover {
  width: 260px;
  height: 265px;
  .cen_block {
    width: 195px;
    height: 148px;
    background: url("../assets/foodSafe/card_hot.png");
    margin: auto;
    cursor: pointer;
  }
  .cen_map {
    width: 99px;
    height: 106px;
    background: url("../assets/foodSafe/map_hot.png");
    margin: -32px auto 0 auto;
    cursor: pointer;
  }
}
.data-exce {
  li {
    height: 40px;
    width: 402px;
    margin: 10px auto 20px auto;
    background: url("../assets/fire/firesafe.png");
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    span {
      margin: 10px 20px 10px 62px;
    }
  }
}
.data1-text {
  margin: 18px 0 0 0;
  li {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 20px 0;
    i {
      color: #046afb;
      font-style: normal;
      font-size: 28px;
      margin: 0 20px 0 0;
      font-weight: bold;
      text-align: right;
    }
    span {
      width: 120px;
      color: #91a3ab;
      text-align: left;
    }
  }
}
.c_posi {
  position: absolute;
}
</style>