<template>
  <div class="full">
    <!-- 疫情数据统计   -->
    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 30%;top: 11%;left: 10px">
      <div class="full" style="flex-direction: column;padding-top: 7%">
        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left;padding: 3%" class="center"> 疫情数据统计</div>
        <div style="width: 100%;height: 57%;" class="center">
          <div style="width: 50%;height: 100%;" class="center">
            <dv-active-ring-chart :config="eventOption" style="width:100%;height:90%" />
          </div>
          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">累计确诊总数
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">
                <CountIn :startVal='0' :endVal='120' :speed='1' :decimals="0" :isReverse=false></CountIn></div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">累计治愈人数
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic;">
                <CountIn :startVal='0' :endVal='115' :speed='1' :decimals="0" :isReverse=false></CountIn></div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">累计死亡人数
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">5</div>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-7>
    <!-- 汤阴市各镇疫情情况   -->
    <dv-border-box-7 :color="['#278080', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 40%;height: 24%;top: 64%;left: 30%">
      <div class="full center" style="flex-direction: column">
        <div style="width: 90%;height: 15%;color: white;font-size: 18px" class="center">汤阴县各镇疫情情况</div>
        <dv-scroll-board :config="dataConfigA" style="width: 100%;height: 100%;font-weight: bold;font-size: larger" />
      </div>
    </dv-border-box-7>

    <!-- 疫情防控   -->
    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 50%;left: 10px">
      <div class="full center" style="height: 100%">
        <div style="position: absolute;width: 90%;height: 20%;color: white;top:0;font-size: 18px;justify-content: left" class="center">疫情防控</div>
        <div style="width: 40%;height: 100%;" class="center">
          <dv-decoration-9 style="width:130px;height:130px;color: #4fe766;font-size: 30px">95</dv-decoration-9>
        </div>
        <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
          <div v-for="(item,index) of defenceList" style="width: 95%;height: 35px;" class="center">
            <div style="width: 30%;height: 80%;background: #90a24b;border-radius: 5px" class="center">{{item.label}}</div>
            <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px" class="center">{{item.value}}</div>
          </div>
        </div>
      </div>
    </dv-border-box-7>
    <!-- 疫苗接种情况   -->
    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 50%;top: 7%;right: 10px">
      <div class="full center" style="flex-direction: column">
        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left" class="center"> 疫苗接种情况</div>
        <div style="width: 100%;height: 40%;" class="center">
          <div style="width: 50%;height: 100%;" class="center">
            <dv-active-ring-chart :config="eventOption1" style="width:100%;height:90%" />
          </div>
          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">已接种人数
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic">209067</div>
            </div>
            <div class="center"  style="width: 90%;height: 50%;color: white;justify-content: left">未接种人数
              <div style="display: inline-block;text-indent: 50px;font-size: 30px;color: #e5c555;font-style: italic;">221736</div>
            </div>
          </div>
        </div>
        <dv-scroll-board :config="dataConfigB" style="width: 98%;height: 50%;font-weight: bold" />
      </div>
    </dv-border-box-7>
    <!-- 数据面板5   -->
    <div class="center" style="position:absolute;width: 30%;height: 23%;top: 64%;right: 10px;background: linear-gradient(to left, rgba(0,78,50,0.5),rgba(0,91,58,0));">
      <div style="width: 90%;height: 100%">
        <div id="tendency" class="full"></div>
      </div>
    </div>
  </div>
</template>

<script>
    import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
    import CountIn from "../../components/count-in/count-in";
    export default {
      components: {CountIn},
      mounted() {
        this.initCharts();
        this.onload();
      },
      data(){
          return{
            tendency: {},
            eventOption: {
              digitalFlopStyle: {
                fontSize: 20,
                fill: '#fff'
              },
              data: [
                {
                  name: '治愈',
                  value: 10
                },
                {
                  name: '死亡',
                  value: 1
                }
              ]
            },
            eventOption1: {
              digitalFlopStyle: {
                fontSize: 20,
                fill: '#fff'
              },
              data: [
                {
                  name: '已接种',
                  value: 209067
                },
                {
                  name: '未接种',
                  value: 221736
                }
              ]
            },
            defenceList: [
              {label: '高',value:'群众对疫情关注度'},
              {label: '高',value:'防控政策执行程度'},
              {label: '90%',value:'戴口罩人群占比'},
              {label: '95%',value:'防控宣传覆盖率'},
              {label: '95分',value:'商家防疫措施'},
            ],
            dataConfigA: {
              rowNum: 6,
              waitTime:1500,
              header: ['行政区域','确诊人数','<span style=\"color:#3dff11;\">治愈人数</span>','<span style=\"color:#dd0f36;\">死亡人数</span>','风险等级','防控等级'],
              headerBGC: '#005b3a',
              align: ['center','center','center','center','center','center'],
              data: [
                ['城关镇', '8', '<span style=\"color:#3dff11;\">7</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
                ['韩庄镇', '11', '<span style=\"color:#3dff11;\">8</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
                ['白营镇', '7', '<span style=\"color:#3dff11;\">5</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
                ['古贤镇', '5', '<span style=\"color:#3dff11;\">5</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
                ['菜园镇', '2', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
                ['任固镇', '4', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
                ['五陵镇', '4', '<span style=\"color:#3dff11;\">3</span>','<span style=\"color:#dd0f36;\">1</span>','低风险','Ⅳ级'],
                ['瓦岗乡', '6', '<span style=\"color:#3dff11;\">4</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
                ['伏道镇', '1', '<span style=\"color:#3dff11;\">1</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
                ['宜沟镇', '3', '<span style=\"color:#3dff11;\">3</span>','<span style=\"color:#dd0f36;\">0</span>','低风险','Ⅳ级'],
              ],
              oddRowBGC: 'rgba(0,78,50,0.2)',
              evenRowBGC: 'rgba(127,127,127,0.2)',
            },
            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;\">36099</span>', '<span style=\"color:#ddcc39;\">35947</span>',"50.1%"],
                ['韩庄镇', '<span style=\"color:#3dff11;\">21834</span>', '<span style=\"color:#ddcc39;\">21486</span>',"50.4%"],
                ['白营镇', '<span style=\"color:#3dff11;\">16314</span>', '<span style=\"color:#ddcc39;\">16528</span>',"49.69%"],
                ['古贤镇', '<span style=\"color:#3dff11;\">13065</span>', '<span style=\"color:#ddcc39;\">14723</span>',"47.02%"],
                ['菜园镇', '<span style=\"color:#3dff11;\">21280</span>', '<span style=\"color:#ddcc39;\">24559</span>',"46.42%"],
                ['任固镇', '<span style=\"color:#3dff11;\">22211</span>', '<span style=\"color:#ddcc39;\">24490</span>',"47.56%"],
                ['五陵镇', '<span style=\"color:#3dff11;\">17826</span>', '<span style=\"color:#ddcc39;\">20133</span>',"46.96%"],
                ['瓦岗乡', '<span style=\"color:#3dff11;\">12619</span>', '<span style=\"color:#ddcc39;\">16148</span>',"43.86%"],
                ['伏道镇', '<span style=\"color:#3dff11;\">20179</span>', '<span style=\"color:#ddcc39;\">20463</span>',"49.65%"],
                ['宜沟镇', '<span style=\"color:#3dff11;\">27640</span>', '<span style=\"color:#ddcc39;\">27259</span>',"50.34%"],
              ],
              oddRowBGC: 'rgba(0,78,50,0.2)',
              evenRowBGC: 'rgba(127,127,127,0.2)',
            },
          }
      },
      methods:{
        initCharts(){
          this.newCharts('tendency','tendency');
        },
        newCharts(id,propertyName){
          const container = document.getElementById(id)
          let myChart = new Charts(container);
          this[propertyName] = myChart;
        },
        setTendencyOption(){
          this.tendency.setOption({
            title: {
              text: '疫情趋势',
              style: {
                fill: '#ffffff',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
                textBaseline: 'bottom'
              }
            },
            xAxis: {
              name: '月份',
              data: ['1', '2', '3', '4', '5', '6','7','8', '9', '10', '11', '12'],
              nameTextStyle: {
                fill: '#ffffff',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#ffffff',
                  fontSize: 12
                }}
            },
            yAxis: {
              name: '(人数)',
              data: 'value',
              nameTextStyle: {
                fill: '#ffffff',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#ffffff',
                  fontSize: 12
                }}
            },
            series: [
              {
                data: [10, 5, 2, 1, 0, 4, 3,1, 2, 6, 8, 9],
                type: 'line',
                lineArea: {
                  show: true,
                  gradient: ['rgba(10,74,112,0.6)', 'rgba(55, 162, 218, 0.8)']
                }
              }
            ]
          });
        },
        onload(){
          changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
          this.setTendencyOption();
        },
      }
    }
</script>

<style scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .full{
    width: 100%;
    height: 100%;
  }
</style>
