<template>
  <div class="full">

    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 25%;height: 60%;top: 7%;left: 10px">
      <div class="full center" style="flex-direction: column">
        <div style="width: 90%;height: 15%;justify-content: left;" class="center title">设备</div>
        <div style="width: 100%;height: 60%;" class="center">
          <div style="width: 50%;height: 100%">
            <div class="center" style="width: 100%;height: 15%;color: #3ce6c9">在线</div>
            <div class="center" style="width: 100%;height: 65%">
              <dv-water-level-pond :config="config0" style="width:120px;height:160px" />
            </div>
          </div>
          <div style="width: 50%;height: 100%">
            <div class="center" style="width: 100%;height: 15%;color: #06aae7">离线</div>
            <div class="center" style="width: 100%;height: 65%">
              <dv-water-level-pond :config="config1" style="width:120px;height:160px" />
            </div>
          </div>
          <div style="width: 50%;height: 100%">
            <div class="center" style="width: 100%;height: 15%;color: #ff103e">告警</div>
            <div class="center" style="width: 100%;height: 65%">
              <dv-water-level-pond :config="config2" style="width:120px;height:160px" />
            </div>
          </div>
        </div>
        <dv-scroll-board :config="dataConfigB" style="width: 98%;height: 50%;font-weight: bold" />
      </div>
    </dv-border-box-7>

    <!-- 数据统计  -->
<!--    <dv-border-box-2 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 23%;height: 20%;top: 7%;left: 1%">-->
<!--      <div  class="center full" style="flex-direction: column">-->
<!--        <div  style="width: 90%;height: 30%;color: white;line-height: 40px;" class="center">数据汇总</div>-->
<!--        <div class="center" style="width: 90%;height: 60%;color: #47fcd2;font-size: 20px;font-style: italic;">业务情况：-->
<!--          <CountIn :startVal='0' :endVal='172' :speed='1' :decimals="0" :isReverse=false></CountIn>-->
<!--          &nbsp;&nbsp;&nbsp;月增长指数：<CountIn :startVal='0' :endVal='12.9' :speed='2' :decimals="1" :isReverse=false></CountIn>-->
<!--          %</div>-->
<!--        <div class="center" style="width: 90%;height: 60%;color: #47fcd2;font-size: 20px;font-style: italic;">当日办理次数：-->
<!--          <CountIn :startVal='0' :endVal='168' :speed='1' :decimals="0" :isReverse=false></CountIn>-->
<!--          &nbsp;&nbsp;&nbsp;人员分布：-->
<!--          <CountIn :startVal='0' :endVal='189' :speed='1' :decimals="0" :isReverse=false></CountIn>-->
<!--        </div>-->
<!--      </div>-->
<!--    </dv-border-box-2>-->
<!--    人员结构-->
<!--    <div class="center position-absolute" style="top: 28%;width: 23%;height: 30%;left: 1%;flex-direction: column">-->
<!--      <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">-->
<!--        <div class="full center" style="flex-direction: column">-->
<!--          <div style="width: 90%;height: 20%;justify-content: left" class="title center">人员结构</div>-->
<!--          <div style="width: 100%;height: 80%" id="type"></div>-->
<!--        </div>-->
<!--      </dv-border-box-8>-->
<!--    </div>-->
<!--    业务办理进度-->
<!--项目数据-->
<!--    <div style="flex-direction: column;position:absolute;width: 22%;height: 30%;top: 10%;right: 1%;background: linear-gradient(to left, rgba(0,0,0,0.7),rgba(0,0,0,0.2));">-->
<!--      <div style="width: 90%;height: 10%;justify-content: left;" class="center title">项目分析数据</div>-->
<!--      <div id="accept" style="width: 100%;height: 80%"></div>-->
<!--    </div>-->
<!--业务数据-->
<!--    <div class="center position-absolute" style="top: 60%;width: 25%;height: 30%;left: 5px;flex-direction: column">-->
<!--      <dv-border-box-4 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">-->
<!--        <div class="full center" style="flex-direction: column">-->
<!--          <div style="width: 90%;height: 20%;justify-content: left;" class="title center">往年业务数据分析</div>-->
<!--          <div style="width: 100%;height: 80%" id="business"></div>-->
<!--        </div>-->
<!--      </dv-border-box-4>-->
<!--    </div>-->
<!--    满意度统计-->
<!--    <dv-border-box1 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 33%;height: 25%;top: 65%;right: 33%">-->
<!--      <div style="width: 100%;height: 10%;justify-content: center" class="title center">满意度统计</div>-->
<!--      <dv-conical-column-chart :config="config" style="width:90%;height:90%;" />-->
<!--    </dv-border-box1>-->
  </div>
</template>

<script>
  import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
  import CountIn from "../../components/count-in/count-in";

    export default {
      name: "GovernmentAffairs",
      components: {CountIn},
      data(){
        return{
          accept: {},
          business: {},
          type: {},
          amount: 0,
          config:{
            columnColor:'rgba(0,78,50,0.9)',
            data:[
              {
                name: '非常满意',
                value: 120
              },
              {
                name: '满意',
                value: 100
              },
              {
                name: '较满意',
                value: 71
              },
              {
                name: '一般',
                value: 66
              },
              {
                name: '不太满意',
                value: 30
              },
              {
                name: '不满意',
                value: 20
              },
              {
                name: '很不满意',
                value: 9
              }
            ],
            showValue: true
          },
          config0: {
            data: [83],
            shape: 'roundRect',
            waveHeight:25
          },
          config1: {
            data: [34],
            shape: 'roundRect',
            waveHeight:25,
            colors: ['#05afee','#dddddd','#064d73']
          },
          config2: {
            data: [17],
            shape: 'roundRect',
            waveHeight:25,
            colors: ['#dd0f36','#dddddd','#dddddd']
          },
          dataConfigB: {
            rowNum: 6,
            waitTime:1500,
            header: ['设备名称','<span style=\"color:#3dff11;\">设备编号</span>','<span style=\"color:#ddcc39;\">设备厂商</span>','告警事件'],
            headerBGC: '#005b3a',
            align:['center','center','center','center'],
            data: [
              ['烟感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">腾讯</span>',"2021年5月18日15:38:31"],
              ['气感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">阿里</span>',"2021年5月18日15:38:31"],
              ['消防栓', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">华为</span>',"2021年5月18日15:38:31"],
              ['井盖', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">百度</span>',"2021年5月18日15:38:31"],
              ['烟感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">滴滴</span>',"2021年5月18日15:38:31"],
              ['气感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">美团</span>',"2021年5月18日15:38:31"],
              ['消防栓', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">字节跳动</span>',"2021年5月18日15:38:31"],
              ['井盖', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">知乎</span>',"2021年5月18日15:38:31"],
              ['烟感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">微软</span>',"2021年5月18日15:38:31"],
              ['气感', '<span style=\"color:#3dff11;\">YG123168</span>', '<span style=\"color:#ddcc39;\">谷歌</span>',"2021年5月18日15:38:31"],
            ],
            oddRowBGC: 'rgba(0,78,50,0.2)',
            evenRowBGC: 'rgba(127,127,127,0.2)',
          },
        }
      },
      mounted() {
        this.initCharts();
        this.onload();
      },
      methods: {
        initCharts(){
          this.newCharts("accept","accept");
          this.newCharts("business","business");
          this.newCharts("type","type");
        },
        newCharts(id,propertyName){
          const container = document.getElementById(id)
          let myChart = new Charts(container);
          this[propertyName] = myChart;
        },
        setOption(){
          //项目数据分析
          this.accept.setOption({
            // title: {
            //   // text: '项目分析数据',
            //   offset :[-130, -55],
            //   style: {
            //     fill: '#49baa5',
            //     fontSize: 16  ,
            //     textAlign: 'center',
            //     textBaseline: 'top',
            //   }
            // },
            radar: {
              axisLabel: {
                style: {
                  fontSize: 12,
                  fill: "#ffffff"
                }
              },
              indicator: [
                { name: '电子公文系统', max: 300 },
                { name: '绩效考核系统', max: 300 },
                { name: '人事管理系统', max: 300 },
                { name: 'OA系统', max: 300 },
                { name: '其他', max: 300 },
              ]
            },
            series: [
              {
                name: '同比',
                type: 'radar',
                data: [111, 256, 178,150,120,10],
                label: {
                  show: true,
                  style: {
                    fill: '#dddddd'
                  }
                },
                animationCurve: 'easeOutBounce'
              },
              {
                name: '环比',
                type: 'radar',
                data: [222, 245, 220],
                label: {
                  show: true
                },
                animationCurve: 'easeOutBounce'
              }
            ]
          });
          //业务数据分析
          this.business.setOption({
            legend: {
              data: ['服务类政务','管理类政务'],
              textStyle: {
                fontWeight: 'bold',
                textColor:'#ffffff'
              }
            },
            title: {
              text: '政务数据分析',
              style: {
                fill: '#5fe9c8',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
                textBaseline: 'bottom'
              }
            },
            yAxis: {
              data: 'value',
              nameTextStyle: {
                fill: '#5fe9c8',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#5fe9c8',
                  fontSize: 12
                }}
            },
            xAxis: {
              data: ['2020', '2019', '2018', '2017', '2016'],
              nameTextStyle: {
                fill: '#5fe9c8',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#5fe9c8',
                  fontSize: 12
                }}
            },
            series:[
              {
                name: '服务类政务',
                data: [3100, 3230, 3900, 4100, 3500, 4200, 3985],
                type: 'bar',
                animationCurve: 'easeOutBack'
              },
              {
                name: '管理类政务',
                data: [2000, 2230, 1900, 2100, 2500, 2000, 2985],
                type: 'bar',
                animationCurve: 'easeOutBack'
              }
            ]
          });
          //人员组成
          this.type.setOption({
            // title: {
            //   // text: '人员组成',
            //   style: {
            //     fill: '#5fe9c8',
            //     fontSize: 17,
            //     fontWeight: 'bold',
            //     textAlign: 'center',
            //     textBaseline: 'bottom'
            //   }
            // },
            series: [
              {
                type: 'pie',
                data: [
                  { name: '硕士', value: 0.5 },
                  { name: '博士', value: 0.3 },
                  { name: '本科', value: 0.17 },
                  { name: '专科', value: 0.03 },
                ],
                insideLabel: {
                  show: true
                },
                outsideLabel: {
                  style: {
                    fontSize: 17,
                    fontWeight: 'bold',
                    textAlign: 'center',
                    textBaseline: 'bottom'
                  }
                }
              }
            ]
          });
        },
        onload(){
          changeDefaultConfig('color',['rgb(87,208,109)','#1691f3','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
          this.setOption();
        },
      }
  }

</script>

<style scoped>
  .full{
    width: 100%;
    height: 100%;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .position-absolute{
    position: absolute;
  }
  .title{
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  .click{
    cursor: pointer;
  }
  .click:hover{
    transform: translate(2px,2px);
  }
</style>
