Merge branch 'product' of git.mes123.com:zhouyx/mes-ui into product

layouts/basic-layout/product.vue

@@ -363,6 +363,10 @@ export default {
     },
     shoucang() {
       if (this.showStar) {
+        this.$Modal.confirm({
+          title: "取消收藏",
+          content: "<p>您确定要取消收藏吗</p>",
+          onOk: () => {
             let url = `${systemUrl}/favorite/delete`;
             let menuId = [];
             menuId.push(this.menuId);
@@ -373,6 +377,11 @@ export default {
                 this.content = "收藏";
               }
             });
+          },
+          onCancel: () => {
+            // this.$Message.info("Clicked cancel");
+          },
+        });
       } else {
         let url = `${systemUrl}/favorite/create`;
         this.$api.post(url, { menuId: this.menuId }).then((r) => {

pages/home/component/materielChart.vue

 <template>
-  <div class="stachart"  :style="setStatistics?{width:'620px',height:'300px'}:{width:'100%',height:'100%'}">
+  <div class="stachart">
     <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" style="width:'100%',height:'100%'" />
     </div>
   </div>
 </template>

pages/home/component/staChart.vue

@@ -7,10 +7,8 @@
           <span class="ml10">年度计划各产品类型总数量和各状态数量</span>
         </div>
         <div class="echarts-map">
-          <v-chart
-            :options="braking"
-            :style="setStatistics?{width:'400px',height:'270px'}:{width:'100%',height:'100%'}"
-          />
+          <!-- :style="setStatistics?{width:'400px',height:'270px'}:{width:'100%',height:'100%'}" -->
+          <v-chart :options="braking" style="width:'100%',height:'100%'" />
         </div>
       </Col>
       <Col :span="16" style="padding-right:20px;">

pages/home/component/suspendChart.vue

 <template>
   <div
     class="stachart"
-    :style="setStatistics?{width:'620px',height:'280px'}:{width:'100%',height:'100%'}"
+   style="width:'100%',height:'100%'"
   >
     <div class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />

pages/home/component/unqualifiedEcharts.vue

@@ -7,10 +7,7 @@
     <Row :gutter="16">
       <Col :span="8" style="padding-right:50px;">
         <div class="echarts-map">
-          <v-chart
-            :options="braking"
-            :style="setStatistics?{width:'380px',height:'280px'}:{width:'100%',height:'100%'}"
-          />
+          <v-chart :options="braking" style="width:'100%',height:'100%'" />
         </div>
       </Col>
       <Col :span="16">

pages/home/component/workChart.vue

 <template>
   <div
     class="stachart"
-    :style="setStatistics?{width:'620px',height:'280px'}:{width:'100%',height:'100%'}"
+    style="width:'100%',height:'100%'"
   >
     <div :gutter="16" class="row_head" v-if="setStatistics?false:true">
       <Icon type="ios-images" class="f20" />

pages/home/index.vue

@@ -13,25 +13,27 @@
         </p>
       </div>
       <div class="incon-carousel">
-        <div class="bg-b">
-          <Icon type="ios-arrow-back" />
-        </div>
-
+        <Icon type="ios-arrow-back" class="bg-b" @click="clickLeft" :class="num1<0?'bg-b1':'bg-b'" />
+        <div
+          class="list-shoucang"
+          :style="{'margin-left': num1 * 230 + 'px','transition': 'all .3s ease-out .1s',}"
+        >
           <div class="bg" v-for="(item,i) in collect" :key="i" @click="toPage(item)">
             <Icon :type="item.icon||'md-mail'" />
             <p>{{item.title}}</p>
           </div>
-
-        <div class="bg-l">
-          <Icon type="ios-arrow-forward" />
         </div>
+        <Icon
+          type="ios-arrow-forward"
+          class="bg-l"
+          @click="clickRight"
+          :class="collect.length>8 && showIcon ?'bg-l1':'bg-l'"
+        />
       </div>
     </div>
     <div class="card-list">
-      <!-- <div class="bg-b"> -->
-      <Icon type="ios-arrow-back" class="bg-b" />
-      <!-- </div> -->
-      <div class="list-c">
+      <Icon type="ios-arrow-back" @click="leftmove" :class="shuliang<=5?'bg-b1':'bg-b'" />
+      <div class="list-c" :style="{width:'98%','margin-left': num * 740 + 'px',}">
         <div
           v-for="(item,index) in listTask"
           :key="index"
@@ -47,9 +49,7 @@
           </div>
         </div>
       </div>
-      <!-- <div class="bg-l"> -->
-      <Icon type="ios-arrow-forward" class="bg-l" />
-      <!-- </div> -->
+      <Icon type="ios-arrow-forward" :class="shuliang>5?'bg-l1':'bg-l'" @click="rightmove" />
     </div>
     <Row class="table" :gutter="16">
       <Col :span="15">
@@ -91,49 +91,51 @@
         <MaterielChart />
       </Col>
     </Row>
-    <Modal v-model="modal1" title="统计列表显示设置" width="1200" footer-hide>
+    <Modal v-model="modal1" title="统计列表显示设置" width="900" footer-hide>
       <Divider>
         <span style="color: #2680eb;">
           生产计划状态监控
           <Icon :type="show?'md-eye':'md-eye-off'" @click="clickEye" />
         </span>
       </Divider>
-      <StaChart :setStatistics="setStatistics" />
-      <div class="divider-t">
+      <div class="set-img">
+        <img src="@/assets/images/home/user-img1.png" style="width:630px;height:165px" />
+      </div>
       <Divider>
         <span style="color: #2680eb;">
           不合格品审理单统计
           <Icon :type="show1?'md-eye':'md-eye-off'" @click="clickEye1" />
         </span>
       </Divider>
-        <UnqualifiedEcharts :setStatistics="setStatistics" />
+      <div class="set-img">
+        <img src="@/assets/images/home/user-img2.png" style="width:630px;height:165px" />
       </div>
-      <div class="divider-t">
       <Divider>
         <span style="color: #2680eb;">
           班组工单监控
           <Icon :type="show2?'md-eye':'md-eye-off'" @click="clickEye2" />
         </span>
       </Divider>
-        <WorkChart :setStatistics="setStatistics" />
+      <div class="set-img">
+        <img src="@/assets/images/home/user-img3.png" style="width:310px;height:165px" />
       </div>
-      <div class="divider-t">
       <Divider>
         <span style="color: #2680eb;">
           暂停任务统计
           <Icon :type="show3?'md-eye':'md-eye-off'" @click="clickEye3" />
         </span>
       </Divider>
-        <SuspendChart :setStatistics="setStatistics" />
+      <div class="set-img">
+        <img src="@/assets/images/home/user-img4.png" style="width:310px;height:165px" />
       </div>
-      <div class="divider-t">
       <Divider>
         <span style="color: #2680eb;">
           物料相关统计
           <Icon :type="show4?'md-eye':'md-eye-off'" @click="clickEye4" />
         </span>
       </Divider>
-        <MaterielChart :setStatistics="setStatistics" />
+      <div class="set-img">
+        <img src="@/assets/images/home/user-img5.png" style="width:310px;height:165px" />
       </div>
     </Modal>
   </div>
@@ -169,12 +171,19 @@ export default {
       avatorPath: "",
       imgPath: true,
       setStatistics: true,
-
       show: true,
       show1: false,
       show2: false,
       show3: false,
       show4: false,
+      num: 0,
+      num1: 0,
+      shuliang: 0,
+      showIcon: true,
+      // listdatas: [],
+      // index: 0,
+      // collectNum: this.$store.state.collect.length,
+      // collectNum1: this.$store.state.collect.length,
     };
   },
   async fetch({ store, params }) {
@@ -183,13 +192,64 @@ export default {
   created() {
     this.get();
     this.getUserInfoFn();
-    console.log(this.$store.state.collect);
+    this.listdatas = this.collect;
+    // console.log(this.$store.state.collect);
     //  this.getList();
   },
   computed: {
     ...mapState({ collect: "collect" }),
+    // newList() {
+    //   var arr = [];
+    //   let data = this.listdatas;
+    //   arr = data.slice(0, 8);
+    //   return arr;
+    // },
   },
   methods: {
+    clickLeft() {
+      if (this.num1 < 0) {
+        this.num1 += 1;
+      }
+      alert(this.num1);
+    },
+    clickRight() {
+      alert("----:" + this.num1);
+      alert("----:" + this.collect.length);
+      if (this.num1 + this.collect.length > 8) {
+        this.num1 -= 1;
+
+        // if (this.num1 + this.collect.length == 8) {
+        //   this.showIcon = true;
+        //   return false;
+        // }
+        // } else if (
+        //   this.num1 < -(this.collect.length + this.num1) &&
+        //   -(this.collect.length + this.num1) != -0
+        // ) {
+        // if (this.num1 + this.collect.length == 8) {
+        //   this.showIcon = true;
+        //   return false;
+        // }
+        alert("-====:" + this.num1);
+      } else {
+        this.showIcon = false;
+      }
+      alert(this.num1);
+    },
+    leftmove() {
+      if (this.shuliang <= 5) {
+        if (this.num < 0) {
+          this.num += 1;
+          this.shuliang += 1;
+        }
+      }
+    },
+    rightmove() {
+      if (this.shuliang > 5) {
+        this.num -= 1;
+        this.shuliang -= 1;
+      }
+    },
     getUserInfoFn() {
       let userId = this.$store.state.userInfo.userId;
       Api.getUserInfo({ id: userId }).then((res) => {
@@ -213,7 +273,7 @@ export default {
       this.$api.get(url).then((r) => {
         list = r.result;
         list.forEach((data) => {
-          console.log(data.totalUrl);
+          // console.log(data.totalUrl);
           let ulrt = `http://${address}:` + data.totalUrl;
           data.totalUrl = 0;
           this.$api.get(ulrt).then((r) => {
@@ -221,6 +281,7 @@ export default {
           });
         });
         this.listTask = list;
+        this.shuliang = this.listTask.length;
       });
     },
     goPage(u) {
@@ -263,40 +324,71 @@ export default {
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
     border-radius: 8px;
+    display: flex;
+    display: -webkit-flex;
     .img-header {
       margin-top: -10px;
-      float: left;
     }
     .ivu-avatar > img {
       width: 100%;
       height: 100%;
     }
     .user-text {
-      float: left;
+      width: 43%;
       p {
         margin: 10px 20px;
       }
     }
     .incon-carousel {
-      float: right;
-      //   margin-top: 8px;
-      width: 800px;
+      width: 980px;
+      position: relative;
+      text-align: center;
       .bg-b {
-        float: left;
         margin-top: 10px;
         font-size: 30px;
         color: #dcdfe6;
+        position: absolute;
+        top: 13px;
+        left: 0;
+      }
+      .bg-b1 {
+        margin-top: 10px;
+        font-size: 30px;
+        color: #a7b8cc;
+        cursor: pointer;
+        position: absolute;
+        top: 13px;
+        left: 0;
       }
       .bg-l {
         float: right;
         margin-top: 10px;
         font-size: 30px;
         color: #dcdfe6;
+        position: absolute;
+        top: 13px;
+        right: 0;
+      }
+      .bg-l1 {
+        float: right;
+        margin-top: 10px;
+        font-size: 30px;
+        color: #a7b8cc;
+        cursor: pointer;
+        position: absolute;
+        top: 13px;
+        right: 0;
+      }
+      .list-shoucang {
+        width: 960px;
+        display: -webkit-inline-box;
+        display: inline-box;
+        transition: margin-left 1s;
       }
       .bg {
         text-align: center;
         width: 120px;
-        float: left;
+
         .ivu-icon {
           font-size: 35px;
           color: #2680eb;
@@ -320,14 +412,20 @@ export default {
       top: 45px;
       left: 0;
     }
+    .bg-b1 {
+      font-size: 30px;
+      color: #a7b8cc;
+      width: 35px;
+      position: absolute;
+      top: 45px;
+      left: 0;
+      cursor: pointer;
+    }
     .list-c {
-      // display: flex;
-      // display: -webkit-flex;
-      // justify-content: space-around;
-      width: 98%;
+      transition: margin-left 1s;
       margin: 0 auto;
       display: -webkit-inline-box;
-      overflow-x: hidden;
+      display: inline-box;
     }
     .bg-l {
       position: absolute;
@@ -337,6 +435,15 @@ export default {
       right: 0;
       width: 35px;
     }
+    .bg-l1 {
+      position: absolute;
+      font-size: 30px;
+      color: #a7b8cc;
+      top: 45px;
+      right: 0;
+      width: 35px;
+      cursor: pointer;
+    }
     .img_bg01 {
       background-color: #ff9100;
       width: 290px;
@@ -412,7 +519,9 @@ export default {
     margin: 0 auto;
   }
 }
-.divider-t {
-  padding-top: 25px;
+.set-img {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 25px;
 }
 </style>