Просмотр исходного кода

fix:风险占比与饼图高度调整

zhangjingyuan 2 лет назад
Родитель
Сommit
5c724f25e3

+ 104 - 102
src/views/system/jbdHome/board/component/getPieView.vue

@@ -1,114 +1,116 @@
 <template>
-  <div class="pieView">
-    <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
-      {{ info.config.title || "" }}
+    <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ info.config.title || "" }}
+        </div>
+        <div v-show="showChart" style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div :id="info.config.idSelector" style="width: 100%; height: 95%; overflow: hidden" />
+        </div>
+        <div v-if="!showChart" style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;">
+            <div style="color: #c7c7c7">目前无数据</div>
+        </div>
     </div>
-    <div style="width: 100%; height: 86%; display: inline-block; overflow: hidden" v-show="showChart">
-      <div :id="info.config.idSelector" style="width: 100%; height: 95%; overflow: hidden" ></div>
-    </div>
-    <div style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;" v-if="!showChart">
-      <div style="color: #c7c7c7">目前无数据</div>
-    </div>
-  </div>
 </template>
 
 <script>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 export default {
-  data() {
-    return {
-      showChart: true,
-    };
-  },
-  props: {
-    info: {
-      type: Object,
-      default: {},
+    props: {
+        info: {
+            type: Object,
+            // eslint-disable-next-line vue/require-valid-default-prop
+            default: {}
+        }
     },
-  },
-  mounted() {
-    let this_ = this;
-    this.$nextTick(() => {
-      this_.getMiddleLeft();
-    });
-  },
-  methods: {
-    getMiddleLeft() {
-      let chartDom = document.getElementById(this.info.config.idSelector);
-      var myChart = echarts.init(chartDom);
-      const radius = window.innerWidth > 1600 ? "60%" : "45%";
-      let inData = this.info.data;
-      let num = 0;
-      for (let i in inData) {
-        num += inData[i].value;
-      }
-      if (num == 0) {
-        this.showChart = false;
-      } else {
-        this.showChart = true;
-      }
-      var option;
-      option = {
-        title: {
-          show: true,
-          left: "center",
-          textStyle: {
-            color: "#fff",
-            fontSize: 18,
-            fontWeight: "600",
-          },
-        },
-        color: this.info.color,
-        tooltip: {
-          trigger: "item",
-          formatter: "{d}%",
-        },
-        label: {
-          formatter: "{b}\n{c},{d}%",
-          edgeDistance: "20%",
-        },
-
-        legend: {
-          show: true,
-          // orient: 'vertical',
-          itemGap: 6,
-          z: 3,
-          left: "left",
-          textStyle: {
-            color: "#fff",
-          },
-        },
-        series: [
-          {
-            type: "pie",
-            radius: radius,
-            center: ["50%", "60%"],
-            data: this.info.data,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
-            labelLine: {
-              distanceToLabelLine: 0,
+    data () {
+        return {
+            showChart: true
+        }
+    },
+    watch: {
+        info: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
             },
-          },
-        ],
-      };
-      myChart.setOption(option);
+            deep: true
+        }
     },
-  },
-  watch: {
-    info: {
-      handler(newVal, oldVal) {
-        this.getMiddleLeft();
-      },
-      deep: true,
+    mounted () {
+        const this_ = this
+        this.$nextTick(() => {
+            this_.getMiddleLeft()
+        })
     },
-  },
-};
+    methods: {
+        getMiddleLeft () {
+            const chartDom = document.getElementById(this.info.config.idSelector)
+            var myChart = echarts.init(chartDom)
+            const radius = window.innerWidth > 1600 ? '60%' : '45%'
+            const inData = this.info.data
+            let num = 0
+            for (const i in inData) {
+                num += inData[i].value
+            }
+            // eslint-disable-next-line eqeqeq
+            if (num == 0) {
+                this.showChart = false
+            } else {
+                this.showChart = true
+            }
+            var option
+            option = {
+                title: {
+                    show: true,
+                    left: 'center',
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 18,
+                        fontWeight: '600'
+                    }
+                },
+                color: this.info.color,
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{d}%'
+                },
+                label: {
+                    formatter: '{b}\n{c},{d}%',
+                    edgeDistance: '20%'
+                },
+
+                legend: {
+                    show: true,
+                    // orient: 'vertical',
+                    itemGap: 6,
+                    z: 3,
+                    left: 'left',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: radius,
+                        center: ['50%', '60%'],
+                        data: this.info.data,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        labelLine: {
+                            distanceToLabelLine: 0
+                        }
+                    }
+                ]
+            }
+            myChart.setOption(option)
+        }
+    }
+}
 </script>
 <style lang="scss" scoped>
 .pieView {
@@ -117,4 +119,4 @@ export default {
   overflow: hidden;
   background-color: rgba(6, 30, 93, 0.5);
 }
-</style>
+</style>

+ 5 - 2
src/views/system/jbdScan/goods/fengxiangkongzhi.vue

@@ -29,10 +29,10 @@
                 <template>
                     <el-tabs v-model="activeName" class="count" @tab-click="handleClick">
                         <el-tab-pane label="风险等级统计表" name="first">
-                            <div v-show="riskLeveChange" style="width: 50%;">
+                            <div v-show="riskLeveChange" style="width: 50%;height:320px">
                                 <tableCom :table-prop="RiskLevelProp" :table-list="RiskLevelList" />
                             </div>
-                            <div v-show="!riskLeveChange" style="width: 45%; height:350px">
+                            <div v-show="!riskLeveChange" style="width: 45%; height:320px">
                                 <div id="idSelector1" style="width: 300px; height: 300px; margin:0 auto" />
                                 <PieView ref="firstPieView" :info="riskLevePieView" />
                             </div>
@@ -258,6 +258,8 @@ export default {
             this.getRiskIdentification()// 风险识别评估表
             this.getImprovementRecords()// 风险改进记录
             this.getSchedule(this.obj[0].zhuang_tai_)
+            this.page = 1
+            this.pagesize = 2
             this.scan = this.scanVisible
             this.userList = this.$store.getters.userList
             this.deptList = this.$store.getters.deptList
@@ -413,6 +415,7 @@ export default {
         // 风险改进记录
         async getImprovementRecords () {
             const this_ = this
+            this_.pageTotal = 0
             // const sql = `select * from t_bmfxgjjl where zong_id_ = '${this.zongid}' `
             const sql1 = `select * from t_bmfxgjjl limit ${(this.page - 1) * this.pagesize},${this.pagesize}`
             const sql2 = `select count(*) as count from t_bmfxgjjl`