FE-V2-PC/src/views/gasManage3_0/manage/infoStatistics/infoStatistics.vue

<!--信息统计-->
<template>
  <div class="app-container approval_handle">
      <div class="approval_handle-page" v-if="pageType==1">
          <div class="info">
            <div class="info_t">
              <div class="info_t_l" >
                <div id="info_t_l"></div>
                <div class="select_border">
                  <el-form :model="queryParams2" ref="queryForm" :inline="true">
                    <el-form-item label="" prop="zgType" label-width="80px">
                      <el-select v-model="queryParams2.category" placeholder="请选择">
                        <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <div class="info_t_c">
                <div id="info_t_c"></div>
                <div class="select_border">
                  <el-form :model="queryParams3" ref="queryForm" :inline="true">
                    <el-select v-model="queryParams3.category" placeholder="请选择">
                      <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
                    </el-select>
                  </el-form>
                </div>
              </div>
              <div class="info_t_r">
                  <div class="info_t_r_title">实验室库存排名</div>
                  <div class="info_t_r_b">
                    <li>
                      <i>排名</i>
                      <i>门牌号</i>
                      <i>库存</i>
                    </li>
                    <li class="info_t_r_b_h" v-for="(item,index) in labStorageList">
                      <i><b>{{index+1}}</b></i>
                      <i>{{item.name}}</i>
                      <i>{{item.inNum}}</i>
                    </li>
                  </div>
                  <div class="select_border">
                    <el-form :model="queryParams4" ref="queryForm" :inline="true">
                      <el-select v-model="queryParams4.category" placeholder="请选择">
                        <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
                      </el-select>
                    </el-form>
                  </div>
              </div>
            </div>
            <div class="info_b">
              <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true">
                <el-form-item label="关键字" prop="name">
                  <el-input
                    v-model="queryParams.searchValue"
                    placeholder="气瓶编号/气瓶厂家/实验地点"
                    clearable
                    maxLength="30"
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item label="最后使用时间" prop="dateRange">
                  <el-date-picker
                    :clearable="false"
                    v-model="dateRange"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="状态" prop="zgType" label-width="80px">
                  <el-select v-model="queryParams.storageStatus"  clearable size="small">
                    <el-option label="空闲" value="1" />
                    <el-option label="使用中" value="2" />
                    <el-option label="已出库" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <p class="inquire-button-one" @click="handleQuery">查询</p>
                  <p class="reset-button-one" @click="resetQuery">重置</p>
                </el-form-item>
              </el-form>
              <el-table border v-loading="loading" :data="tableData">
                <el-table-column label="气瓶编号" align="left" prop="airNumber"/>
                <el-table-column label="气体名称" align="left" prop="airName"></el-table-column>
                <el-table-column label="气体级别/规格" align="left" prop="configName"></el-table-column>
                <el-table-column label="气瓶厂家" align="left" prop="companyName"></el-table-column>
                <el-table-column label="实验地点" align="left" prop="location"></el-table-column>
                <el-table-column label="使用人数" align="left" prop="numberPersons"></el-table-column>
                <el-table-column label="当前气压" align="left" prop="currentPressure">
                  <template slot-scope="scope">
                    <span>{{scope.row.currentPressure}}Mpa</span>
                  </template>
                </el-table-column>
                <el-table-column label="最后使用时间" align="left" prop="lastTime"></el-table-column>
                <el-table-column label="状态" align="left" prop="storageStatus">
                  <template slot-scope="scope">
                    <p :class="scope.row.storageStatus == 1?'color_warn':(scope.row.storageStatus == 2?'color_FF4E00':(scope.row.storageStatus == 3?'color_14AE10':''))">{{scope.row.storageStatus == 1?'空闲':(scope.row.storageStatus == 2?'使用中':(scope.row.storageStatus == 3?'已出库':''))}}</p>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
                  <template slot-scope="scope">
                    <div class="button-box">
                      <p class="table-min-button"
                         @click="handleClick('',scope.row,'detail')"
                      >查看</p>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="total"
                layout="total, prev, pager, next, sizes, jumper"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </div>
      </div>
      <!--查看 -->
      <detail-page v-if="pageType==2" :pageData2="pageData2"></detail-page>

  </div>
</template>

<script>

import {
  buildingStorageStatistics, gasCategoryList,
  gasStorageStatistics,
  labStorageStatistics,
  outStatistics, storageInfoList
} from '@/api/gasManage3_0/gasManage'
import { getToken } from "@/utils/auth";
import echarts from 'echarts'
import detailPage from "./infoStatisticsDetail.vue"
export default {
  name: "info",
  components: {
    detailPage
  },
  data() {
    return {
      pageType:1,
      loading:false,
      dateRange:[],
      total:0,
      tableData:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        searchValue: '',
        storageStatus: '',
      },
      queryParams2: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      queryParams3: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      queryParams4: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      labStorageList:[],
      pageData2:{},
      materialTypeList:[],
    };
  },
  created() {

  },

  methods: {
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='apply'){//申请
      }else if(doType=='detail'){//查看
        _this.pageData2.item=row;
        _this.pageType=2;
      }else if(doType=='back'){
        _this.pageType=1;
      }
    },
    //气瓶类目
    gasCategoryList(){
      let _this=this;
      gasCategoryList().then( response => {
        let res=response.rows;
        _this.materialTypeList=res;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.searchValue = "";
      this.queryParams.storageStatus = "";
      this.dateRange=[];
      this.queryParams.startTime=null;
      this.queryParams.endTime=null
      this.handleQuery();
    },

    //气瓶库存统计
    gasFun:function(dataX,dataY){
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          left:'2%',
          top:12,
          text: '气瓶库存统计',
          textStyle: {
            color: "#333333",
            fontSize:16,
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '14%',
          top:'24%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataX,
          axisLine: {
            lineStyle: {
              color: '#ccc'

            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        yAxis: {
          nameTextStyle:{
            color:'#ccc',
            align:'center',

            fontSize:18,
          },
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        series: [{
          name: '入库',
          type: 'bar',
          barWidth: '14',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88C8FF'
              }, {
                offset: 1,
                color: '#0183FA'
              }]),
              barBorderRadius:[12,12,0,0],
            },
          },
          showBackground:true,
          data: dataY
        }]
      };
      var info_t_l = echarts.init(document.getElementById('info_t_l'));
      info_t_l.setOption(option);
    },
    //楼栋库存占比
    buildingFun:function(dataX,dataY) {
      var option = {
        color: ['#6DC9CA', '#F4AF43', '#33C174','#5742BF','#0068B7'],//颜色
        title: {
          left:'2%',
          top:12,
          text: '楼栋库存占比',
          textStyle: {
            color: "#333333",
            fontSize:16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: '4%',
          top: '20%',
          data:dataY,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,

          textStyle: {
            color: '#333333'
          }
        },

        series: [
          {
            name:'楼栋库存占比',
            type:'pie',
            center : ['65%', '55%'],
            radius: ['25%', '55%'],
            avoidLabelOverlap: false,
            roseType: 'area',
            label: {
              normal: {
                show: false,
              },

            },

            data:dataX
          }
        ]
      };
      var info_t_c = echarts.init(document.getElementById('info_t_c'));
      info_t_c.setOption(option);
    },
    //气瓶库存统计
    gasStorageStatistics(){
      let _this=this;
      gasStorageStatistics().then( response => {
        let res=response.data;
        let dataX=[];
        let dataY=[];
        if(response.code==200){
          res.forEach(function(item){
            dataX.push(item.date)
            dataY.push(item.inNum)
          })
          this.gasFun(dataX,dataY);
        }
      });
    },
    //气瓶库存统计
    buildingStorageStatistics(){
      let _this=this;
      buildingStorageStatistics().then( response => {
        let res=response.data;
        let dataX=[];
        let dataY=[];
        if(response.code==200){
          res.forEach(function(item){
            dataX.push({value:item.inNum, name:item.name},)
            dataY.push(item.name)
          })
          this.buildingFun(dataX,dataY);
        }
      });
    },

    ////实验室库存排名统计
    labStorageStatistics(){
      let _this=this;
      labStorageStatistics().then( response => {
        let res=response.data;
        if(response.code==200){
          _this.labStorageList=res
        }
      });
    },
    //信息统计查询气瓶入库列表
    getList(){
      let _this=this;
      if(this.dateRange&&this.dateRange.length>0) {
        this.queryParams.startTime=this.dateRange[0]
        this.queryParams.endTime=this.dateRange[1]
      } else {
        this.queryParams.startTime=null;
        this.queryParams.endTime=null
      }
      storageInfoList(_this.queryParams).then( response => {
        let res=response.rows;
        if(response.code==200){
          _this.tableData=res
          _this.total=response.total
        }
      });
    },

  },

  mounted(){
    this.gasCategoryList();
    this.getList();
    this.gasStorageStatistics();
    this.buildingStorageStatistics();
    this.labStorageStatistics();
  },
};
</script>

<style lang="scss" scoped>
.approval_handle {
  display: flex!important;
  flex-direction: column;
  .approval_handle-page{
    flex:1;
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px 20px 20px!important;
    border-radius:10px;
    .info{
      flex:1;
      display: flex!important;
      flex-direction: column;
      .info_t{
        display: flex;
        justify-content: flex-start;
        .info_t_l{
          width: 38%;
          height: 340px;
          margin-right: 7.4%;
          position: relative;
          #info_t_l{
            width: 100%;
            height: 340px;
          }
          .select_border{
            position: absolute;
            top: 12px;
            right: 20px;
          }
        }
        .info_t_c{
          width: 26%;
          height: 340px;
          margin-right: 8.2%;
          position: relative;
          #info_t_c{
            width: 100%;
            height: 340px;
          }
          .select_border{
            position: absolute;
            top: 12px;
            right: 20px;
          }
        }
        .info_t_r{
          width: 16.6%;
          height: 340px;
          position: relative;
          .info_t_r_title{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            line-height: 16px;
            margin-top: 16px;
            margin-bottom: 16px;
          }
          .info_t_r_b{
            height: 260px;
            overflow-y: auto;
            >li{
              list-style-type: none;
              height: 40px;
              border-bottom: 1px solid #E0E0E0;
              display: flex;
              justify-content: flex-start;
              padding-left: 10px;
              >i{
                font-style: normal;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                line-height: 40px;
                display: inline-block;
              }
              >i:nth-of-type(1){
                width: 84px;
                >b{
                  color: #0183FA;
                  padding: 4px 10px;
                  box-sizing: border-box;
                  background: #CCE6FE;
                  border-radius: 50%;
                  font-weight:500;
                }
              }
              >i:nth-of-type(2){
                width: 118px;
              }
              >i:nth-of-type(3){
                width: 52px;
              }
            }
          }
          .select_border{
            position: absolute;
            width: 120px;
            top: 12px;
            right: 0px;
          }
        }
      }
      .info_b{
        flex: 1;
        display: flex!important;
        flex-direction: column;
      }
    }
    .button-box{
      width:200px;
      display: flex;
    }
  }

}
</style>