Merge branch 'dev-jack' into shenzhen-dev

2022-08-23 16:40:41 +08:00 · 2022-08-23 16:40:41 +08:00 · 34da4b7dde
commit 34da4b7dde
parent 5dda64433e b4e7351ce6
5 changed files with 143 additions and 76 deletions
--- a/src/views/projectAdmin/jlw/qualityManage/components/DaysSwitch.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/components/DaysSwitch.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="days-switch">
+    <div
+      class="type"
+      :class="{ checked: daysType === type.value }"
+      v-for="type in daysTypes"
+      :key="type.value"
+      @click="handleSwitch(type.value)"
+    >
+      {{ type.label }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    daysTypes: {
+      type: Array,
+      default: () => [
+        { label: '全部', value: 0 },
+        { label: '近30天', value: 30 }
+      ]
+    }
+  },
+  data() {
+    return {
+      daysType: 0
+    }
+  },
+  methods: {
+    handleSwitch(val) {
+      this.daysType = val
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.days-switch {
+  width: 100px;
+  padding: 1px;
+  display: flex;
+  border: 1px solid #4794a4;
+  border-radius: 2px;
+  div {
+    width: 50px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    font-size: 12px;
+    border-radius: 2px;
+    cursor: pointer;
+    &.checked {
+      color: #000;
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>
--- a/src/views/projectAdmin/jlw/qualityManage/leftBottom.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/leftBottom.vue
@ -2,65 +2,59 @@
  <!-- 问题占比 -->
  <div class="frequentProblems">
    <div class="title">{{ title }}</div>
+    <DaysSwitch class="days-switch" @change="handleSwitch" />
    <div class="content">
-      <JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
+      <JBarChart :xData="xData" :yData="yData" :color="['#FE6C7F']" />
    </div>
  </div>
 </template>

 <script>
-import JBarChart from "../jChart/bar/JBarChart.vue";
-import { selectDangerTypeQualityCountApi } from "@/assets/js/api/dataBoard";
+import JBarChart from '../jChart/bar/JBarChart.vue'
+import DaysSwitch from './components/DaysSwitch.vue'
+import { selectDangerTypeQualityCountApi } from '@/assets/js/api/dataBoard'
 export default {
-  components: { JBarChart },
+  components: { JBarChart, DaysSwitch },
  props: {
    title: {
      type: String,
-      default: "default title"
+      default: ''
    }
  },
  data() {
    return {
-      xData: [
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师",
-        "地理老师"
-      ],
+      xData: [],
      yData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
-    };
+    }
  },
  mounted() {
-    this.getData(2);
+    this.getData(2)
  },
  methods: {
    getData(opType) {
      let data = {
        projectSn: this.$store.state.projectSn,
        opType: opType
-      };
+      }
      selectDangerTypeQualityCountApi(data).then(res => {
-        var arr = res.result.list;
+        var arr = res.result.list
        if (arr != null) {
-          var xdata = [];
-          var ydata = [];
+          var xdata = []
+          var ydata = []
          arr.forEach(item => {
-            xdata.push(item.dangerName);
-            ydata.push(item.num);
-          });
-          this.xData = xdata;
-          this.yData = ydata;
+            xdata.push(item.dangerName)
+            ydata.push(item.num)
+          })
+          this.xData = xdata
+          this.yData = ydata
        }
-      });
+      })
+    },
+    handleSwitch(val) {
+      console.log('val', val)
    }
  }
-};
+}
 </script>

 <style lang="less" scoped>
@ -75,8 +69,13 @@ export default {
    font-size: 18px;
    color: #6ee4f0;
  }
+  .days-switch {
+    margin-top: 10px;
+    margin-right: 20px;
+    margin-left: auto;
+  }
  .content {
-    height: calc(100% - 30px);
+    height: calc(100% - 64px);
  }
 }
 </style>
--- a/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/leftCenter.vue
@ -3,33 +3,16 @@
  <div class="questionRate">
    <div class="title">{{ title }}</div>
    <div class="content">
-      <div class="chart">
-        <JRingChart
-          :title="{ text: total.totalNum, subTitle: '问题总数' }"
-          :color="['#557DEE', '#43D7B5']"
-          :data="[{ value: total.jyUrgentLevelNum }, { value: total.ybUrgentLevelNum }]"
-          :radius="['55%', '80%']"
-        />
-      </div>
-      <div class="count">
-        <div class="count-item">
-          <div class="label">紧要问题</div>
-          <div class="num">{{total.jyUrgentLevelNum}}</div>
-        </div>
-        <div class="count-item">
-          <div class="label">一般问题</div>
-          <div class="num">{{total.ybUrgentLevelNum}}</div>
-        </div>
-      </div>
+      <JNestedRingChart :title="{ text: total.totalNum, subTitle: '问题总数', y: '35%' }" :series="series" />
    </div>
  </div>
 </template>

 <script>
-import JRingChart from '../jChart/pie/JRingChart.vue'
+import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 import { selectQualityStatisticsApi } from '@/assets/js/api/dataBoard'
 export default {
-  components: { JRingChart },
+  components: { JNestedRingChart },
  props: {
    title: {
      type: String,
@ -38,25 +21,43 @@ export default {
  },
  data() {
    return {
-      total:{
-        totalNum:'',
-        jyUrgentLevelNum:'',
-        ybUrgentLevelNum:'',
-      }
+      total: {
+        totalNum: '',
+        jyUrgentLevelNum: '',
+        ybUrgentLevelNum: '',
+        yzUrgentLevelNum: ''
+      },
+      series: []
    }
  },
-  created(){
+  created() {
    this.getData()
  },
-  methods:{
-   //获取数据
+  methods: {
+    //获取数据
    getData() {
      let data = {
        projectSn: this.projectSn
      }
      selectQualityStatisticsApi(data).then(res => {
-        console.log('问题占比',res)
-        this.total = res.result.total
+        const data = res.result || {}
+        this.total = data.total
+        this.series = [
+          {
+            color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
+            data: [
+              { value: this.total.jyUrgentLevelNum, name: '紧要问题' },
+              { value: this.total.yzUrgentLevelNum, name: '严重问题' },
+              { value: this.total.ybUrgentLevelNum, name: '一般问题' }
+            ]
+          },
+          {
+            roseType: 'area',
+            radius: ['58%', '54%'],
+            color: ['#0B1B35', '#244D8F'],
+            data: [30, 40, 30, 40]
+          }
+        ]
      })
    }
  }
--- a/src/views/projectAdmin/jlw/qualityManage/leftTop.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/leftTop.vue
@ -1,6 +1,7 @@
 <template>
  <div class="question-type">
    <div class="title">{{ title }}</div>
+    <DaysSwitch class="days-switch" @change="handleSwitch" />
    <div class="content">
      <JProgressChart :seriesData="seriesData" :yData="yData" />
    </div>
@ -9,9 +10,10 @@

 <script>
 import JProgressChart from '../jChart/bar/JProgressChart.vue'
+import DaysSwitch from './components/DaysSwitch.vue'
 import { selectDangerTypeQualityCountApi } from '@/assets/js/api/dataBoard'
 export default {
-  components: { JProgressChart },
+  components: { JProgressChart, DaysSwitch },
  props: {
    title: {
      type: String,
@ -20,35 +22,34 @@ export default {
  },
  data() {
    return {
-      yData: ['地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师', '地理老师'],
+      yData: [],
      seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33]
    }
  },
-  mounted(){
-    this.getData(2);
+  mounted() {
+    this.getData(2)
  },
-  methods:{
-    getData(opType){
+  methods: {
+    getData(opType) {
      let data = {
        projectSn: this.$store.state.projectSn,
        opType: opType
      }
      selectDangerTypeQualityCountApi(data).then(res => {
-        console.log('-----------',res)
        var arr = res.result.list
        var xdata = []
-        var ydata=[]
+        var ydata = []
        arr.forEach(item => {
          xdata.push(item.dangerName)
          ydata.push(item.num)
        })
        this.yData = xdata
        this.seriesData = ydata
-        console.log('xdata',this.yData)
-        console.log('ydata',this.seriesData)
      })
+    },
+    handleSwitch(val) {
+      console.log(val, 'hello')
    }
-    
  }
 }
 </script>
@ -65,8 +66,13 @@ export default {
    font-size: 18px;
    color: #6ee4f0;
  }
+  .days-switch {
+    margin-top: 10px;
+    margin-right: 20px;
+    margin-left: auto;
+  }
  .content {
-    height: calc(100% - 30px);
+    height: calc(100% - 64px);
  }
 }
 </style>
--- a/src/views/projectAdmin/jlw/qualityManage/rightTop.vue
+++ b/src/views/projectAdmin/jlw/qualityManage/rightTop.vue
@ -15,10 +15,10 @@
      <div class="chart">
        <JRingChart
          :title="{ text: total.ratioNum, subTitle: '即时整改率' }"
-          :color="['#557DEE', '#43D7B5']"
+          :color="['#43D7B5', '#44d7b640']"
          :data="[
-            { value: 1, name: '' },
-            { value: 9, name: '' }
+            { value: total.closeNum, name: '' },
+            { value: total.totalNum || 1, name: '' }
          ]"
        />
      </div>