From 0ff56f032ae988046c2cc8634e8499de096aae6f Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 23 Aug 2022 11:51:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E8=B4=A8?=
 =?UTF-8?q?=E9=87=8F=E7=AE=A1=E7=90=86)=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E7=B1=BB=E5=9E=8B=EF=BC=8C=E5=A4=A9=E6=95=B0?=
 =?UTF-8?q?=20Switch=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../qualityManage/components/DaysSwitch.vue   | 61 +++++++++++++++++++
 .../jlw/qualityManage/leftTop.vue             | 30 +++++----
 2 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 src/views/projectAdmin/jlw/qualityManage/components/DaysSwitch.vue

diff --git a/src/views/projectAdmin/jlw/qualityManage/components/DaysSwitch.vue b/src/views/projectAdmin/jlw/qualityManage/components/DaysSwitch.vue
new file mode 100644
index 00000000..b91f9419
--- /dev/null
+++ 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: 4px;
+    cursor: pointer;
+    &.checked {
+      color: #000;
+      background-color: #6ee4f0;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/jlw/qualityManage/leftTop.vue b/src/views/projectAdmin/jlw/qualityManage/leftTop.vue
index a3bbef9a..a0a9cadd 100644
--- 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>