zhbsq-vue-web/src/views/DFZL/index.vue

<template>
  <div class="app-container">
    
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      
      <el-form-item label="保税区">
        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
          <el-option
            v-for="item in regionList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指标名称">
        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
          <el-option
            v-for="item in normFeelistAll"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       </el-select>
      </el-form-item>

      <el-form-item label="时间类型">

        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se" @change="selectChange">
          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
        </el-select>

        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
        </el-select>

        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
        </el-select>

        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>

      <!-- <el-form-item label="图形类型">
        <el-select v-model="contentType" placeholder="请选择图形类型">
          <el-option
            v-for="item in contentTypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
       </el-select>
      </el-form-item> -->
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="dataList" height="500px">
      <el-table-column label="保税区" align="center" prop="cbName">
        <template slot-scope="scope">
          {{ scope.row.cbName }}
        </template> 
      </el-table-column>
      <el-table-column label="指标名称" align="center" prop="colName">
        <template slot-scope="scope">
          {{ scope.row.colName }}
        </template>
      </el-table-column>

      <!-- <el-table-column  v-for="item in datails" :key="Math.random()"  :label="item[0].timeValue" align="center" prop="colName">
        <template slot="header" slot-scope="scope">
          {{ scope.row.$index }}
        </template>
          <el-table-column label="对比值" align="center" prop="colName">
            <template slot-scope="scope">
              1
            </template>
          </el-table-column>
          <el-table-column label="当前" align="center" prop="colName">
            <template slot-scope="scope">
              2
            </template>
          </el-table-column>
          <el-table-column label="浮动" align="center" prop="colName">
            <template slot-scope="scope">
             3
            </template>
          </el-table-column>
      </el-table-column> -->
          

     <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '1' || queryParams.dateType == ''">
        <template slot="header" slot-scope="scope">
          {{ timeValue[0]?timeValue[0]:'月份' }}
        </template>
          <el-table-column label="对比值" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[0].oldValue }}
          </template>
        </el-table-column>
        <el-table-column label="当前" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[0].nowValue }}
          </template>
        </el-table-column>
        <el-table-column label="浮动" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[0].redio }}
          </template>
        </el-table-column>
      </el-table-column> 

       <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '2' || queryParams.dateType == ''">
        <template slot="header" slot-scope="scope">
          {{ timeValue[1]?timeValue[1] + '季度':'季度' }}
        </template>
        <el-table-column label="对比值" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[1].oldValue }}
          </template>
        </el-table-column>
        <el-table-column label="当前" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[1].nowValue }}
          </template>
        </el-table-column>
        <el-table-column label="浮动" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[1].redio }}
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '3' || queryParams.dateType == ''">
        <template slot="header" slot-scope="scope">
          {{ timeValue[2]?timeValue[2] + '年度':'年度' }}
        </template>
        <el-table-column label="对比值" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[2].oldValue }}
          </template>
        </el-table-column>
        <el-table-column label="当前" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[2].nowValue }}
          </template>
        </el-table-column>
        <el-table-column label="浮动" align="center" prop="colName">
          <template slot-scope="scope">
            {{ scope.row.datails[2].redio }}
          </template>
        </el-table-column>
      </el-table-column> 

    </el-table>

  </div>
</template>

<script>
import { getDFZL,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
export default {
  name: 'DFZL',
  data() {
    return {
      categoryChartData: {},
      contentType:'1',
      contentTypelist:[
        { label: '列表', value: '1' },
        { label: '柱状图', value: '2' },
        { label: '雷达图', value: '3' },
      ],
      datelist:[
        { label: '月', value: '1' },
        { label: '季度', value: '2' },
        { label: '年', value: '3' },
      ],
      jdlist:[
        { label: '第一季度', value: '1' },
        { label: '第二季度', value: '2' },
        { label: '第三季度', value: '3' },
        { label: '第四季度', value: '4' },
      ],
      dialogVisible: false,
      fileList: [],
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 系统管理表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        cbIdArr:[],  //保税区id集合
        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
        dateValue:'', //查询时间值
        normFeeId:'',  //指标明细id
      },
      normFeelistAll:[],  //指标列表
      regionList:[],  //保税区列表
      timeValue:[],
    };
  },
  created() {
    this.bondedList()
    this.getNormFeelistAll()
  },
  methods: {
    selectChange(val){
      this.queryParams.dateValue = ''
    },
    getList() {
      this.timeValue = []
      this.loading = true;
      getDFZL(this.queryParams).then(response => {
        this.dataList = []
        this.dataList = response.data;
        for (const i in this.dataList[0].datails) {
          this.timeValue.push(this.dataList[0].datails[i].timeValue)
        }
        this.loading = false;
      });
    },
    bondedList(){
      this.regionList = []
      bondedList().then(res=>{
        for (const i in res.data) {
          this.regionList.push({ 
            label:res.data[i].deptName,
            value:res.data[i].deptId,
           })
        }
      })
    },
    getNormFeelistAll(){
      this.normFeelistAll = []
      normFeelistAll().then(res=>{
        for (const i in res.data) {
          this.normFeelistAll.push({ 
            label:res.data[i].fname,
            value:res.data[i].id,
           })
        }
        this.getList();
      })
    },
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.cbIdArr = [];
      this.queryParams.dateType = '';
      this.queryParams.dateValue = '';
      this.queryParams.normFeeId = '';
      this.resetForm('queryForm');
    },
  }
};
</script>