新增一级菜单：数据统计，并完成其下：指标数据排行、同期数据对比、指标总量、得分总量、得分占比、指标分数值等统计页面

src/views/DFZL/index.vue

@@ -47,7 +47,7 @@
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
 
-      <!-- <el-form-item label="图形类型">
+      <el-form-item label="图形类型">
         <el-select v-model="contentType" placeholder="请选择图形类型">
           <el-option
             v-for="item in contentTypelist"
@@ -56,127 +56,55 @@
             :value="item.value">
           </el-option>
        </el-select>
-      </el-form-item> -->
+      </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 :data="dataList" height="500px" v-if="contentType == 1">
       <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">
+      <el-table-column label="所得分数" align="center" prop="colValue">
         <template slot-scope="scope">
-          {{ scope.row.colName }}
+          {{ scope.row.colValue }}
         </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>
 
+    <circle-chart v-else-if="contentType == 2" :chartData="dataList"  style="width: 100%;"></circle-chart>
+    <category-chart v-else-if="contentType == 3" itemName="所得分数"  :chartData="dataList" style="width: 100%"></category-chart>
+    <line-chart v-else-if="contentType == 4" :chartData="dataList" style="width: 100%"> </line-chart>
   </div>
 </template>
 
 <script>
 import { getDFZL,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import circleChart from '../dashboard/DFZLcircleChart.vue';
+import categoryChart from '../dashboard/DFZLcategoryChart.vue';
+import lineChart from '../dashboard/DFZLlineChart.vue';
 export default {
   name: 'DFZL',
+  components:{
+    circleChart,
+    categoryChart,
+    lineChart
+
+  },
   data() {
     return {
       categoryChartData: {},
       contentType:'1',
       contentTypelist:[
         { label: '列表', value: '1' },
-        { label: '柱状图', value: '2' },
-        { label: '雷达图', value: '3' },
+        { label: '饼状', value: '2' },
+        { label: '柱状', value: '3' },
+        { label: '折线', value: '4' },
       ],
       datelist:[
         { label: '月', value: '1' },
@@ -208,7 +136,6 @@ export default {
       },
       normFeelistAll:[],  //指标列表
       regionList:[],  //保税区列表
-      timeValue:[],
     };
   },
   created() {
@@ -220,14 +147,10 @@ export default {
       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;
       });
     },

src/views/TQSJ/index.vue

@@ -99,7 +99,7 @@
 
      <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '1' || queryParams.dateType == ''">
         <template slot="header" slot-scope="scope">
-          {{ timeValue[0]?timeValue[0]:'月份' }}
+          {{ (timeValue[0]?timeValue[0]:'月份').replace('-', '年') }}
         </template>
           <el-table-column label="对比值(去年)" align="center" prop="colName" width="120px">
           <template slot-scope="scope">
@@ -113,14 +113,17 @@
         </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+'%'}}
+            <!-- {{ 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>
           </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] + '季度':'季度' }}
+          {{ (timeValue[1]?timeValue[1] + '季度':'季度').replace('-','年第') }}
         </template>
         <el-table-column label="对比值(去年)" align="center" prop="colName" width="120px">
           <template slot-scope="scope">
@@ -132,9 +135,11 @@
             {{ scope.row.datails[1].nowValue }}
           </template>
         </el-table-column>
-        <el-table-column label="浮动" align="center" prop="colName">
+        <el-table-column label="同比%" align="center" prop="colName">
           <template slot-scope="scope">
-            {{ scope.row.datails[1].redio }}
+            <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>
@@ -153,9 +158,11 @@
             {{ scope.row.datails[2].nowValue }}
           </template>
         </el-table-column>
-        <el-table-column label="浮动" align="center" prop="colName">
+        <el-table-column label="同比%" align="center" prop="colName">
           <template slot-scope="scope">
-            {{ scope.row.datails[2].redio }}
+            <el-tag v-if="scope.row.datails[2].redio==0">持平</el-tag>
+            <el-tag type="success" v-else-if="scope.row.datails[2].redio >0">{{scope.row.datails[2].redio+'%'}}</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.datails[2].redio <0">{{scope.row.datails[2].redio+'%'}}</el-tag>
           </template>
         </el-table-column>
       </el-table-column> 

src/views/ZBCS/index.vue

@@ -76,7 +76,7 @@
       </el-table-column>
     </el-table>
 
-    <category-chart v-if="contentType == '2'"  :chartData="ChartData" style="width: 100%"></category-chart>
+    <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>

src/views/ZBZL/index.vue

@@ -64,19 +64,19 @@
     </el-row>
 
     <el-table  :data="dataList" v-if="contentType == '1'">
-      <el-table-column label="保税区" align="center" prop="colName">
+      <el-table-column label="保税区" align="center" prop="cbName">
         <template slot-scope="scope">
-          {{ scope.row.colName }}
+          {{ scope.row.cbName }}
         </template>
       </el-table-column>
-      <el-table-column label="绩效指标分值" align="center" prop="colValue">
+      <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'"  :chartData="ChartData" style="width: 100%"></category-chart>
+    <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>
@@ -145,7 +145,7 @@ export default {
         this.dataList = response.data;
         for (const i in response.data) {
           this.ChartData.push({ 
-            name: response.data[i].colName,
+            name: response.data[i].cbName,
             value: response.data[i].colValue,
            })
         }

src/views/dashboard/DFZLcategoryChart.vue

@@ -0,0 +1,143 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    itemName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let xAxisData = [];
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          xAxisData.push(item.cbName);
+          seriesData.push(item.colValue);
+        });
+      }
+      this.chart.setOption({
+        title: {
+          text: this.title,
+          left: "center",
+        },
+        color: ["rgba(37, 97, 239, 1)"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: xAxisData,
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            data: xAxisData,
+          },
+        ],
+        series: [
+          {
+            // showBackground: true,
+            // backgroundStyle: {
+            //   color: "rgba(180, 180, 180, 0.05)",
+            // },
+            name: this.itemName,
+            type: "bar",
+            barWidth: "60%",
+            data: seriesData,
+            animationDuration,
+            itemStyle: {
+              normal: {
+                color: function () {
+                  return (
+                    "#" +
+                    Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(
+                      16
+                    )
+                  );
+                },
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/dashboard/DFZLcircleChart.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          seriesData.push({
+            name: item.cbName,
+            value: item.colValue,
+          });
+        });
+      }
+      this.chart.setOption({
+        title: {
+          text: this.title,
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                formatter: "{b}:{c}: ({d}%)",
+                textStyle: {
+                  fontWeight: "normal",
+                  fontSize: 15,
+                },
+              },
+            },
+            name: "饼图",
+            type: "pie",
+            radius: "50%",
+            data: seriesData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/dashboard/DFZLlineChart.vue

@@ -0,0 +1,105 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    itemName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let xAxisData = [];
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          xAxisData.push(item.cbName);
+          seriesData.push(item.colValue);
+        });
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          boundaryGap: true,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: seriesData,
+            type: "line",
+            areaStyle: {}
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/dashboard/categoryChart.vue

@@ -32,6 +32,10 @@ export default {
       type: String,
       default: "",
     },
+    itemName: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
@@ -113,7 +117,7 @@ export default {
             // backgroundStyle: {
             //   color: "rgba(180, 180, 180, 0.05)",
             // },
-            name: "Direct",
+            name: this.itemName,
             type: "bar",
             barWidth: "60%",
             data: seriesData,

src/views/dashboard/circleChart.vue

@@ -66,6 +66,7 @@ export default {
       }, 300);
     },
     setOptions(chartData) {
+      console.log(chartData);
       let seriesData = [];
       if (chartData) {
         chartData.forEach((item, index) => {