qdtlui/src/views/qdtl/statics/index.vue

<template>
  <div class="app-container">
          <div style="display: inline-flex;padding-left:1.7rem">
                <div :class='currentindex==1?"selectClass":"unSelect"' style="width: 6.3rem;height: 3.2rem;" @click="getDate(1)">
                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">本月</div>
                </div>

                <div :class='currentindex==2?"selectClass":"unSelect"'  style="width: 6.3rem;height: 3.2rem;margin-left:2rem"  @click="getDate(2)">
                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">今天</div>
                </div>

                <div :class='currentindex==3?"selectClass":"unSelect"' style="width: 8.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(3)">
                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近7天</div>
                </div>

                <div :class='currentindex==4?"selectClass":"unSelect"' style="width: 9.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(4)">
                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近30天</div>
                </div>

                <div :class='currentindex==5?"selectClass":"unSelect"' style="width: 8.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(5)">
                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近1年</div>
                </div>

                 <div style="margin-left:5rem">
                 <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="6.8rem">
                        <el-form-item label="选择区域" prop="deviceCode">
                              <el-select v-model="queryParams.deviceType" placeholder="请选择区域" clearable size="small" style="width:16rem">
                                        <el-option
                                          key="0"
                                          label="全部"
                                          value="0"
                                        />
                                        <el-option
                                          v-for="dict in dict.type.tl_xun_area"
                                          :key="dict.value"
                                          :label="dict.label"
                                          :value="dict.value"
                                        />
                                      </el-select>
                        </el-form-item>

                         <el-form-item label="时间" prop="deviceCode">
                                  <el-date-picker
                                        v-model="value1"
                                        type="daterange"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                      </el-date-picker>
                          </el-form-item>

                            <el-form-item>
                                <el-button style="border-radius: 0.6rem;" type="primary"  size="mini" @click="getMonthStatic">搜索</el-button>
                                <el-button style="background-color:#7B7B7B;border-radius: 0.6rem;color:white" size="mini" @click="resetQuery">重置</el-button>
                              </el-form-item>
                 </el-form>
                 </div>
              
          </div>

          <div style="display:inline-flex">
                  <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem">
                            <div style="font-size: 4rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;"> 
                                                  {{monthStatic.planXunLocationTotal}}
                                        </div>
                            
                            <div style="font-size: 1.8rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;
                                        margin-top:1rem"> 
                                                  本月计划巡更点总数
                                        </div>
                  </div>

                    <div style="width:28.8rem;height:13.3rem;background:rgba(35, 154, 255, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
                            <div style="font-size: 4rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #239AFF;"> 
                                                   {{monthStatic.actualXunTotal}}
                                        </div>
                            
                            <div style="font-size: 1.8rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #239AFF;
                                        margin-top:1rem"> 
                                                  本月已巡更点总数
                                        </div>
                  </div>

                    <div style="width:28.8rem;height:13.3rem;background:rgba(254, 213, 47, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
                            <div style="font-size: 4rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #FED52F;"> 
                                                   {{monthStatic.unXunTotal}}
                                        </div>
                            
                            <div style="font-size: 1.8rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #FED52F;
                                        margin-top:1rem"> 
                                                  本月漏巡更点总数
                                        </div>
                  </div>

                    <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
                            <div style="font-size: 4rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;"> 
                                                   {{monthStatic.weiXun}}
                                        </div>
                            
                            <div style="font-size: 1.8rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;
                                        margin-top:1rem"> 
                                                  本月未巡更点总数
                                        </div>
                  </div>

                    <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
                            <div style="font-size: 4rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;"> 
                                                   {{monthStatic.unPercent}}
                                        </div>
                            
                            <div style="font-size: 1.8rem;
                                        font-family: Microsoft YaHei;
                                        font-weight: bold;
                                        color: #23FFFC;
                                        margin-top:1rem"> 
                                                  本月漏巡率
                                        </div>
                  </div>
                      
          </div>

          <div class="divtitle" style="margin-top:2rem">
             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡更统计</div>
        </div>

        <div style="display:inline-flex;width:100%">
             <div style="width:15%;padding-left:2rem">
                  <div class='watchStaticContent'style="margin-top:1.5rem;display:inline-flex;">
                            <div><img src="@/assets/images/static/11.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
                            <div style="margin-top:1.2rem;margin-left:2rem">
                                  <div style="font-size: 2.1rem;
                                              font-family: SourceHanSansCN;
                                              font-weight: bold;
                                              color: #F0F6F5;"> {{monthStatic.unXunTotal}}</div>
                                  <div style="font-size: 1.4rem;
                                              font-family: Adobe Heiti Std;
                                              font-weight: normal;
                                              color: #B4C1BF;">漏巡</div>
                            </div>
                  </div>

                  <div class='watchStaticContent' style="margin-top:1.5rem;display:inline-flex;">
                        <div><img src="@/assets/images/static/22.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
                                <div style="margin-top:1.2rem;margin-left:2rem">
                                      <div style="font-size: 2.1rem;
                                                  font-family: SourceHanSansCN;
                                                  font-weight: bold;
                                                  color: #F0F6F5;"> {{monthStatic.actualXunTotal}}</div>
                                      <div style="font-size: 1.4rem;
                                                  font-family: Adobe Heiti Std;
                                                  font-weight: normal;
                                                  color: #B4C1BF;">已巡</div>
                                </div>
                  </div>

                  <div class='watchStaticContent'style="margin-top:1.5rem;display:inline-flex;">
                    <div><img src="@/assets/images/static/33.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
                            <div style="margin-top:1.2rem;margin-left:2rem">
                                  <div style="font-size: 2.1rem;
                                              font-family: SourceHanSansCN;
                                              font-weight: bold;
                                              color: #F0F6F5;"> {{monthStatic.planXunLocationTotal}}</div>
                                  <div style="font-size: 1.4rem;
                                              font-family: Adobe Heiti Std;
                                              font-weight: normal;
                                              color: #B4C1BF;">全部</div>
                            </div>
                  </div>
             </div>

              <div style="width:85%">
                       <div id='watchChart' style="width:130rem;height:28rem"></div>
             </div>
             
        </div>

         <div class="divtitle" style="margin-top:2rem">
             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡更列表</div>
        </div>

        <div style="margin-top:1rem">
                  <el-table  :data="monthStatic.xunList"  stripe
                                    class="my_table"
                                    :row-class-name="tableRowClassName"
                                    :max-height="tableHeight"
                                    :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                        <!-- <el-table-column type="selection" width="55" align="center" /> -->
                                    <el-table-column type="index" width="55" align="center" label='序号'/>
                                    <el-table-column label="统计日期" align="center" prop="staticDate" />
                                    <el-table-column label="巡更点数量" align="center" prop="xunTotal" />
                                    <el-table-column label="计划巡更点总数" align="center" prop="planLocationTotal" />
                                    <el-table-column label="实际巡更数" align="center" prop="actualXunTotal" />
                                    <el-table-column label="漏巡率" align="center" prop="unXunPercent" />
                                    <el-table-column label="漏巡数" align="center" prop="unXunTotal" />
                        </el-table>
        </div>

  </div>
</template>

<script>
import mapdiv from "@/components/map/index.vue"
import { getMonthStatic } from "@/api/qdtl/data";

export default {
  name: "Device",
  dicts: ['tl_xun_area'],
  data() {
    return {
      // 遮罩层
       currentindex:1,
       queryParams:{},
       value1:'',
       tableHeight:245,
       monthStatic:{},
       echartsData:{}
    };
  },
  created() {
      // this.getGdChart();
  },
   mounted() {
    this.getGdChart();
    this.getStatic();
  },
  components:{
      mapdiv
    },
  methods: {
       getStatic(){
            var date = new Date();
            var y = new Date().getFullYear(); //获取年份
            var m = new Date().getMonth() + 1; //获取月份
            var d = new Date(y, m, 0).getDate(); //获取当月最后一日
            m = m < 10 ? '0' + m : m; //月份补 0
            d = d < 10 ? '0' + d : d; //日数补 0
            // console.log(this.value1);
            this.queryParams.startDate = [y,m,'01'].join("-")
            this.queryParams.endDate = [y,m,d].join("-")
            getMonthStatic(this.queryParams).then(response =>{
                    console.log(response);
                    this.monthStatic = response.data;
                    this.getGdChart(response.data.xunList);
            })
      },
      getMonthStatic(){
            // console.log(this.value1);
            this.queryParams.startDate = this.value1[0]
            this.queryParams.endDate = this.value1[1]
            getMonthStatic(this.queryParams).then(response =>{
                    console.log(response);
                    this.getMonthStatic = response.data;
                    this.getGdChart(response.data.xunList);
            })
      },
     tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
        },  
     getDate(index){
         this.currentindex = index
     },
     handleQuery(){

     },
     resetQuery(){

     },
      getGdChart(data){
              var datesArry = [];
              var xunArry = [];
              var unXunArry = [];
              for(var index in data){
                    datesArry.push(data[index].staticDate);
                    xunArry.push(data[index].actualXunTotal);
                    unXunArry.push(data[index].unXunTotal);
              }
              console.log(xunArry);
               console.log(unXunArry);
              var myChart = this.$echarts.init(document.getElementById('watchChart'));
              var option = {
                            color: [
                              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#00E3C0'
                                                }, {
                                                        offset: 1,
                                                        color: '#0068DC'
                                                }]), 
                              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#0068DC'
                                                }, {
                                                        offset: 1,
                                                        color: '#00E3C0'
                                                }])
                              ],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow'
                                }
                            },
                            legend: {
                                   x:'right',
                                   textStyle:{
                                            fontSize: 12,//字体大小
                                            color: '"#fft'//字体颜色
                                    },
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01],
                                axisLabel: {
                                                        show: true,
                                                        textStyle: {
                                                        color: '#ACB6B9'   //这里用参数代替了
                                                   }
                                            },
                            },
                            xAxis: {
                                type: 'category',
                                data: datesArry,
                                axisLabel: {
                                                        show: true,
                                                         interval:0,
                                                         rotate:40,
                                                        textStyle: {
                                                        color: '#ACB6B9'   //这里用参数代替了
                                                   }
                                            },
                            },
                            series: [
                                {
                                name: '已巡',
                                type: 'bar',
                                data: xunArry,
                                barWidth:10
                                },
                                {
                                name: '漏巡',
                                type: 'bar',
                                data: unXunArry,
                                barWidth:10
                                }
                            ]
                            };
                myChart.setOption(option);
        },
  }
};
</script>

<style scoped>
 .divtitle{
          background: url("~@/assets/images/title2@2x.png") no-repeat;
          background-size: 100% 100%;
          width:100%;
          height:3.9rem;
          padding-top:0.8rem;
          padding-left:3rem;
          display: inline-flex
          /* float: left; */
       }

  .selectClass{
      background: #3DFFEA;
      border-radius: 0.6rem;
      color:#032738;
  }
  
  .unSelect{
      color:#C5D0D4;
  }

  /* .el-date-editor .el-range-separator{
     color: #C5D0D4
  } */

 .el-date-editor .el-range-separator{
        color:white
    }

  .watchStaticContent{
    width: 19rem;
    height: 7.8rem;
    background:rgba(0, 190, 117, 0.06)
  }

</style>