修改数据统计->同期对比数据

src/views/TQSJ/index.vue

@@ -1,202 +1,106 @@
 <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
-            @change="selectBsqHandle"
-            v-for="item in regionList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
+        <el-select v-model="queryParams.cbIdArr" multiple collapse-tags placeholder="请选择保税区">
+          <el-option @change="selectBsqHandle" 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-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-date-picker v-if="queryParams.dateType == 1" v-model="queryParams.yearVlue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
-
-        <el-select v-if="queryParams.dateType == 1" v-model="formatY" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+        <el-date-picker v-if="queryParams.dateType == 1" v-model="queryParams.yearVlue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px"></el-date-picker>
+        <el-select v-if="queryParams.dateType == 1" v-model="formatY" 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 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-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" :span-method="objectSpanMethod" >
+    <el-table :data="dataList" :span-method="objectSpanMethod">
       <el-table-column label="保税区名称" align="center" prop="cbName" width="150px">
-        <template slot-scope="scope">
-          {{ scope.row.cbName }}
-        </template>
+        <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 }}（{{scope.row.unit}}）
-        </template>
+        <template slot-scope="scope">{{ scope.row.feeName }}（{{ scope.row.funit }}）</template>
       </el-table-column>
-
-      <!-- <el-table-column  v-for="item in datails" :key="Math.random()"  :label="item[0].timeValue" align="center" prop="colName">
+      <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '1' || queryParams.dateType == ''">
         <template slot="header" slot-scope="scope">
-          {{ scope.row.$index }}
+          {{ timeValue[0] ? timeValue[0] : '月份' }}
         </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]:'月份').replace('-', '年') }}
-        </template>
-          <el-table-column label="对比值(去年)" align="center" prop="colName" width="120px">
-          <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 }}
+            {{ scope.row.collValue }}
           </template>
         </el-table-column>
         <el-table-column label="同比%" align="center" prop="colName">
           <template slot-scope="scope">
-            <!-- {{ scope.row.datails[0].redio==0?'持平':scope.row.datails[0].redio+'%'}} -->
-            <el-tag v-if="scope.row.datails[0].redio==0">持平</el-tag>
-            <el-tag type="success" v-else-if="scope.row.datails[0].redio >0">{{scope.row.datails[0].redio+'%'}}</el-tag>
-            <el-tag type="danger" v-else-if="scope.row.datails[0].redio <0">{{scope.row.datails[0].redio+'%'}}</el-tag>
+            <el-tag v-if="scope.row.tbValue == 0">持平</el-tag>
+            <el-tag type="success" v-else-if="scope.row.tbValue > 0">{{ scope.row.tbValue + '%' }}</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.tbValue < 0">{{ scope.row.tbValue + '%' }}</el-tag>
           </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] + '季度':'季度').replace('-','年第') }}
-        </template>
-        <el-table-column label="对比值(去年)" align="center" prop="colName" width="120px">
-          <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">
-            <el-tag v-if="scope.row.datails[1].redio==0">持平</el-tag>
-            <el-tag type="success" v-else-if="scope.row.datails[1].redio >0">{{scope.row.datails[1].redio+'%'}}</el-tag>
-            <el-tag type="danger" v-else-if="scope.row.datails[1].redio <0">{{scope.row.datails[1].redio+'%'}}</el-tag>
-          </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[1]?timeValue[1] + '年度':'年度' }}
+          {{ timeValue[0] ? timeValue[0] : '年度' }}
         </template>
-        <el-table-column label="对比值(去年)" align="center" prop="colName" width="120px">
-          <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 }}
+            {{ scope.row.collValue }}
           </template>
         </el-table-column>
         <el-table-column label="同比%" align="center" prop="colName">
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.datails[1].redio==0">持平</el-tag>
-            <el-tag type="success" v-else-if="scope.row.datails[1].redio >0">{{scope.row.datails[1].redio+'%'}}</el-tag>
-            <el-tag type="danger" v-else-if="scope.row.datails[1].redio <0">{{scope.row.datails[1].redio+'%'}}</el-tag>
+            <el-tag v-if="scope.row.tbValue == 0">持平</el-tag>
+            <el-tag type="success" v-else-if="scope.row.tbValue > 0">{{ scope.row.tbValue + '%' }}</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.tbValue < 0">{{ scope.row.tbValue + '%' }}</el-tag>
           </template>
         </el-table-column>
       </el-table-column>
-
     </el-table>
-
   </div>
 </template>
 
 <script>
-import { getTQSJ,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import { getTQSJ, normFeelistAll, bondedList } from '@/api/portal/figure/figure.js';
 export default {
   name: 'TQSJ',
   data() {
     return {
-      formatY:'',
+      formatY: '',
       categoryChartData: {},
-      contentType:'1',
-      contentTypelist:[
+      contentType: '1',
+      contentTypelist: [
         { label: '列表', value: '1' },
         { label: '柱状图', value: '2' },
-        { label: '雷达图', value: '3' },
+        { label: '雷达图', value: '3' }
       ],
-      datelist:[
+      datelist: [
         { label: '月', value: '1' },
         // { label: '季度', value: '2' },
-        { label: '年', value: '3' },
+        { label: '年', value: '3' }
       ],
-      jdlist:[
+      jdlist: [
         { label: '第一季度', value: '1' },
         { label: '第二季度', value: '2' },
         { label: '第三季度', value: '3' },
-        { label: '第四季度', value: '4' },
+        { label: '第四季度', value: '4' }
       ],
       dialogVisible: false,
       fileList: [],
@@ -210,112 +114,123 @@ export default {
       dataList: [],
       // 查询参数
       queryParams: {
-        cbIdArr:[],  //保税区id集合
-        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
-        dateValue:'', //查询时间值
-        normFeeId:'',  //指标明细id
-        yearVlue:'',//如果选了月  那这里接收年的值 选的年还是传的dateValue
+        cbIdArr: [], //保税区id集合
+        dateType: '', //查询时间类型(1=月，2=季度，3=年)
+        dateValue: '', //查询时间值
+        normFeeId: '', //指标明细id
+        yearVlue: '' //如果选了月  那这里接收年的值 选的年还是传的dateValue
       },
-      normFeelistAll:[],  //指标列表
-      regionList:[],  //保税区列表
-      timeValue:[],
+      normFeelistAll: [], //指标列表
+      regionList: [], //保税区列表
+      timeValue: []
     };
   },
   created() {
-    this.bondedList()
+    this.bondedList();
     // this.getNormFeelistAll()
   },
   methods: {
-    selectBsqHandle(){
+    selectBsqHandle() {
       this.getList();
     },
-    selectChange(val){
-      this.queryParams.dateValue = ''
-      this.queryParams.yearVlue = ''
+    selectChange(val) {
+      this.queryParams.dateValue = '';
+      this.queryParams.yearVlue = '';
     },
     getList() {
-      this.timeValue = []
+      this.timeValue = [];
+      this.dataList = [];
       this.loading = true;
-      if(this.queryParams.dateType == '1'){
-        if(this.formatY >= 10){
-          this.queryParams.dateValue = this.formatY + '月'
-        }else{
-          this.queryParams.dateValue = '0'+this.formatY + '月'
+      if (this.queryParams.dateType == '1') {
+        if (this.formatY >= 10) {
+          this.queryParams.dateValue = this.formatY + '月';
+        } else {
+          this.queryParams.dateValue = '0' + this.formatY + '月';
         }
       }
-      getTQSJ(this.queryParams).then(response => {
-        this.dataList = []
-        // 对字符串数据统一进行排序
-        this.dataList = response.data.sort((a, b) => a.cbName.localeCompare(b.cbName));
-        if(this.dataList){
-          for (const i in this.dataList[0].datails) {
-            this.timeValue.push(this.dataList[0].datails[i].timeValue)
+      getTQSJ(this.queryParams).then((response) => {
+        response.data.forEach((item) => {
+          if (item.data) {
+            item.data.forEach((child) => {
+              child.cbName = this.dict(item.deptId).label;
+              child.collValue = Number(child.collValue.toString().replace(/(.d*?)0+$/, '$1'));
+              this.timeValue.push(this.queryParams.dateType == 1 ? child.year + '年' + child.month : child.year);
+              this.dataList.push(child);
+            });
           }
-        }
+        });
         this.loading = false;
       });
     },
-    bondedList(){
-      this.regionList = []
-      bondedList().then(res=>{
+    dict(deptId) {
+      return this.regionList.filter((item) => item.value == deptId)[0];
+    },
+    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,
-           })
+            label: res.data[i].deptName,
+            value: res.data[i].deptId
+          });
         }
-      })
+      });
     },
-    getNormFeelistAll(){
-      this.normFeelistAll = []
-      normFeelistAll().then(res=>{
+    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,
-           })
+            label: res.data[i].fname,
+            value: res.data[i].id
+          });
         }
         this.getList();
-      })
+      });
     },
     handleQuery() {
       this.getList();
     },
-    objectSpanMethod({ row, column, rowIndex, columnIndex }){
-        //列合并
-        if(columnIndex === 0) { // 只合并第一行
-          if(this.dataList.filter(({ cbName }) => cbName == row.cbName).length > 1 ) { // 只合并相同名字下行数大于1的（废话，不然没有合并的必要）
-            if(rowIndex == this.dataList.findIndex(({cbName}) => cbName == row.cbName )) { // 找到第一个同名的索引，从第一个开始合并，其他隐藏）
-                return { // 合并长度就是数组的长度  宽度是表头的宽度
-                  rowspan: this.dataList.filter(({ cbName }) => cbName == row.cbName).length,
-                  colspan: column.colSpan
-              }
-            }else { // 只保留第一行其他的隐藏
-              return {
-                rowspan: 0,
-                colspan: 0
-              }
-            }
-
-          }else {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      //列合并
+      if (columnIndex === 0) {
+        // 只合并第一行
+        if (this.dataList.filter(({ cbName }) => cbName == row.cbName).length > 1) {
+          // 只合并相同名字下行数大于1的（废话，不然没有合并的必要）
+          if (rowIndex == this.dataList.findIndex(({ cbName }) => cbName == row.cbName)) {
+            // 找到第一个同名的索引，从第一个开始合并，其他隐藏）
             return {
-                rowspan: 1,
-                colspan: 1
-              }
+              // 合并长度就是数组的长度  宽度是表头的宽度
+              rowspan: this.dataList.filter(({ cbName }) => cbName == row.cbName).length,
+              colspan: column.colSpan
+            };
+          } else {
+            // 只保留第一行其他的隐藏
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
           }
+        } else {
+          return {
+            rowspan: 1,
+            colspan: 1
+          };
         }
-
-      },
+      }
+    },
     /** 重置按钮操作 */
     resetQuery() {
+      this.timeValue = [];
+      this.dataList = [];
       this.queryParams.cbIdArr = [];
       this.queryParams.dateType = '';
       this.queryParams.dateValue = '';
       this.queryParams.normFeeId = '';
       this.queryParams.yearVlue = '';
-      this.formatY = ''
+      this.formatY = '';
       this.resetForm('queryForm');
-    },
+    }
   }
 };
 </script>