<template>
  <div class="main">
    <div class="full_page">
      <!-- 左-->
      <div class="trade_left" style="width: 20%">
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="安全">
          <div style="padding-top: 2rem;">
          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
          </div>
        </display-board>
      </div>
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="质量">
          <div style="padding-top: 2rem;">
          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
          </div>
        </display-board>
      </div>
        <div style="height: 26%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="人员情况表">
            <div style="height: 100%;width: 100%;padding-top: 1rem;">
              <div style="height: 100%;width: 100%" ref="people"></div>
            </div>
          </display-board>
        </div>
      </div>
      <!--中-->
      <div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">

        <display-board  style="height: 76%">

        </display-board>
        <div style="display: flex; justify-content: space-between; height: 23%; padding-top: 2rem;" >
          <showcase style="width: 16%;" title="当日订单量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drddl.amount+' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drydl.weight + ' 万吨'" />
          </showcase>
          <showcase style="width: 16%;" title="当日完成量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drwcl.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="余量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="yl.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="lskh.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="xzkh.amount + ' 万元'" />
          </showcase>
        </div>
      </div>

      <!-- 右-->
      <div class="trade_right" style="width: 24%;;padding-left: 0.5rem">
        <div style="height: 33%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="汽运">
            <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
              <simple-card style="width:100%;height: 100%">
                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
                <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
              </simple-card>
            </div>
            <div style="height: 70%;width: 100%;padding-right: 2rem">
              <div >
                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
                <div style="height: 100%;width: 100%" ref="car"></div>
            </div>
          </display-board>
        </div>
        <div style="height: 33%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="水运">
            <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
              <simple-card style="width:100%;height: 100%">
                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
                <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
              </simple-card>
            </div>
            <div style="height: 70%;width: 100%;padding-right: 2rem">
              <div >
                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
              <div style="height: 100%;width: 100%" ref="ship"></div>
            </div>
          </display-board>
        </div>
        <div style="height: 34%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="铁运">
            <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
              <simple-card style="width:100%;height: 100%">
                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
                <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
              </simple-card>
            </div>
            <div style="height: 70%;width: 100%;padding-right: 2rem">
              <div >
                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
              <div style="height: 100%;width: 100%" ref="train"></div>
            </div>
          </display-board>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import * as echarts from "echarts";
import SimpleCard from "../components/card/simple-card.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import Showcase from "../components/container/showcase.vue";
export default {
  name: "SafeQuality",
  components: {
    DisplayBoard,
    SimpleCard,
    TitleContentMark,
    Showcase,
    WinnersList
  },
  data() {
      return {
        arSafeList:[{title:"火灾事故-111111"},{title:"急救事故-222222"},{title:"交通事故-333333"},{title:"其他事故-888888"},{title:"急救事故-22222"}],
        arQualityList:[{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"},{title:"发往广东高强钢内部受损"}],
        arCarSum:[
          {title:'当班车数',value:'1350'},
          {title:'异常车数',value:'0'}
        ],
        arShipSum:[
          {title:'当班船数',value:'1350'},
          {title:'异常船数',value:'0'}
        ],
        arTrainSum:[
          {title:'当班数',value:'1350'},
          {title:'异常数',value:'0'}
        ],
        barTitle:'今日计划完成',
        carPlan:'89',
        lskh: {
          weight: "2,000",
          amount: "20,000",
        },
        xzkh: {
          weight: "2,000",
          amount: "20,000",
        },
        drddl: {
          weight: "2,000",
          amount: "20,000",
        },
        drydl: {
          count: "2,000",
          weight: "20,000",
        },
        drwcl: {
          weight: "2,000",
          amount: "20,000",
        },
        yl: {
          weight: "2,000",
          amount: "20,000",
        },
        people_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1E2C58"
              }
            },

          },
          xAxis: {
            data: ['在编', '出勤', '请假'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
                color:new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 渐变方向从上到下
                  [
                    { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                    { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                    { offset: 1, color: '#188df0' }    // 柱图底部颜色
                  ]
                ),
              barBorderRadius:[3,3,0,0] ,
            },
            barWidth: '30%',
            barGap: '20%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        car_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              barBorderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        ship_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              barBorderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        train_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              barBorderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
      }
  },
  methods: {

    refreshData() {
        this.getPeopleInfos();
    },
    getPeopleInfos(){
      this.people.setOption(this.people_options);
      this.car.setOption(this.car_options);
      this.ship.setOption(this.ship_options);
      this.train.setOption(this.train_options);
    },
    routerTo(path, code) {
      this.$router.push({path: path, query: {code: code}});
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  mounted() {
    setTimeout(() => {
      let peopleDom = this.$refs.people;
      this.people = echarts.init(peopleDom);

      let carDom = this.$refs.car;
      this.car = echarts.init(carDom);

      let shipDom = this.$refs.ship;
      this.ship = echarts.init(shipDom);

      let trainDom = this.$refs.train;
      this.train = echarts.init(trainDom);

      this.refreshData();
      window.addEventListener('resize', this.resizeChart);
    },500);
  },
  beforeDestroy() {

  },
  watch:{
    countDown(n,o){
      if (n === 1){
        this.refreshData();
      }
    },
  },
  props:{
    countDown:{
      type: Number
    }
  }
};
</script>

<style scoped>
</style>
