<template>
  <div class="app-container">
    <div class="tabs boxShadow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备类型" name="sblx">
          <div class="tab-content">
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">设备总数(个)</span>
                <span class="text-number">124,345</span>
                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
              </div>
            </div>
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/设备种类.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">设备种类(种)</span>
                <span class="text-number">60</span>
                <span class="textCompare">同比上周 <i class="triangle-up"></i><strong>10%</strong></span>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="设备状态" name="sbzt">
          <div class="tab-content">
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/故障数量.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">故障数量(个)</span>
                <span class="text-number">124,345</span>
                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
              </div>
            </div>
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/离线数量.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">离线数量(个)</span>
                <span class="text-number">16,324</span>
                <span class="textCompare">同比上周 <i class="triangle-up"></i><strong>10%</strong></span>
              </div>
            </div>
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/禁用数量.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">禁用数量(个)</span>
                <span class="text-number">1260</span>
                <span class="textCompare">同比上周 <i class="triangle-up"></i><strong>10%</strong></span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="报警统计" name="bjtj">
          <div class="tab-content">
            <div class="tab-content_item">
              <div class="imgdiv">
                <img src="~@/assets/statisticAnalysis/历史报警.png" alt="">
              </div>
              <div class="textdiv">
                <span class="text-total">历史报警(次)</span>
                <span class="text-number">{{(124345).toLocaleString()}}</span>
                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tab-main" v-if="activeName == 'sblx'">
      <div class="typeStatistics boxShadow">
        <div class="itemHeader"><span>设备类型统计</span></div>
        <div class="type-main">
          <div class="type-item tf">
            <div class="type-text">
              <span class="type-title">通风设备(个)</span>
              <span><strong>54,332</strong></span>
            </div>
          </div>
          <div class="type-item zm">
            <div class="type-text">
              <span class="type-title">照明设备(个)</span>
              <span><strong>68,123</strong></span>
            </div>
          </div>
          <div class="type-item kw">
            <div class="type-text">
              <span class="type-title">控温设备(个)</span>
              <span><strong>67,985</strong></span>
            </div>
          </div>
          <div class="type-item qt">
            <div class="type-text">
              <span class="type-title">其他设备(个)</span>
              <span><strong>54,332</strong></span>
            </div>
          </div>
        </div>
      </div>
      <div class="type-charts">
        <div class="charts-item boxShadow">
          <div class="itemHeader"><span>各类型设备数量占比</span></div>
          <div class="kindsChart">
            <div id="equipNums" style="width:485px;height:300px"></div>
          </div>
        </div>
        <div class="charts-item boxShadow">
          <div class="itemHeader"><span>各类型设备报警占比统计</span></div>
          <div class="kindsChart">
            <div class="table-box">
              <!-- <van-row class="th-row">
                <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
                  {{warn}}
                </van-col>
              </van-row> -->
              <!--  <van-row class="tb-row" v-for="(wb,index) of dataList.tbData" :key="index" :style="{background:index % 2 === 0 ?'#fff':'#F4F9FE'}">
                <van-col :span="6" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}}</van-col>
                <van-col :span="12" class="progress">
                  <van-progress :percentage="wb.num" stroke-width="18" color="linear-gradient(to right, #2d98ff,#8a2ff4, #e3127e)" />
                </van-col>
              </van-row> -->
              <el-row class="th-row">
                <!-- <el-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
                  {{warn}}
                </el-col> -->
                <el-col :span='6'>{{dataList.title[0]}}</el-col>
                <el-col :span='6'>{{dataList.title[1]}}</el-col>
                <el-col :span='12'>{{dataList.title[2]}}</el-col>
              </el-row>
              <el-row class="tb-row" v-for="(wb,index) of dataList.tbData" :key="index" :style="{background:index % 2 === 0 ?'#fff':'#F4F9FE'}" type="flex" justify="center" align="middle">
                <el-col :span="6" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}}</el-col>
                <el-col :span="12" class="progress">
                  <el-progress :percentage="wb.num" :stroke-width='18' stroke-linecap="square" :color="customColors"></el-progress>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="tab-main" v-if="activeName == 'sbzt'">
      <div class="equipStatus boxShadow">
        <div class="itemHeader1">
          <div class="headerTitle">设备正常率分析</div>
          <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="status-main">
          <el-col :span="4">
            <div class="info">
              <div class="infoItem">
                <span>设备总量(个)</span>
                <strong>42,345,000</strong>
              </div>
              <div class="infoItem">
                <span>正常设备(个)</span>
                <strong>381,000</strong>
              </div>
              <div class="infoItem">
                <span>故障设备(个)</span>
                <strong>136,000</strong>
              </div>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="chart" id="statusChart"></div>
          </el-col>

        </div>
      </div>
      <div class="statusStatistics boxShadow">
        <div class="itemHeader"><span>设备状态统计</span></div>
        <div class="progress-main">
          <div class="progressItem">
            <el-progress type="circle" :percentage="85" stroke-width="20" width="180"></el-progress>
            <!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色)  -->
            <svg width="0%" height="0%">
              <!-- 渐变颜色一 通过id获取  -->
              <defs>
                <linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color:#4266fe; stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#4266fe;stop-opacity:1" />
                </linearGradient>
              </defs>
              <!--  渐变颜色二 通过id获取 -->
              <defs>
                <linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" style="stop-color: #ef07f7; stop-opacity:1" />
                  <stop offset="100%" style="stop-color: #4266fe;stop-opacity:1" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="progressInfo">
            <div class="infoItem">
              <span>设备总数(个)</span>
              <strong>42,345,000</strong>
            </div>
            <div class="infoItem">
              <span>正常数量(个)</span>
              <strong>42,345,000</strong>
            </div>
            <div class="infoItem">
              <span>故障数量(个)</span>
              <strong>42,345,000</strong>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-main" v-if="activeName == 'bjtj'">
      <div class="warnningStatistics boxShadow">
        <div class="itemHeader"><span>各时段报警统计</span></div>
        <div id="warnningCharts"></div>
      </div>
    </div>
    <!-- <div></div> -->
  </div>
</template>

<script>
import { getList } from '@/api/table'
import * as echarts from 'echarts'
export default {
  filters: {

  },
  data () {
    return {
      activeName: 'sblx',
      // equipNums:'equipNums'+Date.now()+Math.random(),
      tabsList: ["设备类型", "设备状态", "报警统计", "设备类型", "设备状态", "报警统计"],
      dataList: {
        title: ['设备类型', '报警数量', '占比'],
        tbData: [
          { typeName: '通风设备', num: 88, },
          { typeName: '照明设备', num: 25, },
          { typeName: '控温设备', num: 20, },
          { typeName: '监控设备', num: 15, },
          { typeName: '其他', num: 10, }
        ]
      },
      gradientColor: {
        '0%': '#2d98ff',
        '100%': '#6149f6',
      },
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      value1: ''
    }
  },
  created () {

  },
  mounted () {
    this.chartsA()
  },
  methods: {
    eArabic (x) {
      return x.toLocaleString()
    },
    handleClick (tab, event) {
      // console.log(tab.$options.propsData.name, event);
      if (tab.$options.propsData.name == 'sblx') {
        this.$nextTick(() => {
          this.chartsA()
        })
      } else if (tab.$options.propsData.name == 'sbzt') {
        this.$nextTick(() => {
          this.chartsB()
        })
      } else if (tab.$options.propsData.name == 'bjtj') {
        this.$nextTick(() => {
          this.chartsC()
        })
      }

    },
    chartsA () {
      let chartDom = document.getElementById('equipNums');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          // left: 'center',
          x: 'center',
          textStyle: {
            fontSize: 12
          },
          itemWidth: 15,
          data: ["通风设备", "照明设备", "控温设备", "监控设备", "其他"]
        },
        // grid: {
        //   // top: "10%",
        //   bottom: '25%'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '70%'],
            // avoidLabelOverlap: true,
            /* label: {
              show: false,
              position: 'center'
            }, */
            bottom: '10%',
            label: {
              show: true,
              formatter: function (arg) {
                // return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
                return arg.percent + '%'
              }
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '通风设备' },
              { value: 735, name: '照明设备' },
              { value: 580, name: '控温设备' },
              { value: 484, name: '监控设备' },
              { value: 300, name: '其他' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    chartsB () {
      var chartDom = document.getElementById('statusChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          bottom: '10%',

        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              // color: "rgba(196, 54, 54, 1)",
              type: "dotted"
            }
          }
        },
        tooltip: {
          show: true,    // 是否显示提示框组件
          trigger: 'axis',    // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
          axisPointer: {
            type: 'line',    // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            snap: false,    // 坐标轴指示器是否自动吸附到点上。默认自动判断。
            label: {
              margin: 10,    // label 距离轴的距离
              color: '#FFF',     // 文字的颜色
              fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
              fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              fontSize: '20',    // 文字字体大小
              lineHeight: '50',    // 行高 
              // padding =[5, 7, 5, 7],    // 内边距，单位px 
              // backgroundColor = 'auto',    // 文本标签的背景颜色
            }
          },
          // showContent: true,     // 是否显示提示框浮层，默认显示
          // alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
          confine: true,    // 是否将 tooltip 框限制在图表的区域内
          textStyle: {
            // color: '#FFF',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '14',    // 文字字体大小
            lineHeight: '40',    // 行高 
          },
          // formatter: function (params) {
          //   // return '2022年数据' + '<br/>'
          //   //   + params[0].marker + params[0].seriesName + '：' + params[0].data + '<br>'
          //   return params[0].data 
          // }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: 'true',
            areaStyle: {
              opacity: 0.1,
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#e2e9fc' },
                    // { offset: 0.5, color: '#5283e7' },
                    { offset: 1, color: '#fff' }
                  ]
                )
              },
            },

          }
        ]
      };

      option && myChart.setOption(option);

    },
    chartsC () {
      let chartDom = document.getElementById('warnningCharts');
      // let chartDom = document.getElementsByClassName('warnningCharts');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // name: '进',
            type: 'line',
            // stack: '总量',
            data: [4, 3, 2, 3, 6, 3.5, 4, 5, 3, 4, 5, 3, 6],
            // symbol: "none", //去除小圆点
            smooth:true,
            itemStyle: {
              normal: {
                color: '#35BD39', //改变折线点的颜色
                lineStyle: {
                  color: '#35BD39', //改变折线颜色
                  // width: 4,//改变粗细  
                }
              }
            },
          },
          {
            // name: '出',
            type: 'line',
            // stack: '总量',
            data: [5, 5, 6, 4, 3, 5, 3, 4, 5, 6, 3, 4, 3],
            // symbol: "none", //去除小圆点
            smooth:true,
            itemStyle: {
              normal: {
                color: '#E16757', //改变折线点的颜色
                lineStyle: {
                  color: '#E16757', //改变折线颜色
                  // width: 4,//改变粗细  
                }
              }
            },
          },
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  // background-color: purple;
  .tabs {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 10px 20px;
    .el-tab-pane {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .tab-content {
      display: flex;
      justify-content: flex-start;
      .tab-content_item {
        // width: px;
        display: flex;
        justify-content: flex-start;
        .imgdiv {
          width: 66px;
          height: 66px;
          img {
            width: 66px;
            height: 66px;
          }
        }
        .textdiv {
          width: 105px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 5px 10px;
          font-size: 12px;
          .text-total {
            color: #aaa3a3;
          }
          .text-number {
            font-size: 20px;
            font-weight: 700;
          }
          .textCompare {
            display: flex;
            align-items: center;
            // justify-content: space-between;
          }
          .triangle-down {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 8px solid green;
            
          }
          .triangle-up {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 8px solid red;
          }
        }
      }
    }
  }
  .tab-main {
    width: 100%;
    height: calc(100vh - 246px);
    // background-color: red;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .itemHeader {
      border-left: 4px solid #5283e7;
      color: #000;
      font-size: 14px;
      font-weight: 800;
      padding: 1px 15px;
      margin-left: 10px;
      margin-top: 10px;
    }
    .itemFlex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .typeStatistics {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 15px;
      .type-main {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        .type-item {
          width: 220px;
          height: 180px;
          display: flex;
          align-items: center;
          .type-text {
            width: 130px;
            height: 60px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .type-title {
              font-size: 13px;
            }
            strong {
              font-size: 25px;
              font-weight: 700;
            }
          }
        }
      }
      .tf {
        background: url("~@/assets/statisticAnalysis/通风.png") no-repeat;
      }
      .zm {
        background: url("~@/assets/statisticAnalysis/照明.png") no-repeat;
      }
      .kw {
        background: url("~@/assets/statisticAnalysis/控温.png") no-repeat;
      }
      .qt {
        background: url("~@/assets/statisticAnalysis/其他.png") no-repeat;
      }
    }
    // 设备状态
    .equipStatus {
      background-color: #fff;
      border-radius: 10px;
      padding: 0 10px 10px 20px;
      .itemHeader1 {
        color: #000;
        font-size: 14px;
        font-weight: 800;
        // padding: 1px 15px;
        // margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .headerTitle {
          border-left: 4px solid #5283e7;
          padding: 3px 10px;
        }
      }
      .status-main {
        height: 250px;
        width: 100%;
        // background-color: red;
        padding-top: 10px;
        .el-col {
          height: 100%;
        }
        .info {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .infoItem {
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span {
              color: #a4a4a4;
              font-size: 14px;
            }
            strong {
              color: #4b7ee6;
              font-size: 25px;
            }
          }
        }
        #statusChart {
          width: 100%;
          height: 240px;
          // background-color: pink;
        }
      }
    }
    .statusStatistics {
      background: #fff;
      height: 250px;
      margin-bottom: 5px;
      border-radius: 10px;
      .progress-main {
        padding: 20px 30px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .progressItem {
          width: 30%;
        }
        .progressInfo {
          width: 60%;
          display: flex;
          // flex-direction: column;
          justify-content: space-between;
          .infoItem {
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span {
              color: #a4a4a4;
              font-size: 14px;
            }
            strong {
              color: #4b7ee6;
              // color: #ef07f7;
              // color: #945fff;
              font-size: 25px;
            }
          }
        }
      }
    }
    .warnningStatistics {
      background: #fff;
      height: 250px;
      margin-bottom: 5px;
      border-radius: 10px;
      .itemHeader {
        margin-bottom: 10px;
      }
      #warnningCharts {
        width: 100%;
        height: 210px;
      }
    }
    .type-charts {
      // background: purple;
      // overflow: auto;
      height: 330px;
      display: flex;
      justify-content: space-between;
      .charts-item {
        width: 485px;
        width: 49%;
        // height: 320px;
        background-color: #fff;
        border-radius: 15px;
        .kindsChart {
          // background: red;
          width: 100%;
          height: 300px;
        }
      }
    }
  }
  .boxShadow {
    box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
  }
  #equipNums {
    width: 485px;
    height: 300px;
  }
  .table-box {
    // margin: 12px 0px;
    padding: 10px 15px;
    .th-row {
      height: 45px;
      line-height: 45px;
      background: #e6efff;
      padding: 0px 12px;
      font-size: 14px;
      font-weight: 600;
    }
    .tb-row {
      height: 45px;
      line-height: 45px;
      padding: 0px 12px;
    }
  }
}
::v-deep .table-box .progress {
  .el-progress-bar__inner {
    border-radius: none;
    background-image: linear-gradient(to right, #2d98ff, #6149f6, #e3127e);
  }
}
.progressItem ::v-deep .el-progress-circle {
  // 进度条颜色
  svg > path:nth-child(2) {
    stroke: url(#dismantle); // 该url() 中填入的是, 对应组件中的 id 名
  }
}
</style>

