用户中心

pages/home/component/materielChart.vue

 <template>
-  <div class="stachart">
-    <div :gutter="16" class="row_head">
+  <div class="stachart"  :style="setStatistics?{width:'620px',height:'300px'}:{width:'100%',height:'100%'}">
+    <div :gutter="16" class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">物料相关统计</span>
     </div>
@@ -24,6 +24,9 @@ export default {
   components: {
     "v-chart": ECharts,
   },
+  props: {
+    setStatistics: Boolean,
+  },
   data() {
     return {
       value2: "",
@@ -198,7 +201,7 @@ export default {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;
-  width: 100%;
+   margin: 0 auto;
   .echarts-map {
     width: 100%;
     height: 300px;

pages/home/component/staChart.vue

@@ -2,16 +2,19 @@
   <div class="stachart">
     <Row :gutter="16">
       <Col :span="8" style="padding-right:50px;">
-        <div class="row_head">
+        <div class="row_head" v-if="setStatistics?false:true">
           <Icon type="ios-images" class="f20" />
           <span class="ml10">年度计划各产品类型总数量和各状态数量</span>
         </div>
         <div class="echarts-map">
-          <v-chart :options="braking" />
+          <v-chart
+            :options="braking"
+            :style="setStatistics?{width:'350px',height:'300px'}:{width:'100%',height:'100%'}"
+          />
         </div>
       </Col>
       <Col :span="16" style="padding-right:20px;">
-        <Row :gutter="16" class="row_head">
+        <Row :gutter="16" class="row_head" v-if="setStatistics?false:true">
           <Col span="7">
             <Icon type="ios-images" class="f20" />
             <span class="ml10">各车间计划执行状态的详细情况</span>
@@ -29,7 +32,10 @@
           </Col>
         </Row>
         <div class="echarts-map">
-          <v-chart :options="braking1" />
+          <v-chart
+            :options="braking1"
+            :style="setStatistics?{width:'800px',height:'300px'}:{width:'100%',height:'100%'}"
+          />
         </div>
       </Col>
     </Row>
@@ -50,6 +56,9 @@ export default {
   components: {
     "v-chart": ECharts,
   },
+  props: {
+    setStatistics: Boolean,
+  },
   data() {
     return {
       value2: "",
@@ -57,6 +66,7 @@ export default {
       braking1: {},
     };
   },
+  created() {},
   mounted() {
     this.statistics();
     this.statistics1();
@@ -183,7 +193,7 @@ export default {
               ],
               type: "bar",
               barWidth: 10, //柱图宽度
-              barGap: "-20%", //柱图间距
+              barGap: "10%", //柱图间距
             },
           ],
         };
@@ -313,12 +323,16 @@ export default {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;
-
   .echarts-map {
     width: 100%;
     height: 300px;
     .echarts {
-      height: 300px;
+      width: 100%;
+      height: 100%;
+      div {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
   .row_head {

pages/home/component/suspendChart.vue

 <template>
-  <div class="stachart">
-    <div class="row_head">
+  <div class="stachart"  :style="setStatistics?{width:'620px',height:'300px'}:{width:'100%',height:'100%'}">
+    <div class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">暂停任务统计</span>
     </div>
     <div class="echarts-map">
-      <v-chart :options="braking"  />
+      <v-chart :options="braking" />
     </div>
   </div>
 </template>
@@ -24,6 +24,9 @@ export default {
   components: {
     "v-chart": ECharts,
   },
+  props: {
+    setStatistics: Boolean,
+  },
   data() {
     return {
       value2: "",
@@ -190,7 +193,8 @@ export default {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;
-  width: 100%;
+  margin: 0 auto;
+
   .echarts-map {
     width: 100%;
     height: 300px;

pages/home/component/unqualifiedEcharts.vue

 <template>
   <div class="stachart">
-    <div :gutter="16" class="row_head">
+    <div :gutter="16" class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">不合格品审理单统计</span>
     </div>
     <Row :gutter="16">
       <Col :span="8" style="padding-right:50px;">
         <div class="echarts-map">
-          <v-chart :options="braking" />
+          <v-chart
+            :options="braking"
+            :style="setStatistics?{width:'400px',height:'300px'}:{width:'100%',height:'100%'}"
+          />
         </div>
       </Col>
       <Col :span="16">
@@ -33,6 +36,9 @@ export default {
   components: {
     "v-chart": ECharts,
   },
+  props: {
+    setStatistics: Boolean,
+  },
   data() {
     return {
       value2: "",
@@ -111,7 +117,7 @@ export default {
         },
         legend: {
           orient: "vertical",
-          right: 10,
+          right: 0,
           bottom: 10,
           data: ["一车间", "三车间", "五车间", "六车间"],
         },
@@ -194,8 +200,8 @@ export default {
       text-align: right;
     }
   }
-  .table-b{
-    margin-top:10px;
+  .table-b {
+    margin-top: 10px;
   }
 }
 </style>
\ No newline at end of file

pages/home/component/workChart.vue

 <template>
-  <div class="stachart">
-    <div :gutter="16" class="row_head">
+  <div
+    class="stachart"
+    :style="setStatistics?{width:'620px',height:'300px'}:{width:'100%',height:'100%'}"
+  >
+    <div :gutter="16" class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />
       <span class="ml10">工单任务状态分布</span>
     </div>
     <div class="echarts-map">
-      <v-chart :options="braking"/>
+      <v-chart :options="braking" />
     </div>
   </div>
 </template>
@@ -24,6 +27,9 @@ export default {
   components: {
     "v-chart": ECharts,
   },
+  props: {
+    setStatistics: Boolean,
+  },
   data() {
     return {
       value2: "",
@@ -292,10 +298,13 @@ export default {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
   border-radius: 8px;
   padding: 10px;
-  width: 100%;
+  
+  margin: 0 auto;
   .echarts-map {
     width: 100%;
     height: 300px;
+    // margin: 0 auto;
+    // text-align: center;
     .echarts {
       height: 280px;
     }

pages/home/index.vue

@@ -55,49 +55,74 @@
         <UnreadMessage />
       </Col>
     </Row>
-    <div class="table title-r">
-      <a class="a-r" @click="set">
+    <div class="table title-r" v-if="show">
+      <a class="a-r" @click="set(show)">
         <Icon type="md-settings" class="f20" />
       </a>
       <StaChart />
     </div>
-    <div class="table title-r">
+    <div class="table title-r" v-if="show1">
       <a class="a-r" @click="set">
         <Icon type="md-settings" class="f20" />
       </a>
       <UnqualifiedEcharts />
     </div>
     <Row class="table title-r" :gutter="16">
-      <Col :span="8" class="title-r">
-        <a class="a-r" @click="set">
+      <Col :span="8" class="title-r" v-if="show2">
+        <a class="a-r" @click="set(show2)">
           <Icon type="md-settings" class="f20" />
         </a>
         <WorkChart />
       </Col>
-      <Col :span="8" class="title-r">
+      <Col :span="8" class="title-r" v-if="show3">
         <a class="a-r" @click="set">
           <Icon type="md-settings" class="f20" />
         </a>
         <SuspendChart />
       </Col>
-      <Col :span="8" class="title-r">
+      <Col :span="8" class="title-r" v-if="show4">
         <a class="a-r" @click="set">
           <Icon type="md-settings" class="f20" />
         </a>
         <MaterielChart />
       </Col>
     </Row>
-    <Modal v-model="modal1" title="统计列表显示设置"  width="1300" footer-hide>
-      <Divider>生产计划状态监控</Divider>
-      <StaChart />
-      <Divider>不合格品审理单统计</Divider>
-      <UnqualifiedEcharts />
-      <Divider>班组工单监控</Divider>
-      <WorkChart />
-      <Divider>暂停任务统计</Divider>
-      <SuspendChart />
-      <Divider>物料相关统计</Divider>
-      <MaterielChart />
+    <Modal v-model="modal1" title="统计列表显示设置" width="1300" footer-hide>
+      <Divider>
+        <span style="color: #2680eb;">
+          生产计划状态监控
+          <Icon :type="show?'md-eye':'md-eye-off'" @click="clickEye" />
+        </span>
+      </Divider>
+      <StaChart :setStatistics="setStatistics" />
+      <Divider>
+        <span style="color: #2680eb;">
+          不合格品审理单统计
+          <Icon :type="show1?'md-eye':'md-eye-off'" @click="clickEye1" />
+        </span>
+      </Divider>
+      <UnqualifiedEcharts :setStatistics="setStatistics" />
+      <Divider>
+        <span style="color: #2680eb;">
+          班组工单监控
+          <Icon :type="show2?'md-eye':'md-eye-off'" @click="clickEye2" />
+        </span>
+      </Divider>
+      <WorkChart :setStatistics="setStatistics" />
+      <Divider>
+        <span style="color: #2680eb;">
+          暂停任务统计
+          <Icon :type="show3?'md-eye':'md-eye-off'" @click="clickEye3" />
+        </span>
+      </Divider>
+      <SuspendChart :setStatistics="setStatistics" />
+      <Divider>
+        <span style="color: #2680eb;">
+          物料相关统计
+          <Icon :type="show4?'md-eye':'md-eye-off'" @click="clickEye4" />
+        </span>
+      </Divider>
+      <MaterielChart :setStatistics="setStatistics" />
     </Modal>
   </div>
 </template>
@@ -131,6 +156,13 @@ export default {
       userData: {},
       avatorPath: "",
       imgPath: true,
+      setStatistics: true,
+
+      show: true,
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
     };
   },
   async fetch({ store, params }) {
@@ -189,13 +221,23 @@ export default {
     },
     set() {
       this.modal1 = true;
+      this.setStatistics = true;
+    },
+    clickEye() {
+      this.show = !this.show;
+    },
+    clickEye1() {
+      this.show1 = !this.show1;
+    },
+    clickEye2() {
+      this.show2 = !this.show2;
+    },
+    clickEye3() {
+      this.show3 = !this.show3;
+    },
+    clickEye4() {
+      this.show4 = !this.show4;
     },
-    // ok() {
-    //   this.$Message.info("Clicked ok");
-    // },
-    // cancel() {
-    //   this.$Message.info("Clicked cancel");
-    // },
   },
 };
 </script>
@@ -330,12 +372,17 @@ export default {
   }
   .title-r {
     position: relative;
+    // .echart-c {
+    //  width: 600px;
+    //  margin: auto;
+
+    // }
   }
   .a-r {
     position: absolute;
     top: 15px;
     right: 15px;
-    z-index: 9999;
+    z-index: 100;
   }
   .set-p {
     width: 100%;
@@ -343,4 +390,4 @@ export default {
     // text-align: center;
   }
 }
-</style>
+</style>
\ No newline at end of file