task-6440 质量指标看板调整

src/views/business/qualityTarget/components/muBiaoChart.vue

@@ -103,7 +103,7 @@ export default {
                   option.title.textStyle.fontSize = this.fontSize
                   option.xAxis.data = xData
                   option.series[0].data = yData
-                  option.series[0].label.show = false
+                  option.series[0].label.show = true
                   option.series[0].type = item.series[0]['type']
                   option.series[0].name = item.title
                   option.series[0].markLine = item.series[0].markLine

src/views/business/qualityTarget/components/zhiBiaoChart.vue

@@ -91,7 +91,7 @@ export default {
                   option.title.textStyle.fontSize = this.fontSize
                   option.xAxis.data = xData
                   option.series[0].data = yData
-                  option.series[0].label.show = false
+                  option.series[0].label.show = true
                   option.series[0].type = item.series[0]['type']
                   option.series[0].name = item.title
                   option.series[0].markLine = item.series[0].markLine

src/views/business/qualityTarget/index.vue

@@ -7,14 +7,23 @@
                 <dv-decoration-5 :class="$style.center" :dur="5" />
                 <dv-decoration-8 :class="$style.right" :reverse="true" />
                 <div :class="$style.title">{{ title }}</div>
-                  <div :class="$style.year" @click.prevent="tabChange()">
-                    <dv-border-box-8>{{tab == 'mubiao' ? '质量目标' : '质量指标'}}</dv-border-box-8>
+                  <div :class="$style.label">类型：</div>
+                  <div :class="$style.year">
+                    <dv-border-box-8>
+                      <el-select v-model="tab" placeholder="请选择">
+                        <el-option
+                          v-for="item in list"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      </dv-border-box-8>
                   </div>
                   <div
                     :class="$style.datewrap"
-                    v-if="tab == 'zhibiao'"
                   >
-                    <div>月份：</div>
+                    <div>时间：</div>
                     <el-date-picker
                       v-model="endDate"
                       type="monthrange"
@@ -57,7 +66,9 @@
             <!-- 图表区域 -->
             <dv-border-box-1>
               <mu-biao-chart v-if="renderData.length" :info="renderData" :font-size="fontSize" :choose-year="year" @child-event="handleChildEvent"  />
+              <div :class="$style.desc">准确及时 科学高效 用户满意 持续改进</div>
             </dv-border-box-1>
+
         </dv-full-screen-container>
         <zhibiao-dialog v-if="showDialog" loading="true" :targetName="zhibiao" :dateRange="dateRange" @closeDialog="showDialog = false"></zhibiao-dialog>
     </div>
@@ -73,6 +84,16 @@ export default {
     data () {
         const d = new Date()
         return {
+          list: [
+            {
+              label: '质量目标',
+              value: 'mubiao'
+            },
+            {
+              label: '质量指标',
+              value: 'zhibiao'
+            }
+          ],
             tab: 'mubiao',
             level: '',
             title: '质量指标看板',
@@ -89,7 +110,7 @@ export default {
             pageAll: 0,
             BeginDate: "",
             endDate: "2026-02",
-            dataScope: [],
+            // dataScope: [],
             dateRange: '',
             showDialog: false,
             zhibiao: ''
@@ -98,6 +119,17 @@ export default {
     watch: {
         chartIndex (v) {
           this.renderData = this.initData && this.initData.length > 0 ? this.initData.slice(v * this.size, (v + 1) * this.size) : []
+        },
+        tab (v) {
+          if(v == 'zhibiao'){
+            this.dateRange = this.getDate(0, true)
+            this.endDate = this.getDate(0, false)
+          }else{
+            let nowDate = new Date();
+            this.dateRange = `${nowDate.getFullYear() - 5}01-${nowDate.getFullYear()-1}12`
+            this.endDate = [`${nowDate.getFullYear() - 5}-01`, `${nowDate.getFullYear() - 1}-12`]
+          }
+          this.updateAll()
         }
     },
     created () {
@@ -106,14 +138,18 @@ export default {
             screenfull.request()
         }
 
+        let nowDate = new Date();
+        this.dateRange = `${nowDate.getFullYear() - 5}01-${nowDate.getFullYear()-1}12`
+        this.endDate = [`${nowDate.getFullYear() - 5}-01`, `${nowDate.getFullYear() - 1}-12`]
+
         this.updateAll()
 
-        if (!this.BeginDate && !this.endDate) {
-          this.BeginDate = this.getDate(1) + "";
-          this.endDate = this.getDate(0);
-          this.dataScope.push(this.BeginDate);
-          this.dataScope.push(this.endDate);
-        }
+        // if (!this.BeginDate && !this.endDate) {
+        //   this.BeginDate = this.getDate(1) + "";
+        //   this.endDate = this.getDate(0);
+        //   this.dataScope.push(this.BeginDate);
+        //   this.dataScope.push(this.endDate);
+        // }
     },
     beforeDestroy () {
         if (screenfull.isFullscreen) {
@@ -152,20 +188,22 @@ export default {
           }
           
         },
-        tabChange () {
-          console.log(this.getDate(), 111)
-          if(this.tab == 'mubiao') {
-            this.tab = 'zhibiao'
-            this.dateRange = this.getDate(0, true)
-            this.endDate = this.getDate(0, false)
-          } else { 
-            this.tab = 'mubiao'
-            this.dateRange = ''
-          }
-          this.targetName = ''
-          this.chartIndex = 0
-          this.updateAll()
-        },
+        // tabChange (e) {
+        //   console.log(e, '切换', this.tab)
+        //   console.log(this.getDate(), 111)
+        //   if(this.tab == 'mubiao') {
+        //     this.tab = 'zhibiao'
+        //     this.dateRange = this.getDate(0, true)
+        //     this.endDate = this.getDate(0, false)
+        //   } else { 
+        //     this.tab = 'mubiao'
+        //     // this.dateRange = this.getDate(0, true)
+        //     // this.endDate = this.getDate(0, false)
+        //   }
+        //   this.targetName = ''
+        //   this.chartIndex = 0
+        //   this.updateAll()
+        // },
         initializeData () {
             const w = window.innerWidth
             const { first = '', second = '' } = this.$store.getters.level || {}
@@ -295,6 +333,12 @@ export default {
 }
 </script>
 <style lang="scss" module>
+  .desc{
+    color: #fff;
+    position: absolute;
+    bottom: 15px;
+    left: 40px;
+  }
     .content {
         width: 100%;
         height: 100%;
@@ -303,6 +347,13 @@ export default {
         color: #fff;
         z-index: 999;
         :global {
+          .el-input__inner{
+            background-color: transparent;
+            border: none;
+          }
+          .el-range-editor--small.el-input__inner{
+            border: 1px solid #DCDFE6;
+          }
             #dv-full-screen-container {
                 background-image: url('~@/assets/images/screen/bg.png');
                 background-size: 100% 100%;
@@ -365,6 +416,12 @@ export default {
                 top: 15px;
                 transform: translateX(-50%);
             }
+            .label{
+              font-size: 16px;
+              position: absolute;
+              right: 88%;
+              margin-top: 2.6%;
+            }
             .year, .back, .parse {
                 width: 8%;
                 max-width: 180px;
@@ -378,11 +435,15 @@ export default {
                 color: #ffffff;
             }
             .year {
-                width: 5%;
-                right: 83%;
+                width: 6%;
+                padding: 0 10px;
+                right: 82%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                input{
+                  color: #fff;
+                }
             }
             .back {
                 width: 5%;