fix home 1440px

src/views/invest/components/chart.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <charts id="chart" height="255px" :option="option" />
+  <div class="full-width">
+    <charts id="chart" width="80%" height="255px" :option="option" />
   </div>
 </template>
 
@@ -173,7 +173,6 @@ export default {
               res => res.sum_complete_amount
             )
             this.option.series[1].data = res.data.map(res => res.average)
-            const size = this.option.series[0].data.length
           }
         })
     }

src/views/invest/components/chart2.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <charts id="chart2" height="305px" :option="option" />
+  <div class="full-width">
+    <charts id="chart2" width="80%" height="305px" :option="option" />
   </div>
 </template>
 
@@ -115,7 +115,7 @@ export default {
         })
         .then(res => {
           if (res.code === 200) {
-            this.option.xAxis.data = res.data.map(res => res.time)
+            this.option.xAxis.data = res.data.map(res => res.time.substring(6))
             this.option.series.data = res.data.map(res => res.sum_storage)
           }
         })

src/views/invest/components/years.vue

@@ -2,10 +2,10 @@
   <div class="flex flex-center flex-col">
     <div class="full-width">
       <basic-tab
-          :tabs="tabs"
-          :full="true"
-          @change="change"
-          style="width: 99%"
+        :tabs="tabs"
+        :full="true"
+        @change="change"
+        style="width: 99%"
       />
     </div>
     <div class="flex flex-center full-width mt-10">
@@ -13,35 +13,35 @@
         <div class="box" :style="`box-shadow: ` + i.box">
           <div class="flex flex-col bold font-16 padding-14">
             <div class="flex flex-justify-start flex-align-end">
-              <img :src="i.icon"/>
+              <img :src="i.icon" />
               <span class="grey-6 ml-5">{{ i.name }}</span>
               <span v-if="i.index !== 2" class="font-12 grey-6 ml-10"
-              >万元</span
+                >万元</span
               >
             </div>
             <div
-                v-if="i.index !== 2"
-                class="flex flex-align-end flex-justify-start mt-10"
+              v-if="i.index !== 2"
+              class="flex flex-align-end flex-justify-start mt-10"
             >
               <span class="grey" style="margin-left: 3px">￥</span>
               <span class="ml-5 font-24" :style="`color:` + i.color">{{
-                  info[i.prop] ? info[i.prop].toLocaleString() : '0'
-                }}</span>
+                info[i.prop] ? info[i.prop].toLocaleString() : '0'
+              }}</span>
               <el-icon
-                  :size="15"
-                  v-if="i.index === 0 && user.info.viewStage === 1"
-                  class="ml-10 pointer"
-                  @click="edit(i)"
+                :size="15"
+                v-if="i.index === 0 && user.info.viewStage === 1"
+                class="ml-10 pointer"
+                @click="edit(i)"
               >
-                <Edit/>
+                <Edit />
               </el-icon>
             </div>
-            <div v-else class="flex flex-justify-start flex-center mt-10">
+            <div v-else class="flex flex-justify-start flex-center full-width">
               <div class="progress-bar mt-10">
                 <div
-                    v-if="info[i.prop]"
-                    class="bar full-height"
-                    :style="
+                  v-if="info[i.prop]"
+                  class="bar full-height"
+                  :style="
                     `width: ` +
                     (Number.parseFloat(info[i.prop].replace('%', '')) > 100
                       ? '100%'
@@ -50,12 +50,12 @@
                 ></div>
               </div>
               <span class="ml-10 font-24 mt-10" :style="`color:` + i.color">{{
-                  info[i.prop]
-                }}</span>
+                info[i.prop]
+              }}</span>
             </div>
           </div>
           <div style="margin-top: -20px">
-            <wave :color="i.color"/>
+            <wave :color="i.color" />
           </div>
         </div>
       </div>
@@ -66,8 +66,8 @@
 <script>
 import basicTab from '@/components/basic-tab/index.vue'
 import wave from '@/views/invest/components/wave.vue'
-import {useStore} from '@/store/user.js'
-import {ElMessageBox} from 'element-plus'
+import { useStore } from '@/store/user.js'
+import { ElMessageBox } from 'element-plus'
 import index from '@/views/task/Index.vue'
 
 export default {
@@ -77,10 +77,10 @@ export default {
       return index
     }
   },
-  components: {basicTab, wave},
+  components: { basicTab, wave },
   setup() {
     const user = useStore()
-    return {user}
+    return { user }
   },
   props: {
     deptId: {
@@ -111,17 +111,17 @@ export default {
       times: [],
       info: {},
       tabs: [
-        {name: '总览', value: 0},
-        {name: '一季度', value: 1},
-        {name: '二季度', value: 2},
-        {name: '三季度', value: 3},
-        {name: '四季度', value: 4}
+        { name: '总览', value: 0 },
+        { name: '一季度', value: 1 },
+        { name: '二季度', value: 2 },
+        { name: '三季度', value: 3 },
+        { name: '四季度', value: 4 }
       ],
       quarter: '',
       dash: [
         {
           icon: new URL('../../../assets/svg/invest/1.svg', import.meta.url)
-              .href,
+            .href,
           name: '责任目标',
           value: 0,
           prop: 'plan_complete_amount',
@@ -129,13 +129,13 @@ export default {
           color: '#32B5F3',
           index: 0,
           background: new URL(
-              '../../../assets/svg/invest/bg1.svg',
-              import.meta.url
+            '../../../assets/svg/invest/bg1.svg',
+            import.meta.url
           ).href
         },
         {
           icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url)
-              .href,
+            .href,
           name: '累计完成投资',
           value: 0,
           prop: 'total_complete_amount',
@@ -145,7 +145,7 @@ export default {
         },
         {
           icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url)
-              .href,
+            .href,
           name: '投资完成比例',
           value: 0,
           prop: 'rate',
@@ -155,7 +155,7 @@ export default {
         },
         {
           icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url)
-              .href,
+            .href,
           name: '计划纳统投资',
           value: 0,
           prop: 'total_investment_amount',
@@ -173,16 +173,16 @@ export default {
     load() {
       this.tabs[0].name = this.year + '年总览'
       this.$api.invest
-          .homeInvest({
-            deptId: this.deptId === null ? '' : this.deptId,
-            year: this.year === null ? '' : this.year,
-            quarter: this.quarter
-          })
-          .then(res => {
-            if (res.code === 200) {
-              this.info = res.data
-            }
-          })
+        .homeInvest({
+          deptId: this.deptId === null ? '' : this.deptId,
+          year: this.year === null ? '' : this.year,
+          quarter: this.quarter
+        })
+        .then(res => {
+          if (res.code === 200) {
+            this.info = res.data
+          }
+        })
     },
     init() {
       const year = new Date().getFullYear()
@@ -195,56 +195,56 @@ export default {
     },
     edit(item) {
       ElMessageBox.prompt(
-          '当前责任目标为' +
+        '当前责任目标为' +
           this.info[item.prop].toLocaleString() +
           '万元，请输入新的责任目标(数字，小数点)',
-          '提示',
-          {
-            confirmButtonText: '保存',
-            cancelButtonText: '取消',
-            inputPattern: /^([1-9]\d*|0)(\.\d+)?$/,
-            inputErrorMessage: '信息错误'
-          }
-      ).then(({value}) => {
+        '提示',
+        {
+          confirmButtonText: '保存',
+          cancelButtonText: '取消',
+          inputPattern: /^([1-9]\d*|0)(\.\d+)?$/,
+          inputErrorMessage: '信息错误'
+        }
+      ).then(({ value }) => {
         let data = {}
         switch (this.quarter) {
           case 0: // 年度
-            data = {number: value}
+            data = { number: value }
             break
           case 1: // 1季度
-            data = {number: value, type: 1}
+            data = { number: value, type: 1 }
             break
           case 2: // 2季度
-            data = {number: value, type: 2}
+            data = { number: value, type: 2 }
             break
           case 3: // 3季度
-            data = {number: value, type: 3}
+            data = { number: value, type: 3 }
             break
           case 4: // 4季度
-            data = {number: value, type: 4}
+            data = { number: value, type: 4 }
             break
           default:
-            data = {number: value}
+            data = { number: value }
             break
         }
         this.$api.invest
-            .savePlan(
-                Object.assign(
-                    {
-                      deptId: this.deptId === null ? '' : this.deptId,
-                      year: this.year === null ? '' : this.year
-                    },
-                    data
-                )
+          .savePlan(
+            Object.assign(
+              {
+                deptId: this.deptId === null ? '' : this.deptId,
+                year: this.year === null ? '' : this.year
+              },
+              data
             )
-            .then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.msg)
-                this.info[item.prop] = value
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
+          )
+          .then(res => {
+            if (res.code === 200) {
+              this.$message.success(res.msg)
+              this.info[item.prop] = value
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
       })
     }
   }
@@ -266,7 +266,7 @@ export default {
 }
 
 .progress-bar {
-  width: 240px;
+  width: 60%;
   height: 10px;
   background: white;
   border-radius: 10px;

src/views/invest/index.vue

@@ -28,7 +28,7 @@
           </div>
         </basic-container>
         <basic-container>
-          <div class="flex">
+          <div class="flex query-screen">
             <div
               class="flex-child-average full-width flex flex-col flex-justify-start"
             >
@@ -60,7 +60,6 @@
                   :year="year"
                 />
               </div>
-
               <span class="font-16 bold full-width text-left mt-20"
                 >项目入库统计 单位（个）</span
               >
@@ -193,4 +192,10 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+@media (max-width: 1440px) {
+  .query-screen {
+    flex-direction: column;
+  }
+}
+</style>