<template>
  <div class="full" >

    <!-- 数据面板1   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;left: 10px">
      <div  id="community-tendency" style="height: 100%;width: 100%;"  ></div>
    </dv-border-box-8>
    <!-- 数据面板2   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 50%;top: 37%;left: 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="eventOption" style="width:100%;height:90%" />
          </div>
          <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div v-for="(item,index) of eventList" style="width: 95%;height: 35px;" class="center">
              <div style="width: 30%;height: 80%;background: rgba(39,128,128,0.8);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-scroll-board :config="dataConfigA" style="width: 98%;height: 50%" />
      </div>
    </dv-border-box-8>

    <!-- 数据面板3   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;right: 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 :color="['#90d24b', '#319898']" style="width:130px;height:130px;color: #4fe766;font-size: 30px">87</dv-decoration-9>
        </div>
        <div  style="width: 60%;height: 100%;flex-direction: column;color: white" class="center" >
            <div v-for="(item,index) of deviceList" style="width: 95%;height: 35px;" class="center">
              <div style="width: 30%;height: 80%;background: rgba(39,128,128,0.8);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-8>

    <!-- 数据面板4   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 37%;right: 10px">
      <div class="full center" style="flex-direction: column">
        <div style="width: 90%;height: 15%;color: white;font-size: 18px">公共卫生事件影响人数</div>
        <dv-capsule-chart :config="trafic" style="width: 90%;height: 85%" />
      </div>
    </dv-border-box-8>

    <!-- 数据面板5   -->
    <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 28%;top: 64%;right: 10px">
      <div class="full center" style="flex-direction: column">
        <div style="width: 90%;height: 10%;justify-content: left;color: white;font-size: 20px" class="center">
          公共卫生
        </div>
        <div class="center" style="width: 100%;height: 90%">
          <div  style="height: 100%;width: 50%;flex-direction: column" class="center">
            <div v-for="(item,index) of medicalList" style="width: 95%;height: 35px;" class="center">
              <div style="width: 70%;height: 100%;font-size: 13px;font-style: italic;justify-content: left;text-indent: 5px;color: #dddddd" class="center">{{item.value}}</div>
              <div style="width: 30%;height: 80%;background: rgb(125,128,39);border-radius: 5px" class="center">{{item.label}}</div>
            </div>
          </div>
          <div style="width:50%;height:100%" id="ziyuan"></div>
        </div>
      </div>
    </dv-border-box-8>

    <!-- 数据面板7  路况   -->
<!--    <div style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));position:absolute;width: 10%;height: 20%;top: 75%;right: 22%;color: white">-->
<!--      <div class="full center">-->
<!--        <div id="round1" class="full"></div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div style="background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));position:absolute;width: 10%;height: 20%;top: 75%;left: 22%;color: white">-->
<!--      <div class="full center">-->
<!--        <div id="round2" class="full"></div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 数据面板8  趋势   -->
<!--    <div style="position:absolute;width: 36%;height: 20%;top: 70%;right: 32%;color: white;background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0))">-->
<!--      <div class="full center">-->
<!--        <div  id="accident" style="height: 100%;width: 100%"></div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 数据面板  地图建筑数据   -->
    <div style="position:absolute;width: 7%;height: 40%;top: 10%;left: 22%;color: white;">
      <div class="full center" style="flex-direction: column">
        <div class="center click" v-for="(item,index) of buildingList" :key="item" style="width: 150px;height: 50px;background: rgba(105,117,77,0.8);border-radius: 5px;margin-top: 5px">
          {{item.name}}
        </div>
      </div>
    </div>

    <!-- POI服务  -->
<!--    <p-o-i-service style="position:absolute;width: 30%;height: 5%;top: 10%;left: 23%;"></p-o-i-service>-->

  </div>
</template>

<script>
import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
import POIService from "../../components/3DMap/POIService";
export default {
  name: "CityScreen",
  mounted() {
    this.initCharts();
    this.onload();
    },
  components: {POIService},
  data(){
    return{
      // buildingList: [
      //   {icon: '',name: '教育机构'},
      //   {icon: '',name: '事件多发地'},
      //   {icon: '',name: '医疗机构'},
      //   {icon: '',name: '政府机构'},
      //   {icon: '',name: '娱乐设施'},
      // ],
      eventList:[
        {label: '16',value: '烟感报警事件'},
        {label: '18',value: '燃气报警事件'},
        {label: '19',value: '井盖丢失'},
        {label: '10',value: '消防栓'},
        {label: '12',value: '电表异常'},
      ],
      eventOption: {
        data: [
          {
            name: '设备',
            value: 22
          },
          {
            name: '人员',
            value: 44
          },
          {
            name: '报事',
            value: 24
          }
        ]
      },
      deviceList: [
        {label: '23%',value:'社会环境犯罪率'},
        {label: '82分',value:'治安安全'},
        {label: '78分',value:'社会保释'},
        {label: '86分',value:'行政与法律'},
        {label: '223亿',value:'财政支出'},
        {label: '426亿',value:'风险保障能力保险违赔'},
      ],
      medicalList: [
        {label: "8",value: '公共安全'},
        {label: "18",value: '人类流行性疾病'},
        {label: "16",value: '食品安全'},
        {label: "18",value: '药品安全'},
        {label: "98%",value: '污垃处理率'},
      ],
      communityTendency: {},
      accident: {},
      videoShow: false,
      dataConfigA: {
        rowNum: 10,
        waitTime:1000,
        header: ['设备名称','设备编号','设备厂商','告警'],
        headerBGC: '#ab9d3a',
        data: [
          ['烟感', 'YG1237821', '未知','处理中'],
          ['气感', 'QG8123812', '未知','处理中'],
          ['燃气报警器', 'RQ4538164', '未知','处理中'],
          ['智能垃圾桶', 'LJT1658121', '未知','处理中'],
          ['智能电表', 'DB48132151', '未知','处理中'],
          ['地磁', 'DC13541871', '未知','处理中'],
          ['消防栓', 'XFS1231816', '未知','处理中'],
          ['智能井盖', 'JG9842124', '未知','处理中'],
          ['燃气报警器', 'RQ4538164', '未知','处理中'],
          ['智能垃圾桶', 'LJT1658121', '未知','处理中'],
          ['智能电表', 'DB48132151', '未知','处理中'],
          ['地磁', 'DC13541871', '未知','处理中'],
        ],
        oddRowBGC: 'rgba(103,97,41,0.7)',
        evenRowBGC: 'rgba(110,86,4,0.7)',
      },
      dataConfigB: {
        rowNum: 7,
        data: [
          {
            name: '阅海万家',
            value: 550
          },
          {
            name: '幸福里',
            value: 480
          },
          {
            name: '安康区',
            value: 477
          },
          {
            name: '跑马地花园',
            value: 460
          },
          {
            name: '鑫海家园',
            value: 440
          },
          {
            name: '浦新城',
            value: 436
          },
          {
            name: '乐昌新区',
            value: 360
          }
        ]
      },
      personData: [
        {agencyName: '重点人员',personNum: 443},
        {agencyName: '流动人员',personNum: 563},
        {agencyName: '高龄人员',personNum: 356},
        {agencyName: '吸毒人员',personNum: 443},
        {agencyName: '前科人员',personNum: 563},
        // {agencyName: '留守人员',personNum: 356},
      ],
      trafic: {
        rowNum: 6,
        unit: '万人',
        data: [
          {
            name: '便民设施',
            value: 50.6
          },
          {
            name: '医疗基础设施',
            value: 49.6
          },
          {
            name: '安全消防设施',
            value: 49.6
          },
          {
            name: '道路交通设施',
            value: 41.2
          },
          {
            name: '生活能源设施',
            value: 34.7
          },
          {
            name: '体育设施',
            value: 26.8
          }
        ]
      },
      round1: {},
      round2: {},
      ziyuan: {},
    }
  },
  methods: {
    initCharts(){
      this.newCharts("community-tendency","communityTendency");
      this.newCharts("accident","accident");
      this.newCharts("round1","round1");
      this.newCharts("round2","round2");
      this.newCharts("ziyuan","ziyuan");
    },
    newCharts(id,propertyName){
      const container = document.getElementById(id)
      let myChart = new Charts(container);
      this[propertyName] = myChart;
    },
    setPersonOption(list){
      const _this =this;
      let nameList = [];
      let valueList = [];
      list.forEach(item => {
        nameList.push(item.agencyName);
        valueList.push(item.personNum);
      })
      this.communityTendency.setOption({
        title: {
          text: '人口分布',
          style: {
            fill: '#dddddd',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        xAxis: {
          name: '分类',
          data: nameList ,
          nameTextStyle: {
            fill: '#dddddd',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#4be0e0',
              fontSize: 15
            }
          }
        },
        yAxis: {
          name: '人口数',
          data: 'value',
          nameTextStyle: {
            fill: '#dddddd',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#dddddd',
              fontSize: 12
            }}
        },
        legend: {
          show:true
        },
        series: [
          {
            data: valueList,
            type: 'bar'
          }
        ]
      });
    },
    setAccidentOption(list){
      this.accident.setOption({
        title: {
          text: '社会安全事件趋势图',
          style: {
            fill: '#5fe9c8',
            fontSize: 17,
            fontWeight: 'bold',
            textAlign: 'center',
            textBaseline: 'bottom'
          }
        },
        xAxis: {
          name: '第二周',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          nameTextStyle: {
            fill: '#5fe9c8',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#5fe9c8',
              fontSize: 12
            }}
        },
        yAxis: {
          name: '数量',
          data: 'value',
          nameTextStyle: {
            fill: '#5fe9c8',
            fontSize: 10
          },
          axisLabel:{
            style:  {
              fill: '#5fe9c8',
              fontSize: 12
            }}
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'line',
            lineArea: {
              show: true,
              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            }
          }
        ]
      });
    },
    setRound(){
      this.round1.setOption(
        {
          title: {
            text: '自然灾害安全指数',
            style: {
              fill: '#cbb477',
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          series: [
            {
              type: 'gauge',
              data: [ { name: 'itemA', value: 5.4 } ],
              axisLabel: {
                formatter: '{value}',
                style: {
                  fill: '#dddddd'
                }
              },
              animationCurve: 'easeInOutBack'
            }
          ]
        }
      )
      this.round2.setOption(
        {
          title: {
            text: '公共卫生事件安全指数',
            style: {
              fill: '#cbb477',
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          series: [
            {
              type: 'gauge',
              data: [ { name: 'itemA', value: 70 } ],
              axisLabel: {
                formatter: '{value}',
                style: {
                  fill: '#dddddd'
                }
              },
              animationCurve: 'easeInOutBack'
            }
          ]
        }
      )
    },
    setZiyuanOption(){
      this.ziyuan.setOption({
        legend: {
          data: ['同比', '环比'],
          textStyle: {
            fontFamily: 'Arial',
            fontSize: 13,
            fill: '#60a08c'
          }
        },
        title: {
          text: '每万人医疗资源',
          offset :[0, -55],
          style: {
            fill: '#5fe9c8',
            fontSize: 14,
            textAlign: 'center',
            textBaseline: 'top'
          }
        },
        radar: {
          polygon: true,
          axisLabel: {
            style: {
              fill: "#1d817e"
            }
          },
          indicator: [
            { name: '医生人数', max: 300 },
            { name: '病床位', max: 300 },
            { name: '医院，卫生院', max: 300 },
          ]
        },
        series: [
          {
            name: '同比',
            type: 'radar',
            data: [111, 256, 178],
            label: {
              show: true,
              style: {
                fill: '#dddddd'
              }
            },
            animationCurve: 'easeOutBounce'
          },
          {
            name: '环比',
            type: 'radar',
            data: [222, 245, 220],
            label: {
              show: true
            },
            animationCurve: 'easeOutBounce'
          }
        ]
      })
    },
    onload(){
      changeDefaultConfig('color',['rgb(208,200,21)','#348d07','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
      this.setPersonOption(this.personData);
      this.setAccidentOption(this.personData);
      this.setRound();
      this.setZiyuanOption()
    },
  }
}
</script>

<style scoped>
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .closeButton{
    background:rgba(84,36,17,0.5) ;
  }
  .closeButton:hover{
    background:rgba(84,36,17,0.8) ;
  }
  .click{
    cursor: pointer;
  }
  .click:hover{
    transform: translate(2px,2px);
  }
</style>
