<template>
  <d2-container class="page">
    <!-- <div class="mapPosition">
      <div>
        <div class="ckt-bg">
          <span class="ckt-bg-font">当天出库量(吨)</span>
          <div class="ckt-szk-bg">70</div>
          <span class="ckt-bg-little"
            >较昨日增长<span class="zcColor">15.9%</span
            ><img src="./image/zezhang.png"
          /></span>
        </div>
        <div class="rkt-bg">
          <span class="rkt-bg-font">当天入库量(吨)</span>
          <div class="rkt-szk-bg">80</div>
          <span class="rkt-bg-little"
            >较昨日降低<span class="jdColor">15.9%</span
            ><img src="./image/jiangdi.png"
          /></span>
        </div>
      </div>

      <div class="kck-content">
        <div class="kck-content-out">
          <span class="kck-content-in-1"
            >总仓容<span class="kck-content-num1">100</span>吨</span
          >
          <span class="kck-content-in-2"
            >已用<span class="kck-content-num2">70</span>吨</span
          >
          <span class="kck-content-in-3"
            >剩余可用<span class="kck-content-num3">30</span>吨</span
          >
        </div>
      </div>
     
   
    </div> -->
    <div class="top" style="display:flex;justify-content:space-between">
      <!-- 报警待处理 -->
      
     <div class="page-content left-content">
        <span class="content-title">报警待处理</span>
        <el-table
          :data="tableData"
          class="table-content"
          @row-click="jumpDetails"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="ckmc"
            align="center"
            label="仓库名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <img class="ckmcImg" src="./image/bjck.png" />
              <span>{{ scope.row.ckmc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cfmc"
            label="仓房名称"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="bjsj"
            label="报警时间"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="yclddsc"
            align="center"
            label="已处理等待时常"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="处理">
            <el-button
              class="czBut"
              type="button"
              size="small"
              icon="el-icon-edit"
              >反馈</el-button
            >
          </el-table-column>
        </el-table>
        <span class="seeMore">查看更多></span>
      </div> 
      <div><h1>中间区域</h1></div>
      <div class="page-content left-content contentX">
        <span class="content-title">出入库数量趋势</span>
        <el-row>
          <el-date-picker
            class="timeOption"
            v-model="time"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          >
          </el-date-picker>
        </el-row>

        <div
          class="myChart"
          id="myChart"
          :style="{ width: '100%', height: '82%', top: '10%' }"
        ></div>
      </div>
    </div>

    <div class="page-content-bottom">
      <span class="content-bottom-title">
        <img class="arrow" src="./image/xjt.png" />近一周粮食数量变化</span
      >
      <div style="position: absolute; right: 7.3%; top: 20px; display: flex">
        <div>
          <el-button type="primary">今日</el-button>
          <el-button type="primary">本周</el-button>
          <el-button type="primary">本月</el-button>
        </div>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <!-- <el-date-picker
          class="timeOption"
          v-model="timeValue"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker> -->
        </div>
      </div>

      <div class="bottom_div">
        <div class="imgLeft_father">
          <!-- <img src="./image/kuang-bg_2.png" alt="" class="imgLeft" /> -->
          <div>
            <div style="font-size: 10px; margin-left: 20px">仓房名称:</div>
            <div style="text-align: center"></div>
          </div>
          <div>
            <div style="font-size: 10px; margin-left: 20px">粮食种类:</div>
            <div style="text-align: center"></div>
          </div>
          <div>
            <div style="font-size: 10px; margin-left: 15px">
              目前粮食数量(kg):
            </div>
            <div style="text-align: center; margin-bottom: 3px"></div>
            <div style="font-size: 10px; text-align: center">
              同比昨天<span class="zcColor"></span
              ><img src="./image/zezhang.png" />
            </div>
          </div>
        </div>
        <div
          class="myChart2"
          id="myChart2"
          :style="{ width: '80%', height: '80%', top: '10%' }"
        ></div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import fjmap from "./fjmap";
export default {
  components: { fjmap },
  data() {
    return {
      timeValue: [],
      time: "",
      tableData: [
        // {
        //   ckmc: "商丘中转库",
        //   cfmc: "3号仓",
        //   bjsj: "2020-10-21",
        //   yclddsc: "2小时",
        // },
        // {
        //   ckmc: "商丘中转库",
        //   cfmc: "5号仓",
        //   bjsj: "2020-10-22",
        //   yclddsc: "5小时",
        // },
      ],
      tzggListData: [
        // { name: "哈哈哈" },
        //  { name: "哈哈哈" }
      ],
    };
  },
  created() {},
  mounted() {
    //出入库数量趋势

    this.drawLine();
   
    //粮食数量变化
    this.drawQuline();
  },
  methods: {
    jumpDetails() {},
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "one-row";
      } else {
        return "two-row";
      }
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // title: { text: "在Vue中使用echarts" },
        tooltip: {
          backgroundColor: "rgba(21, 96, 176, 0.5)",
          borderColor: "#7dc9de",
          textStyle: {
            color: "dafaff",
          },
        },
        legend: {
          data: ["出库", "入库"],
          textStyle: {
            color: "#dafaff",
          },
        },
        grid: {
          top: "40px",
          left: "5%",
          right: "4%",
          // bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#0a4b88",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#dafaff",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: "solid",
              color: "#0a4b88",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#dafaff",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "出库",
            type: "line",
            stack: "Total",
            smooth: true,
            // data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
          },
          {
            name: "入库",
            type: "line",
            stack: "Total",
            smooth: true,
            // data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90],
          },
        ],
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    drawQuline() {
      // 基于准备好的dom，初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart2.setOption({
        // title: { text: "在Vue中使用echarts" },
        xAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#005292",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
              },
            },
            axisLine: {
              show: true, // X轴 网格线 颜色类型的修改
              lineStyle: {
                type: "dashed",
                color: "#005292",
              },
            },

            data: [
              "10-23周日",
              "10-24周一",
              "10-25周二",
              "10-26周三",
              "10-27周四",
              "10-28周五",
              "10-29周六",
            ],
          },
        ],
        grid: {
          top: "5%",
          left: "7%",
          right: "3%",
          bottom: "15%",
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#005292",
              },
            },
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff", //坐标值得具体的颜色
              },
            },
          },
          {
            type: "value",
            name: "Precipitation",

            position: "right",

            axisLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#005292",
              },
            },
          },
        ],

        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#fff", //折点颜色
                lineStyle: {
                  color: "#00d7db", //折线颜色
                },
              },
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00d7db",
                },
                {
                  offset: 1,
                  color: "#002d56",
                },
              ]),
            },
          },
        ],
      });

      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  // min-width:1400px;
  // overflow-x:auto ;

  color: #dafaff;
  background: url("./image/bg.png") center no-repeat;
  background-size: 100%;
  ::v-deep.el-button--small,
  .el-button--small.is-round {
    padding: 7px 15px;
  }
  ::v-deep.el-table::before {
    background-color: #042c59 !important;
  }
  ::v-deep.el-table td.el-table__cell,
  ::v-deep.el-table th.el-table__cell.is-leaf {
    border: 0px !important;
    padding: 5px 0px;
  }
  ::v-deep.el-table th.el-table__cell {
    background-color: #1460b0;
  }
  ::v-deep.el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td.el-table__cell {
    background-color: #1460b0;
  }
  ::v-deep.el-table thead {
    color: #dafaff;
  }
  ::v-deep.d2-container-full__body {
    background: none !important;
  }
  ::v-deep.el-table .one-row {
    background-color: #042c59 !important;
    color: #dafaff;
  }
  ::v-deep.el-table .two-row {
    background-color: #063c67 !important;
    color: #f7feff;
  }
  ::v-deep.el-date-editor {
    background: #0e2a59;
  }
  .table-content {
    width: 98%;
    margin-left: 6px;
    background: #042c59;
  }
  .content-title {
    padding-left: 43px;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    background: url("./image/xjt.png") no-repeat;
    background-position: 20px center;
  }
  .content {
    width: 100%;
    height: 45%;
    min-height: 300px;
  }
  .contentX {
    // margin-top: 2%;
  }
  .page-content {
    position: relative;
    width: 35%;
    min-width: 350px;
    height: 100%;
    background: url("./image/kuang-bg_1.png") no-repeat;
    background-size: 100% 100%;
  }
  .page-content-bottom {
    position: relative;
    top: 20px;
    left: 3px;
    height: 280px;
    background: url("./image/lsslCopy.png") no-repeat;
    background-size: 100% 100%;
  }
  .content-bottom-title {
    position: absolute;
    left: 20px;
    top: 10px;
    .arrow {
      display: inline-block;
      margin-top: 10px;
      margin-right: 5px;
    }
  }
  .right-content {
    height: 30%;
    min-height: 300px;
    margin-right: -20px;
    float: right;
  }
  .left-content {
    height: 30%;
    min-height: 400px;
    float: left;
  }
  .tzggList {
    margin: 10px 0;
    padding: 0;
  }
  .tzggList li {
    margin: 0 5px;
    padding-left: 20px;
    list-style: none;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #1460b0;
  }
  .tzggList li:hover {
    background: #1460af;
    // border-bottom: 1px solid #1460b0;
    border-radius: 25px;
  }
  .tzggListLi {
    float: right;
  }
  .myChart {
    margin: 0 auto;
    color: #f7feff;
  }
  .mapPosition {
    width: 30%;
    margin: 0 auto;
    min-width: 400px;
    height: 92%;
    position: absolute;
    left: 36%;
    right: center;
  }
  .echarts-map {
    min-width: 30px;
    min-height: 30px;
    width: 100%;
    height: 100%;
  }
  .kck-content {
    font-size: 14px;
    width: 91%;
    height: 50px;
    margin: 5% 0 0 4%;
    float: left;
    background: url("./image/crbg.png") no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
  .kck-content-out {
    text-align: center;
    line-height: 47px;
  }
  .kck-content-in-2 {
    margin: 0 15px;
  }
  .kck-content-num1 {
    margin: 0 5px;
    font-size: 20px;
    font-weight: bold;
  }
  .kck-content-num2 {
    display: inline-block;
    width: 35px;
    height: 22px;
    line-height: 22px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .kck-content-num3 {
    display: inline-block;

    width: 35px;
    height: 22px;
    line-height: 22px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .ckt-bg {
    position: relative;
    width: 190px;
    height: 100px;
    float: left;
    background: url("./image/ckl.png") no-repeat;
    background-size: 100% 100%;
  }
  .rkt-bg {
    width: 190px;
    height: 100px;
    float: right;
    background: url("./image/rkl.png") no-repeat;
    background-size: 100% 100%;
  }
  .czBut {
    color: #dafaff;
    background-color: #142f66;
    border: 1.5px solid #4a95be;
    border-radius: 7px;
  }
  .czBut:hover {
    color: #dafaff;
    background-color: #3d8ee9;
    border: 1.5px solid #4a95be;
    border-radius: 7px;
  }
  .ckmcImg {
    width: 17px;
    margin: 0px 10px 0 -5px;
  }
  .seeMore {
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    right: 0px;
    margin: 10px 20px;
    cursor: pointer;
  }
  .tzXyd {
    background: #dafaff;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .ckt-szk-bg {
    position: absolute;
    width: 35px;
    height: 22px;
    left: 100px;
    top: 50px;
    background: url("./image/szkBlue.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .rkt-szk-bg {
    position: absolute;
    width: 35px;
    height: 22px;
    right: 100px;
    top: 50px;
    background: url("./image/szkGreen.png") no-repeat;
    background-size: 100% 100%;
    letter-spacing: 12px;
    padding-left: 6px;
  }
  .rkt-bg-font {
    font-size: 14px;
    position: absolute;
    right: 70px;
    top: 23px;
  }
  .ckt-bg-font {
    font-size: 14px;
    position: absolute;
    left: 70px;
    top: 23px;
  }
  .ckt-bg-little {
    font-size: 12px;
    position: absolute;
    left: 60px;
    top: 79px;
  }
  .rkt-bg-little {
    font-size: 12px;
    position: absolute;
    right: 40px;
    top: 79px;
  }
  .zcColor {
    margin-right: 5px;
    color: #19d606;
  }
  .jdColor {
    margin-right: 5px;
    color: #ff8ca7;
  }
  .timeOption {
    position: absolute;
    width: 187px;
    right: 20px;
    height: 28px;
    background-color: #142f66;
    padding: 0;
    margin: -16px 0 0 0;
    border: 1.5px solid #4a95be;
  }
  ::v-deep.el-date-editor .el-range__icon {
    font-size: 12px;
    margin-left: 5px;
    color: #f7feff;
    float: left;
    line-height: 26px;
  }
  ::v-deep.el-range-editor .el-range-input {
    background: #142f66;
    font-size: 12px;
  }
  ::v-deep.el-date-editor .el-range-separator {
    padding: 0 5px;
    line-height: 25px;
    width: 5%;
    color: #f7feff;
  }
  .bottom_div {
    width: calc(100% - 20px);
    position: absolute;
    top: 50px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    .imgLeft_father {
      width: 200px;
      height: 220px;
      background: url("./image/kuang-bg_2.png") no-repeat;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .imgLeft {
        // display: inline-block;
        // width: 200px;
        // height: 220px;
      }
    }
    .myChart2 {
      position: absolute;
      left: 15%;
    }
  }
  ::v-deep.el-input__inner {
    border: 1px solid #338ab3;
  }

  // .btn-group {
  //   color: $color-text-placehoder;
  //   font-size: 12px;
  //   line-height: 12px;
  //   margin-top: 0px;
  //   margin-bottom: 20px;
  //   .btn-group__btn {
  //     color: $color-text-sub;
  //     &:hover {
  //       color: $color-text-main;
  //     }
  //     &.btn-group__btn--link {
  //       color: $color-primary;
  //     }
  //   }
  // }
}
</style>
