zhbsq-vue-web/src/views/ZBCS/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">
          <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" v-if="contentType == '1'">
      <el-table-column label="保税区" align="center" prop="colName">
        <template slot-scope="scope">
          {{ scope.row.colName }}
        </template>
      </el-table-column>
      <el-table-column label="绩效指标分值" align="center" prop="colValue">
        <template slot-scope="scope">
          {{ scope.row.colValue }}
        </template>
      </el-table-column>
    </el-table>

    <category-chart v-if="contentType == '2'" itemName="绩效指标分值"  :chartData="ChartData" style="width: 100%"></category-chart>
    <radar-char v-if="contentType == '3'"  :chartData="ChartData" style="width: 100%"></radar-char>
  </div>
</template>

<script>
import { getZBCS,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
import CategoryChart from '../dashboard/categoryChart.vue';
import radarChar from '../dashboard/radarChar.vue';
export default {
  name: 'ZBCS',  //指标参数排行数据
  components:{
    CategoryChart,
    radarChar
  },
  data() {
    return {
      ChartData: [],
      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:[],  //保税区列表
    };
  },
  created() {
    this.getNormFeelistAll()
    this.bondedList()
  },
  methods: {
    
    getList() {
      this.dataList = []
      this.ChartData =[]
      getZBCS(this.queryParams).then(response => {
        this.dataList = response.data;
        for (const i in response.data) {
          this.ChartData.push({ 
            name: response.data[i].colName,
            value: response.data[i].colValue,
           })
        }
       
        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 = []
      this.loading = true;
      normFeelistAll().then(res=>{
        this.loading = true;
        for (const i in res.data) {
          this.normFeelistAll.push({ 
            label:res.data[i].fname,
            value:res.data[i].id,
           })
        }
        this.loading = false;
        this.getList();
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.cbIdArr = [];
      this.queryParams.dateType = '';
      this.queryParams.dateValue = '';
      this.queryParams.normFeeId = '';
      this.resetForm('queryForm');
    },
  }
};
</script>