<template>
  <div class="testdiv">
    <!-- 展示界面 start -->
    <div v-show="showNum" class="divOne">
      <div class="divTop">
        <div class="top topLeft">
          <div class="left leftImg">
            <img :src="imgLogo" style="height:50px;margin:10px;" />
          </div>
          <div class="left leftTitle">{{this.displayDepart}}</div>
        </div>
        <div class="top topMiddle">
          <div class="middle middleOne">
            <div class="divCircular">{{ normal }}</div>
            {{$t(100200)}}
          </div>
          <div class="middle middleTwo">
            <div class="divCircular">{{ unmaintained }}</div>
            {{$t(950403)}}
          </div>
          <div class="middle middleThree">
            <div class="divCircular">{{ abnormal }}</div>
            {{$t(900663)}}
          </div>
        </div>
        <div class="top topRight">
          <div style="color:#fff">{{$t('99200016')}}：{{nowDateTime}}</div>
          <div class="right rightOne">
            <DatePicker :open="open" :value="datetime" type="date" @on-change="handleDateChange">
              <a href="javascript:void(0)" @click="handleDateClick">
                <Icon type="md-calendar" size="40"></Icon>
                <template v-if="datetime === ''">Select date</template>
                <template v-else>{{ datetime }}</template>
              </a>
            </DatePicker>
          </div>
          <div class="right rightTwo">
            <Dropdown>
              <a href="javascript:void(0)">
                <Icon type="ios-list-box" size="40"></Icon>
              </a>
              <DropdownMenu slot="list" style="max-height:500px;overflow-y:auto;">
                <DropdownItem
                  v-for="(item,i) in departList"
                  :value="item.id"
                  :key="i"
                  @click.native="getDepartId(item.id,item.title)"
                >{{ item.title }}</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Icon type="md-arrow-round-back" size="40" v-on:click="back" />
          </div>
        </div>
      </div>
      <div class="divDown">
        <div class="down">
          <div v-for="(item,i) in divList" class="divScreen" :key="i">
            <div class="downOne" v-on:click="getDetailInfo(i)">
              <div class="downtop" :style="{ background: item.color}">{{ item.item }}</div>
              <div class="downbottom">
                <div class="bottomLeft">
                  <div class="leftContent">{{ item.targetStr }}</div>
                  <div class="leftContent leftVal" style="font-size:16px">{{ item.target}}</div>
                  <div class="leftContent">{{ item.unitStr }}</div>
                  <div class="leftContent leftVal">{{ item.unit }}</div>
                  <div class="leftContent">{{item.cycle}}</div>
                  <div class="leftContent leftVal">{{ item.cycleDesc }}</div>
                </div>
                <div class="bottomRight">
                  <div class="rightCycle">
                    <div class="cycle" :style="{ border: item.bdColor}">{{ item.val }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示界面 end -->

    <!-- 异常处理 start -->
    <div v-show="!showNum" class="divTwo">
      <div class="divTop">
        <div class="top topLeft">
          <div class="left leftImg">
            <img :src="imgLogo" style="height:50px;margin:10px;" />
            <!-- <img src="../../../static/images/skf_small.png" style="height:50px;margin:10px;" /> -->
          </div>
          <div class="left leftTitle">{{this.displayDepart}}</div>
        </div>
        <div class="top topMiddle">
          <div class="right rightOne">{{ kpiDesc }}</div>
        </div>
        <div class="top topRight">
          <div class="cycleWrap">
            <p
              class="type"
              v-for="(item,index) in cycleList"
              @click="changeCharts(index)"
              :key="index"
              :class="{color:isactive==index}"
            >{{item.title}}</p>
          </div>
          <div>
            <DatePicker :open="open" :value="datetime" type="date" @on-change="handleDateChange2">
              <a href="javascript:void(0)" @click="handleDateClick">
                <Icon type="md-calendar" size="40"></Icon>
                <template v-if="!datetime">Select date</template>
                <template v-else>{{ datetime }}</template>
              </a>
            </DatePicker>
          </div>
          <div class="right rightOne">{{ nowDateTime }}</div>
          <div class="right rightTwo">
            <Icon type="md-refresh" size="40" v-on:click="getRefresh" />
            <Icon type="md-arrow-round-back" size="40" v-on:click="getFirstHtml" />
          </div>
        </div>
      </div>
      <div class="divDown" style="overflow-y:auto;overflow-x:hidden;">
        <div class="divEchart" ref="divEchart"></div>
        <div class="divTable newTableDiv">
          <Table class="tableClass" style="margin-top:10px" highlight-row :data="tableData" :columns="tableColumns"></Table>
        </div>
      </div>

      <!-- 指定行动计划 start-->
      <Modal
         class="newModalClass"
        :title="planTitle"
        v-model="modalPlan"
        :styles="{width:'600px'}"
        :mask-closable="false"
      >
        <div class="bodyModal" style="height:380px;">
          <div class="filter">
            <label>{{$t(100000)}}：</label>
            <Select
              class="searchSelect"
              v-model="departidt"
              clearable
              @on-change="getuserList()"
            >
              <Option v-for="(item,key) in departLists" :value="item.id" :key="key">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(950377)}}：</label>
            <Select class="searchSelect" v-model="responsibleID" clearable filterable>
              <Option v-for="(item,key) in userList" :value="item.id" :key="key">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(950411)}}：</label>
            <DatePicker
              class="searchInput"
              v-model="planTime"
              type="date"
              @on-change="selectDate($event)"
            ></DatePicker>
          </div>
          <div class="filter" style="height:75px;">
            <label>{{$t('5500016')}}：</label>
            <Input
              class="searchInput MaxWidth"
              type="textarea"
              :autosize="{maxRows:2,minRows: 2}"
              v-model="desc"
            />
          </div>
          <div class="filter" style="height:75px;">
            <label>{{$t('90000059')}}：</label>
            <Input
              class="searchInput MaxWidth"
              type="textarea"
              :autosize="{maxRows:2,minRows: 2}"
              v-model="cause"
            />
          </div>
          <div class="filter" style="height:75px;">
            <label>{{$t('90000060')}}：</label>
            <Input
              class="searchInput MaxWidth"
              :autosize="{maxRows:2,minRows: 2}"
              type="textarea"
              v-model="record"
            />
          </div>
          <div class="filter">
            <label>{{$t('99200023')}}：</label>
            <DatePicker
              class="searchInput"
              v-model="excutetime"
              type="datetime"
              @on-change="selectDate_exc($event)"
            ></DatePicker>
          </div>
          <div class="filter">
            <label>{{$t('99200024')}}：</label>
            <DatePicker
              class="searchInput"
              v-model="checktime"
              type="datetime"
              @on-change="selectDate_check($event)"
            ></DatePicker>
          </div>
          <div class="filter">
            <label>{{$t('99200025')}}：</label>
            <DatePicker
              class="searchInput"
              v-model="solveTime"
              type="datetime"
              @on-change="selectDate_slove($event)"
            ></DatePicker>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="modalPlan = false">{{$t(1033)}}</Button>
          <Button type="primary" size="large" @click="planPost">{{$t(1011)}}</Button>
        </div>
      </Modal>
      <!-- 指定行动计划 end-->
      <!-- 处理过程记录 start-->
      <Modal
        class="newModalClass"
        :title="recordTitle"
        v-model="modalRecord"
        :styles="{width:'500px'}"
        :mask-closable="false"
      >
        <div class="bodyModal" style="height:200px;">
          <div class="filter">
            <label>{{$t(950414)}}:</label>
            <Checkbox v-model="isSolvenum" style="width:50px;">{{$t(1000020)}}</Checkbox>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="modalRecord = false">{{$t(1033)}}</Button>
          <Button type="primary" size="large" @click="recordPost">{{$t(1011)}}</Button>
        </div>
      </Modal>
      <!-- 处理过程记录 end-->
    </div>
    <!-- 异常处理 end -->
  </div>
</template>

<script>
import moment from 'moment';
import echarts from 'echarts';
import axios from '@/libs/api.request';
import { setTimeout, setInterval, clearInterval } from 'timers';
export default {
    // name: 'tree_select_page',
    components: {},
    data () {
        return {
            imgLogo: require('../../../static/images/siger.png'), // logo
            planTitle: this.$t(950409),
            recordTitle: this.$t(950410),
            departList: [], // 部门列表
            departLists: [], // 部门列表
            divList: [], // div列表
            open: false, // 日历
            datetime: '', // 选中日期
            departId: 0, // 选中部门
            departidt: 0, // 选中部门id
            normal: 0, // 正常数
            unmaintained: 0, // 为维护数
            abnormal: 0, // 异常数
            showNum: true, // 显示标记
            nowDateTime: '', // 当前时间
            timeVal: 0, // 定时器
            section: 0, // 异常处理 部门
            itemId: 0, // 异常处理 项目id
            modalPlan: false, // 指定责任人弹窗
            modalRecord: false, // 处理过程记录弹窗
            userList: [], // 人员列表
            responsibleID: 0, // 责任人
            planTime: '', // 计划时间
            operaterID: '', // 处理人
            record: '', // 过程
            isSolvenum: '', // 是否解决
            id: 0, // 处理id
            tableData: [], // 列表数据
            displayDepart: '',
            kpiDesc: '',
            tableColumns: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 60
                },
                {
                    title: this.$t(600532),
                    key: 'datetime'
                },
                {
                    title: this.$t(950386),
                    key: 'targetValue'
                },
                {
                    title: this.$t(950408),
                    key: 'actualValue'
                },
                {
                    title: this.$t(200017),
                    key: 'unit'
                },
                {
                    title: this.$t('1030'),
                    key: 'remark',
                    width: 150
                },
                {
                    title: this.$t('90000059'),
                    key: 'because'
                },
                {
                    title: this.$t('90000060'),
                    key: 'record'
                },
                {
                    title: this.$t(950377),
                    key: 'username'
                },

                {
                    title: this.$t(950411),
                    key: 'planTime'
                },
                {
                    title: this.$t('900952'),
                    key: 'solveTime'
                },
                {
                    title: this.$t('950404'),
                    key: 'doStatus',
                    render: (h, params) => {
                        var bgColor = '';
                        if (params.row.exception == 1) {
                            bgColor = '#A30014';
                        } else if (params.row.exception == 2) {
                            bgColor = 'orange';
                        } else {
                            bgColor = 'yellow';
                        }
                        return h(
                            'div',
                            {
                                style: {
                                    color: '#000',
                                    backgroundColor: bgColor
                                }
                            },
                            params.row.doStatus
                        );
                    }
                }
            ],
            defaultDepart: 0,
            row: 3, // 默认3行
            column: 4, // 默认4列
            itemName: '',
            cycleList: [],
            cause: '',
            isactive: -1,
            timer: 0,
            indexdiv: 0,
            actionId: 0,
            desc: '',
            excutetime: '',
            checktime: '',
            solveTime: '',
            actiontype: 1 // 1新增 2修改
        };
    },
    created () {
        if (this.$store.state.user.logo !== '' && this.$store.state.user.logo !== null && this.$store.state.user.logo !== undefined) {
            this.imgLogo = this.$store.state.user.logo
        }
        this.initTime();
        this.getDepartList(); // 获取部门列表
        if (this.$route.query.id) {
            this.departId = this.$route.query.id;
            this.getDiv();
        } else if (sessionStorage.getItem('departid')) {
            this.departId = sessionStorage.getItem('departid');
            this.getDiv();
        } else {
            axios
                .request({
                    url: '/config/ProjectSection/GetCurrentDepart',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.defaultDepart =
              res.data.data != null && res.data.data != undefined
                  ? res.data.data.id
                  : 0;
                        sessionStorage.setItem('departid', this.defaultDepart);

                        this.departId = this.defaultDepart;
                        this.displayDepart =
              res.data.data != null && res.data.data != undefined
                  ? res.data.data.title
                  : '';
                        this.getDiv();
                    }
                });
        }
        this.timer = setInterval(() => {
            if (this.indexdiv === 0) {
                this.initTime();
                this.getDepartList(); // 获取部门列表
                if (this.$route.query.id) {
                    this.departId = this.$route.query.id;
                    this.getDiv();
                } else if (sessionStorage.getItem('departid')) {
                    this.departId = sessionStorage.getItem('departid');
                    this.getDiv();
                } else {
                    axios
                        .request({
                            url: '/config/ProjectSection/GetCurrentDepart',
                            method: 'get'
                        })
                        .then(res => {
                            if (res.data.ret === 1) {
                                this.defaultDepart = res.data.data.id;
                                this.departId = this.defaultDepart;
                                this.displayDepart = res.data.data.title;
                                this.getDiv();
                            }
                        });
                }
            } else {
                this.getDetailInfo(this.indexdiv);
            }
        }, 1000 * 60 * 60 * 2);
    },
    beforeDestroy () {
        clearInterval(this.timer);
    },
    methods: {
        initTime () {
            var date = new Date();
            this.datetime = this.timestampToTime(date.getTime());
            console.log(this.datetime);
            // 定时刷新时间
            this.timeVal = setInterval(() => {
                date = new Date();
                this.nowDateTime = moment(date).format('YYYY-MM-DD HH:mm:ss');
            }, 1000);
        },
        selectDate (e) {
            this.planTime = e;
        },
        selectDate_exc (e) {
            this.excutetime = e;
        },
        selectDate_check (e) {
            this.checktime = e;
        },
        selectDate_slove (e) {
            this.solveTime = e;
        },
        beforeDestroy: function () {
            // 实例销毁前青出于定时器
            if (this.timeVal) {
                clearInterval(this.timeVal);
            }
        },
        // 日历
        handleDateClick () {
            this.open = !this.open;
        },
        handleDateChange (date) {
            this.open = false;
            this.datetime = date;
            this.search();
        },
        // 获取部门
        getDepartList () {
            axios
                .request({
                    url: '/config/ProjectUser/getUserDepartment',
                    method: 'get'
                })
                .then(res => {
                    this.departList = [];
                    if (res.data.ret === 1) {
                        if (res.data.data.length !== 0) {
                            this.departList = res.data.data;
                            this.departLists = res.data.data;
                            for (let index = 0; index < this.departList.length; index++) {
                                if (this.$route.query.id == this.departList[index].id) {
                                    this.displayDepart = this.departList[index].title;
                                }
                                if (this.departId == this.departList[index].id) {
                                    this.displayDepart = this.departList[index].title;
                                    // console.log(this.displayDepart);
                                }
                            }
                        }
                    }
                });
        },
        // 选择部门
        getDepartId (e, d) {
            this.departId = e;
            sessionStorage.setItem('departid', this.departId);
            this.displayDepart = d;
            this.getDiv();
        },
        // 获取布局
        getDiv () {
            this.departId = sessionStorage.getItem('departid')
                ? sessionStorage.getItem('departid')
                : this.departId;
            axios
                .request({
                    url: '/kpi/ItemLayout/GetSetting?section=' + this.departId,
                    method: 'get'
                })
                .then(res => {
                    // console.log(res.data);

                    if (res.data.ret === 1) {
                        // this.kpiList = res.data.data;
                        this.row = res.data.data.row;
                        this.column = res.data.data.col;
                        // this.divList = [];
                        this.search();
                    } else {
                        this.row = 3;
                        this.column = 4;
                        this.search();
                    }
                });
        },
        // 人员列表
        getuserList () {
            axios
                .request({
                    url:
            '/config/user/GetUsers?page=1&pagesize=999999&sectionid=' +
            this.departidt,
                    method: 'get'
                })
                .then(res => {
                    this.userList = [];
                    if (res.data.ret === 1) {
                        if (res.data.data.length !== 0) {
                            this.userList = res.data.data;
                        }
                    }
                });
        },
        // 返回上一页
        back () {
            this.$router.go(-1); // 返回上一层
        },
        // 获取异常处理页面
        getDetailInfo (i) {
            this.indexdiv = i;
            if (this.divList[i].section != 0 && this.divList[i].itemId != 0) {
                this.showNum = false;
                this.section = this.divList[i].section;
                this.itemId = this.divList[i].itemId;
                // this.datetime = ;
                this.kpiDesc = this.divList[i].itemDesc;
                this.itemName = this.divList[i].itemDesc;
                this.echartData(); // 获取柱状图
                this.toTable(); // 获取列表
                this.getCycleList(this.section, this.itemName);
            }
        },
        // 返回第一个页面
        getFirstHtml () {
            this.showNum = true;
            this.indexdiv = 0;
        },
        // 刷新
        getRefresh () {
            this.echartData(); // 获取柱状图
            this.toTable(); // 获取列表
        },
        search () {
            this.divList = [];
            let total = this.row * this.column;
            for (var i = 0; i < total; i++) {
                var arr = {
                    id: 0,
                    section: 0,
                    itemId: 0,
                    item: '',
                    unit: '',
                    val: '',
                    target: '',
                    taskResult: '',
                    position: i + 1,
                    color: '',
                    bdColor: '',
                    targetStr: '',
                    unitStr: '',
                    busidate: ''
                };
                this.divList.push(arr);
            }
            var params = {
                section: this.departId,
                date: this.datetime
            };
            axios
                .request({
                    url: '/kpi/Tasklist/DashboardDisplay',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        var normalNum = 0;
                        var unmaintainedNum = 0;
                        var abnormalNum = 0;

                        // console.log(res.data.data);

                        this.divList.forEach(ele => {
                            res.data.data.forEach(v => {
                                if (ele.position === v.position) {
                                    var bdColor = '';
                                    if (v.result === 1) {
                                        unmaintainedNum += 1;
                                        bdColor = '6px solid #F59A23';
                                    } else if (v.result === 2) {
                                        abnormalNum += 1;
                                        bdColor = '6px solid #E7463C';
                                    } else {
                                        normalNum += 1;
                                        bdColor = '6px solid #7DD17D';
                                    }
                                    ele.id = v.id;
                                    ele.section = v.section;
                                    ele.itemId = v.itemId;
                                    ele.itemDesc = v.itemDesc;
                                    ele.item = v.itemDesc;
                                    ele.unit = v.unit;
                                    ele.val = v.actVal;
                                    ele.target = v.targetVal;
                                    ele.taskResult = v.taskResult;
                                    ele.position = v.position;
                                    ele.color = v.backColor;
                                    ele.bdColor = bdColor;
                                    ele.targetStr = this.$t('950386') + ':';
                                    ele.unitStr = this.$t('200017') + ':';
                                    ele.busidate = v.busidate;
                                    ele.cycle = v.cycle;
                                    ele.cycleDesc = v.cycleDesc;
                                }
                            });
                        });
                        this.normal = normalNum;
                        this.unmaintained = unmaintainedNum;
                        this.abnormal = abnormalNum;
                    }
                });
        },
        // 获取柱状图
        echartData () {
            var params = {
                section: this.section,
                item: this.itemId,
                date: this.datetime
            };
            axios
                .request({
                    url: '/kpi/Tasklist/GetMothItem',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        if (res.data.data.length !== 0) {
                            var targetval = 0;
                            var itemStr = '';
                            res.data.data.item.forEach(item => {
                                targetval = item.target;
                                itemStr = item.item;
                                item.value = item.val;
                            });
                            this.toEcharts(res.data.data, targetval, itemStr);
                        }
                    }
                });
        },
        toEcharts (data, targetval, itemStr) {
            let div =
        '<div class="divEchartcon" id="divEchartcon" style="width:100%;height:400px;"></div>';
            let dom = this.$refs.divEchart;
            dom.innerHTML = div;
            var myChart = echarts.init(document.getElementById('divEchartcon'));
            myChart.clear();
            myChart.off('click'); // 这里很重要！！！
            var option = {
                title: {
                    text: '',
                    // text: this.$t(950432) + itemStr + this.$t(950433),
                    textStyle: {
                        // 设置主标题风格
                        color: 'white', // 设置主标题字体颜色
                        fontStyle: 'normal', // 主标题文字风格
                        fontFamily: 'sans-serif',
                        fontSize: 18
                    },
                    subtextStyle: {
                        fontSize: 14
                    },
                    left: '45%',
                    top: 'top'
                    // subtext: '纯属虚构'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.date,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            // interval:5,
                            // rotate:30,
                            textStyle: {
                                color: '#fff',
                                fontSize: '18'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                                // width:3,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        axisLabel: {
                            //   interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                            rotate: 38 // 调整数值改变倾斜的幅度（范围-90到90）
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            // 网格线
                            lineStyle: {
                                type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
                            },
                            show: true // 隐藏或显示
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff'
                                // width:1,//这里是坐标轴的宽度
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: '18'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: this.$t(950408),
                        type: 'bar',
                        // barWidth: "60%",

                        barMaxWidth: 70, // 最大宽度
                        data: data.item,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var taskResult = params.data.taskResult;
                                    var exception = params.data.exception;
                                    var colorStr = '';

                                    // 异常未制定 红色 2-  0.1.2
                                    if (taskResult === 2 && exception == 1) {
                                        colorStr = '#E7463C';
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#E7463C' }, // 柱图渐变色
                                            { offset: 0.5, color: '#FA8072' }, // 柱图渐变色
                                            { offset: 1, color: '#FFE4E1' } // 柱图渐变色
                                        ]);
                                    }
                                    //   异常已制定 橙色
                                    if (taskResult === 2 && exception == 2) {
                                        colorStr = '#E7463C';
                                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#FF8C00' }, // 柱图渐变色
                                            { offset: 1, color: '#FFDEAD' } // 柱图渐变色
                                        ]);
                                    }

                                    if (taskResult === 3) {
                                        if (exception === 3) {
                                            // 异常已处理 黄色
                                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: '#E5D20D' }, // 柱图渐变色
                                                { offset: 1, color: '#FAFAD2' } // 柱图渐变色
                                            ]);
                                        } else {
                                            // 正常蓝色
                                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: '#008000' }, // 柱图渐变色
                                                { offset: 1, color: '#90EE90' } // 柱图渐变色
                                            ]);
                                        }
                                    }
                                    //   return colorStr;
                                }
                            }
                        }
                    },
                    {
                        // mubiaozhi
                        type: 'line',
                        name: '目标值',
                        data: data.targetVal
                    },
                    {
                        // mubiaozhi
                        type: 'line',
                        name: '累计值',
                        data: data.addVal,
                        itemStyle: {
                            normal: {
                                color: 'green'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };

            var _this = this;
            // 点击事件
            var arr = [];
            arr = data.item;
            myChart.getZr().on('click', params => {
                let pointInPixel = [params.offsetX, params.offsetY];
                if (myChart.containPixel('grid', pointInPixel)) {
                    let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
                        params.offsetX,
                        params.offsetY
                    ])[0];
                    let dataA = [];
                    dataA = arr[xIndex];
                    _this.id = dataA.id;

                    // 正常不弹出
                    if (dataA.taskResult == 3) {
                        return;
                    }
                    // 添加
                    if (dataA.actionId === 0) {
                        _this.actiontype = 1
                        _this.getuserList();
                        _this.responsibleID = 0
                        _this.planTime = ''
                        _this.desc = ''
                        _this.record = ''
                        _this.excutetime = ''
                        _this.checktime = ''
                        _this.actionId = 0
                        _this.modalPlan = true
                    }

                    // 判断 异常、未处理状态 --指定责任人
                    if (dataA.actionId != 0 &&
            dataA.taskResult === 2 &&
            (dataA.exception === 0 || dataA.exception === 1 || dataA.exception === 2)
                    ) {
                        _this.actiontype = 2
                        _this.getuserList();
                        _this.responsibleID = dataA.responsibleID
                        _this.planTime = dataA.plantime != '' ? moment(dataA.plantime).format('YYYY-MM-DD') : ''
                        _this.desc = dataA.desc1
                        _this.record = dataA.cause
                        _this.excutetime = dataA.excutetime
                        _this.checktime = dataA.checktime
                        _this.actionId = dataA.actionId
                        _this.modalPlan = true
                    }
                }
            });
        },
        // 获取指标周期
        getCycleList (id, title) {
            // /kpi/Item/GetCycle
            let data = {
                section: id,
                itemName: title
            };
            axios
                .request({
                    url: '/kpi/Item/GetCycle',
                    data,
                    method: 'post'
                })
                .then(res => {
                    // this.departList = [];
                    // this.data1 = res.data.data;
                    // console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.cycleList = res.data.data;
                        // this.kpiCycle = this.cycleList[0].cycle;
                    }
                });
        },
        hide (e) {
            console.log(e.target);
        },
        changeCharts (i) {
            this.showNum = false;
            // this.section = this.divList[i].section;
            this.itemId = this.cycleList[i].id;
            // this.datetime = this.divList[i].datetime;
            // this.itemName = this.divList[i].itemDesc;
            // console.log(this.itemName)
            this.echartData(); // 获取柱状图
            this.toTable();
            this.isactive = i;
        },
        handleDateChange2 (date) {
            this.open = false;
            this.datetime = date;
            // this.search();
            this.echartData(); // 获取柱状图
            this.toTable();
        },
        // 责任人提交
        planPost () {
            if (
                this.responsibleID === '' || this.responsibleID === 0 ||
        this.planTime === ''
            ) {
                this.$Message.error(this.$t('600652'));
                return false;
            }
            var data = {
                TaskId: this.id,
                ActionId: this.actionId,
                Reposible: this.responsibleID,
                Plantime: this.planTime,
                Solution: this.record,
                cause: this.cause,
                Desc: this.desc,
                CheckTime: this.checktime,
                ExcuteTime: this.excutetime,
                SloveTime: this.solveTime
            };
            if (this.actiontype === 1) {
                var url = '/kpi/Action/Add'
            } else {
                var url = '/kpi/Action/Modify'
            }

            this.$Spin.show();
            axios
                .request({
                    url: url,
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.$Spin.hide();
                    if (res.data.ret === 1) {
                        this.obj = {};
                        this.$Message.success(this.$t('1064'));
                        this.echartData();
                        this.toTable();
                        this.modalPlan = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        // 处理过程记录
        recordPost () {
            if (this.operaterID === '') {
                this.$Message.error(this.$t('600652'));
                return false;
            }

            var data = {
                TaskId: this.id,
                Operater: this.operaterID,
                Solution: this.isSolvenum ? '完成' : '未解决',
                Fxied: this.isSolvenum ? 1 : 0
            };
            this.$Spin.show();
            axios
                .request({
                    url: '/kpi/ActionResult/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    this.$Spin.hide();
                    if (res.data.ret === 1) {
                        this.obj = {};
                        this.$Message.success(this.$t('1064'));
                        this.echartData();
                        this.modalRecord = false;
                        this.toTable();
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        // 列表
        toTable () {
            var params = {
                section: this.section,
                item: this.itemId,
                date: this.datetime
            };
            axios
                .request({
                    url: '/kpi/Tasklist/GetMothItemException',
                    params,
                    method: 'get'
                })
                .then(res => {
                    var data = [];
                    if (res.data.ret === 1) {
                        if (res.data.data.length !== 0) {
                            res.data.data.forEach(item => {
                                if (item) {
                                    // console.log();
                                    data.push({
                                        depart: item.sectionDesc, // 部门
                                        kpiValue: item.item, // kpi指标
                                        datetime: item.busidate, // 日期
                                        targetValue: item.target, // 目标值
                                        unit: item.unit, // 单位
                                        actualValue: item.val, // 实际值
                                        judgementLogic: item.condition, // 判断逻辑
                                        status: item.taskResultDesc, // 维护状态
                                        doStatus: item.exceptionStatus, // 处理状态
                                        username: item.responsiblePersion, // 责任人
                                        responsibleID: item.responsibleID,
                                        planTime: item.plantime, // 计划时间
                                        record: item.solution, // 过程记录
                                        isSolve: item.resultDesc, // 是否解决
                                        isSolvenum: item.result !== 0, // 是否解决
                                        solveTime: item.operatetime, // 解决时间
                                        id: item.id,
                                        taskResult: item.taskResult, // 维护状态
                                        exception: item.exception, // 处理状态
                                        operaterID: item.operater,
                                        because: item.cause,
                                        remark: item.remark,
                                        desc1: item.desc1,
                                        checktime: item.checktime,
                                        excutetime: item.excutetime
                                    });
                                }
                            });
                            this.tableData = data;
                        } else {
                            this.tableData = [];
                        }
                    }
                });
        },
        // 时间戳转换成时间
        timestampToTime (timeStampe) {
            var date = new Date(timeStampe); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M =
        (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-';

            var D = date.getDate() < 11 ? '0' + (date.getDate() - 1) : date.getDate();
            // var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getDate()) + ':'
            // var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
            // var s = (date.getSeconds() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
            return Y + M + D;
        }
    }
};
</script>
<style lang="less" scoped>
/******展示界面 start *****/
.testdiv {
  width: 100%;
  height: 100%;
  background: black;
}
.divTop {
  width: 100%;
  height: 70px;
  .top {
    height: 100%;
    float: left;
    font-size: 18px;
  }
}
.divTop .topLeft {
  width: 30%;
  color: #fff;
  .left {
    float: left;
    width: 50%;
    height: 100%;
  }
  .leftTitle {
    line-height: 70px;
  }
}

.divTop .topMiddle {
  width: 35%;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  .middle {
    height: 100%;
    float: left;
    padding: 5px;
    .divCircular {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      text-align: center;
      line-height: 52px;
      font-size: 25px;
      font-weight: bold;
    }
  }
  .right {
    // width: 50%;
    height: 100%;
  }
  .rightOne {
    line-height: 70px;
    a {
      color: #fff;
    }
  }
  .middleOne {
    width: e("calc(50% - 150px / 2)");
    text-align: right;
    div {
      border: 4px solid #7dd17d;
    }
  }
  .middleTwo {
    width: 150px;
    div {
      border: 4px solid #f59a23;
    }
  }
  .middleThree {
    width: e("calc(50% - 150px / 2)");
    text-align: left;
    div {
      border: 4px solid #e7463c;
    }
  }
}
.divTop .topRight {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .rightTwo {
    line-height: 70px;
    font-weight: bold;
    // text-align: right;
    color: #fff;
    a {
      color: #fff;
    }
    .ivu-dropdown-menu {
      text-align: left;
    }
  }
}

.divDown {
  width: 100%;
  height: e("calc(100% - 70px)");
  color: #fff;
  font-size: 20px;
  .down {
    width: 100%;
    height: 100%;
    overflow: auto;
    .divScreen {
      width: e("calc(100% / 4)");
      height: 290px;
      float: left;
      padding: 3px;
      .downOne {
        width: 100%;
        height: 100%;
        background: #333333;
        cursor: pointer;
        .downtop {
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 20px;
          color: #fff;
        }
        .downbottom {
          width: 100%;
          height: e("calc(100% - 50px)");

          .bottomLeft {
            width: 40%;
            height: 100%;
            float: left;
            padding: 10px 0px 0px 10px;
            .leftContent {
              width: 100%;
              height: 15%;
              font-size: 18px;
            }
            .leftVal {
              padding-left: 20px;
            }
          }
          .bottomRight {
            width: 60%;
            height: 100%;
            float: left;
            position: relative;
            .rightCycle {
              width: 55%;
              padding-top: 55%;
              position: absolute;
              bottom: 10%;
              right: 10%;
              .cycle {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                text-align: center;
                padding-top: 35%;
                font-size: 25px;
              }
            }
          }
        }
      }
    }
  }
}
/******展示界面 end *****/

/******异常处理 start *****/
.divOne,
.divTwo {
  width: 100%;
  height: 100%;
}
.divTwo .right {
  color: #fff;
}
.divTable {
  padding: 0 3%;
}
.divEchart {
  width: 100%;
  height: 400px;
}
.divEchartcon {
  width: 100%;
  height: 400px;
}
.cycleWrap {
  display: flex;
}
.type {
  width: 50px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
}
.color {
  color: #61a5e8;
}
/******异常处理 end *****/
</style>
