<template>
    <div id="project-view">
      <dv-full-screen-container>
        <top-header />

        <div class="project-view-content">
          <div class="content-left">
            <p class="content-title">人工完成</p>

            <div class="content-left-line">
              <echart :options="optionsLine1" id="content-left-line"></echart>
            </div>

            <div class="content-left-line">
              <echart class="content-left-bar" :options="optionsBar1" id="content-left-bar"></echart>
            </div>
          </div>

          <div class="content-center">
            <div class="content-center-total">
              <echart :options="optionsjindu" id="content-center-jindu"></echart>
            </div>

            <div class="content-center-charts">
              <p class="content-center-charts__title">机械完成</p>

              <div class="content-center-charts-box">
                <echart :options="optionsLine2" id="content-center-line"></echart>
              </div>

              <div class="content-center-charts-box">
                <echart :options="optionsBar2" id="content-center-bar"></echart>
              </div>
            </div>
          </div>

          <div class="content-right">
            <p class="content-title">材料完成</p>

            <div class="content-left-line">
              <echart :options="optionsLine2" id="content-right-line"></echart>
            </div>

            <div class="content-left-line">
              <echart class="content-left-bar" :options="optionsBar2" id="content-right-bar"></echart>
            </div>
          </div>
        </div>
      </dv-full-screen-container>
    </div>
  </template>
  
<script>
import topHeader from '../../components/topHeader.vue'

export default {
    name: 'ProjectView',
    components: {
      topHeader
    },
    data () {
      return {
        optionsLine1: {},
        optionsBar1: {},
        optionsLine2: {},
        optionsBar2: {},

        optionsjindu: {}
      }
    },
    methods: {
      initChart() {
        this.optionsLine1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['计划', '实际'],
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['20日', '21日', '22日', '23日', '24日', '25日', '26日'],
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          series: [
            {
              name: '计划',
              data: [100,140,230,100,130,100,132],
              type: 'line',
              smooth: true,
              areaStyle: {
                opacity: 0.2
              }
            },
            {
              name: '实际',
              data: [80,120,210,110,120,130,122],
              type: 'line',
              smooth: true,
              areaStyle: {
                opacity: 0.2
              }
            }
          ]
        }
        this.optionsLine2 = this.optionsLine1

        this.optionsBar1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['计划', '实际'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ["力工","耙子工","电工","瓦工","木工"],
              axisLabel: {
              color: '#fff',
              fontSize: 14
            }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            }
          ],
          series: [
            {
              name: '计划',
              type: 'bar',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [10,6,4,7,5],
              itemStyle:{
                opacity: 0.6
              }
            },
            {
              name: '实际',
              type: 'bar',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: [8,7,4,7,5],
              itemStyle:{
                opacity: 0.6
              }
            }
          ]
        }
        this.optionsBar2 = this.optionsBar1

        const gaugeData = [
          {
            value: 20,
            name: '计划',
            title: {
              offsetCenter: ['-40%', '80%']
            },
            detail: {
              offsetCenter: ['-40%', '95%']
            }
          },
          {
            value: 40,
            name: '实际',
            title: {
              offsetCenter: ['0%', '80%']
            },
            detail: {
              offsetCenter: ['0%', '95%']
            }
          }
        ];
        this.optionsjindu = {
          series: [
          {
            type: 'gauge',
            startAngle: 180,
                  endAngle: 0,
                  min: 0,
                  max: 100,
                  splitNumber: 10,
                  radius: "100%",
                  center: ['50%', '50%'],
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: '#FAC858'
              }
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 8,
              length: '70%',
              offsetCenter: [0, '5%']
            },
            progress: {
              show: true,
              overlap: true,
              roundCap: true
            },
            axisLine: {
              roundCap: true
            },
            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 40,
              height: 14,
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'inherit',
              borderRadius: 3,
              formatter: '{value}%',
              offsetCenter: [0, 0],
            }
          }
        ]
        }
      }
    },

    mounted() {
      this.initChart() 
    }
}
</script>
  
<style lang="less">
#project-view {
    width: 100%;
    height: 100%;
    // background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
        background-image: url('./img/bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
        display: flex;
        flex-direction: column;
        padding:  0 20px;
    }

    .project-view-content {
      width: 100%;
      height: 100%;
      padding: 20px 32px;
      display: flex;

      // background: pink;
    }

    .content-left,
    .content-right {
      background: url(./img/item2.png) no-repeat;
      background-size: 100% 90%;
      background-position: center;
      width: 30%;
      height: 100%;
    }
    .content-center {
      width: 38%;
      height: 100%;
      // background: black;
      margin: 0 1%;
      position: relative;

      .content-center-total {
        width: 100%;
        height: 25%;
        // background: pink;
      }

      .content-center-charts {
        background: url(./img/item1.png) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        position: absolute;
        bottom: 5%;
        left: 0;
        width: 100%;
        height: 40%;
        display: flex;

        .content-center-charts__title {
          position: absolute;
          top: -20px;
          width: 100%;

          font-size: 29px;
          letter-spacing: 4px;
          text-align: center;
        }

        .content-center-charts-box {
          width: 50%;
        }
      }
    }

    .content-title {
      font-size: 29px;
      letter-spacing: 4px;
      text-align: center;
      padding: 36px;
    }
    
    .content-left-line {
      width: 100%;
      height: 40%;
    }
}
</style>
  