<template>
    <!-- 质量管理 -->
  <!-- <div class="quality">
        <vue-scroll>
        <img  src="@/assets/images/dataBoard/8.png" style="height:auto;width:100%"/>
        </vue-scroll>
    </div> -->

    <div v-if="COMPANY != 'longguang'" class="fullHeight dataBoardIndex">
        <div class="left fullHeight">
            <div class="blockBox blockBox2">
                <div class="blockTitle">
                <!-- 安全问题 -->
                {{$t('message.dataBoard.safetyProblem')}}
                </div>
                <div class="blockContent">
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart1"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart2"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart3"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart4"></div>
                    </div>
                </div>
            </div>
            <div class="blockBox blockBox3" style="height:calc(66.66% - 25px)">
                <div class="blockTitle">
                <!-- 问题趋势 -->
                {{$t('message.dataBoard.problemTrend')}}
                </div>
                <div class="blockContent">
                    <div class="lineChart" ref="lineChart"></div>
                    <div
                      class="placeholderBox placeholderBox2"
                      v-if="noData3"
                    >
                      <img src="@/assets/images/noData3.png" alt="" srcset="" />
                      <p>
                      <!-- 暂无数据 -->
                      {{$t('message.dataBoard.nodata')}}
                      </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="aside fullHeight">
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 待整改 -->
                {{$t('message.dataBoard.awaitChange')}}
                </div>
                <div class="blockContent alarmBlockContent">
                    <vue-scroll>
                        <table class="greenTable">
                        <thead>
                            <tr>
                            <th width="150">
                                <!-- 检查项 -->
                                 {{$t('message.dataBoard.checkedItem')}}
                            </th>
                            <th>
                                <!-- 检查内容 -->
                                 {{$t('message.dataBoard.checkedContent')}}
                            </th>
                             <th>
                                <!-- 检查时间 -->
                                {{$t('message.dataBoard.checkedTime')}}
                            </th>
                            <th>
                                <!-- 整改人 -->
                                {{$t('message.dataBoard.changePeople')}}
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in alarmList" :key="index">
                            <td>
                                {{ item.checkPoints }}
                            </td>
                            <td>{{ item.checkContent }}</td>
                            <td>{{ item.checkTime }}</td>
                            <td>{{ item.rectifyPeopleAme }}</td>
                            </tr>
                        </tbody>
                        </table>
                        <div
                        class="placeholderBox placeholderBox2"
                        v-if="alarmList.length == 0"
                        >
                        <img src="@/assets/images/noData3.png" alt="" srcset="" />
                        <p>
                        <!-- 暂无数据 -->
                        {{$t('message.dataBoard.nodata')}}
                        </p>
                        </div>
                    </vue-scroll>
                </div>
            </div>
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 问题占比 -->
                {{$t('message.dataBoard.problemRatio')}}
                </div>
                <div class="blockContent">
                    <div class="safeTrainChart" ref="safeTrainChart"></div>
                    <div class="descBox fullHeight">
                        <div>
                            <div class="descItem descItem1">
                                <p class="text"><i class="dot red"></i>
                                <!-- 周检 -->
                                {{$t('message.dataBoard.weekChecked')}}
                                </p>
                                <p class="num">{{total.weekInspectNum}}</p>
                            </div>
                            <div class="descItem descItem1">
                                <p class="text"><i class="dot purple"></i>
                                <!-- 月检 -->
                                {{$t('message.dataBoard.monthChecked')}}
                                </p>
                                <p class="num">{{total.monthInspectNum}}</p>
                            </div>
                            <div class="descItem">
                                <p class="text"><i class="dot green"></i>
                                <!-- 其他 -->
                                {{$t('message.dataBoard.elseChecked')}}
                                </p>
                                <p class="num">{{total.otherInspectNum}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 整改动态 -->
                {{$t('message.dataBoard.changeDynamic')}}
                </div>
                <div class="blockContent">
                    <vue-scroll>
                        <ul class="greenTable dynamicList">
                            <li v-for="(item,index) in activityList" :key="index">
                                {{item.rectifyPeopleAme}}<!-- 有一条 -->{{$t('message.dataBoard.hasOne')}}{{statusArr[item.state-1]}}{{$t('message.dataBoard.problen')}}<!-- 的问题 -->
                            </li>
                        </ul>
                        <!-- <table class="greenTable">
                        <thead>
                            <tr>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th1") }}
                            </th>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th2") }}
                            </th>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th3") }}
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in alarmList" :key="index">
                            <td>
                                {{ item.deviceName }}
                            </td>
                            <td>{{ item.alarmTime }}</td>
                            <td>{{ item.alarmTypeName }}</td>
                            </tr>
                        </tbody>
                        </table> -->
                        <div
                        class="placeholderBox placeholderBox2"
                        v-if="activityList.length == 0"
                        >
                        <img src="@/assets/images/noData3.png" alt="" srcset="" />
                        <p>
                        <!-- 暂无数据 -->
                        {{$t('message.dataBoard.nodata')}}
                        </p>
                        </div>
                    </vue-scroll>
                </div>
            </div>
        </div>
    </div>
    <SecureTwo v-else></SecureTwo>
</template>
<script>
import echarts from 'echarts4';;
import {selectSecurityManageStatisticsApi,selectRectifiedSecurityManageList2Api,
getNewestSecurityManageDataList2Api} from "@/assets/js/api/dataBoard"
import SecureTwo from "./secureTwo";
export default {
    data(){
        return{
            dataType1:1,
            dataType2:1,
            total:{
              closeNum: 0,
                monthInspectNum: 0,
                notRectificationNum: 0,
                otherInspectNum: 0,
                rectificationNum: 1,
                reviewedNum: 0,
                totalNum: 1,
                weekInspectNum: 1
            },
            noData1:true,
            noData2:true,
            noData3:true,
            projectSn:'',
            alarmList:[],
            activityList:[],
            statusArr:this.$t('message.dataBoard.statusArr'),
            COMPANY:""
        }
    },
    components: {
        SecureTwo,
    },
    created(){
        this.COMPANY = COMPANY
        console.log(COMPANY);
    },
    mounted(){
      this.projectSn=this.$store.state.projectSn
      console.log('this.projectSn',this.projectSn)
      this.getData1()
      this.getActivity()
      this.getNewestData()
    },
    methods:{
      //获取数据
      getData1(){
        let data = {
        projectSn: this.projectSn,
      };
      selectSecurityManageStatisticsApi(data).then((res) => {

          this.total = res.result.total;
          this.createPieChart(
          [
            { value: this.total.weekInspectNum, name: "" },
            {
              value: this.total.monthInspectNum,
              name: "",
            },{
              value: this.total.otherInspectNum,
              name: "",
            },
          ],
          this.$refs.safeTrainChart,
          ["rgba(254, 108, 127, 1)","rgba(120, 111, 240, 1)", "rgba(68, 215, 182, 1)"],
        this.$t('message.dataBoard.questionAllCounts') /*  "问题总数" */,this.total.totalNum
        );
         this.createPieChart(
          [
            { value: 1, name: "" },
            {
              value: 0,
              name: "",
            },

          ],
          this.$refs.ratioChart1,
          ["#557DED", "rgba(68, 215, 182, 0.2)"],
         this.$t('message.dataBoard.questionAllCounts')/*  "问题总数" */,this.total.totalNum
        );
        this.createPieChart(
          [
            { value: 1, name: "" },
            {
              value: 0,
              name: "",
            },
          ],
          this.$refs.ratioChart2,
          ["#7718fe", "rgba(68, 215, 182, 0.2)"],
         this.$t('message.dataBoard.statusArr')[1]+this.$t('message.dataBoard.problenNum') /* "待审核问题数" */,this.total.reviewedNum
        );
        this.createPieChart(
          [
            { value: 1, name: "" },
            {
              value: 0,
              name: "",
            },
          ],
          this.$refs.ratioChart3,
          ["#fe6c7f", "rgba(68, 215, 182, 0.2)"],
          /* "待整改问题数" */this.$t('message.dataBoard.statusArr')[0]+this.$t('message.dataBoard.problenNum'),this.total.rectificationNum
        );
        var ratioNum = this.total.totalNum?((this.total.closeNum/this.total.totalNum)*100).toFixed(2):0
        this.createPieChart(
          [
            { value: ratioNum, name: "" },
            {
              value: 100-ratioNum,
              name: "",
            },
          ],
          this.$refs.ratioChart4,
          ["rgba(68, 215, 182, 1)", "rgba(68, 215, 182, 0.2)"],
         this.$t('message.dataBoard.onTimeChangeRate') /* "及时整改率" */,ratioNum+'%'
        );
        var arr = res.result.monthList
        var xData=[],yData1=[]
        if(arr.length>0){
          arr.forEach(element => {
            var date = element.titleName.substr(5,element.titleName.length)
            xData.push(date)
            yData1.push(element.num)
          });
          this.noData3=false
        }else{
          this.noData3=true
        }
        this.createLineChart(xData,yData1)
      });
      },

      createPieChart(data, div, color, title,total) {
    let that = this;
    let monitor = echarts.init(div);
    // monitor.clear();
    var option = {
      color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
      title: {
        show: true,
        text: total,
        x: "48%",
        y: "36%",
        z: 5,
        textAlign: "center",
        textStyle: {
          color: "rgba(255, 255, 255, 1)",
          fontSize: 20,
        },
        subtext: title,
        subtextStyle: {
          color: "rgba(255, 255, 255, 0.8)",
          fontSize: 13,
        },
      },
      grid: {
        right: 0,
      },
      legend: {
        show: false,
      },
      // tooltip: {
      //   // data: ['在线', '离线'],
      //   trigger: "item",
      //   formatter: "{a} <br/>{b}: {c} ({d}%)",
      // },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
            position: "center",
          },

          labelLine: {
            show: false,
          },
          data: data,
        },
      ],
    };
    //   if(color){
    //       option.series[0].radius=["75%", "85%"]
    //       option.title.x="45%"
    //       option.legend.show=false
    //   }
    monitor.setOption(option);
      },
      createLineChart(xData,yData1){
          let monitor = echarts.init(this.$refs.lineChart);
          var option = option = {
              tooltip: {
          trigger: 'axis',
          position: function (pt) {
              return [pt[0], '10%'];
          }
      },
              grid: {
            top: 30,
            left: 20,
            bottom: 20,
            right: 20,
            containLabel: true,
          },
      xAxis: {
          boundaryGap: false,
          type: 'category',
          data: xData,
          axisTick:{
              show:false
          },
          axisLine:{
              show:false
          },
          axisLabel: {
                color: "#9fa2ad",
                fontSize: 12,
              },
      },
      yAxis: {
          type: 'value',
          splitLine:{
              lineStyle:{
                  type: "dashed",
                color: "rgba(231, 233, 243, 0.2)",

              }
          },
          axisLine:{
              show:false
          },
          axisLabel: {
              color: "#9fa2ad",
            },
      },
      color:['rgba(248, 195, 21, 1)'],
      series: [{
          name:/* '问题数', */this.$t('message.dataBoard.problenNum'),
          data: yData1,
          type: 'line',
          smooth: true,
          symbolSize:0,
          areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(248, 195, 21, 0.3)'
                  }, {
                      offset: 1,
                      color: 'rgba(248, 195, 21, 0)'
                  }])
              },
      }]
  };
          monitor.setOption(option);
      },
    //获取动态
    getActivity(){
        selectRectifiedSecurityManageList2Api({projectSn: this.projectSn}).then(res=>{
            this.activityList=res.result
        })
    },
    //查询最新20条待整改的安全管理数据
    getNewestData(){
        getNewestSecurityManageDataList2Api({projectSn: this.projectSn}).then(res=>{
            this.alarmList=res.result
        })
    },
    }
}
</script>
<style lang="less" scoped>
// .quality{
//     height: 100%;
//     width:100%;
//     text-align: center;
// }
.safeTrainChart {
  width: 50%;
  height: 100%;
  float: left;
}
.lineChart{
    width: 100%;
    height: 100%;
}

.circleBox{
    width: 25%;
    float: left;
    text-align: center;
    height: 100%;
}
.circleInner{
    border: 16px solid #557DED;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    .num{
        color: white;
        font-size: 24px;
        margin-bottom: 5px;
    }
    .text{
        font-size: 12px;
    }
    &.purple{
        border-color: rgba(119, 24, 254, 1);
    }
    &.red{
        border-color: rgba(254, 108, 127, 1);
    }
}
.ratioChart{
    width: 100%;
    height: 100%;
}
.dynamicList{
    text-align: center;
}
</style>
