设备产量看板-增加班次查询

src/api/kanban/dailyoutput.js

@@ -16,3 +16,11 @@ export function getMesBoardEquProductionToday(data) {
 		data: data
 	});
 }
+// 获取班次
+export function getBoardShifts(data) {
+	return request({
+		url: '/mes/wcsInterface/getBoardShifts',
+		method: 'post',
+		data: data
+	});
+}

src/views/kanban/dailyoutput/index.vue

@@ -19,7 +19,11 @@
       <div class="content-top">
         <div class="factory">
           <div class="selectborder">
-          <select v-model="selectxt" @change="selectline(selectxt)">
+            <select
+              v-model="selectxt"
+              class="select1"
+              @change="selectline(selectxt)"
+            >
               <option
                 :key="index"
                 :value="x.parentName"
@@ -30,6 +34,22 @@
               <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
             </select>
           </div>
+          <div class="selectborder selectborder1">
+            <select
+              v-model="selectxtclasses"
+              class="select1"
+              @change="selectline2(selectxtclasses)"
+            >
+              <option
+                :key="index"
+                :value="x.shiftId"
+                v-for="(x, index) in classesList"
+              >
+                {{ x.shiftDesc }}
+              </option>
+              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
+            </select>
+          </div>
         </div>
         <div class="timebox">
           <div class="time">
@@ -162,6 +182,7 @@
 import {
   getBoardFactory,
   getMesBoardEquProductionToday,
+  getBoardShifts,
 } from "@/api/kanban/dailyoutput";
 import * as echarts from "echarts";
 import moment from "moment";
@@ -177,7 +198,9 @@ export default {
     return {
       gettimedata: "",
       selectxt: null,
+      selectxtclasses: null,
       getLineList: [],
+      classesList: [],
       number1: 0,
       number2: 0,
       number3: 0,
@@ -203,9 +226,9 @@ export default {
     };
   },
   created() {},
-  destroyed(){
+  destroyed() {
-    clearInterval(this.time1)
+    clearInterval(this.time1);
-    this.time1 = null
+    this.time1 = null;
   },
   mounted() {
     // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
@@ -224,19 +247,26 @@ export default {
       }, 1000);
     },
     selectFactorylist() {
+      const _this = this;
       getBoardFactory({
         factory: null,
       }).then((response) => {
         if (response.data) {
-          this.getLineList = response.data;
+          _this.getLineList = response.data;
-          this.selectxt = this.getLineList[0].parentName;
+          _this.selectxt = _this.getLineList[0].parentName;
-          this.initChart1();
+          getBoardShifts({
-          this.time1 = setInterval(() => {
+            factory: _this.selectxt,
-            this.initChart1();
+          }).then((response) => {
+            if (response.data) {
+              console.log(response.data);
+              _this.classesList = response.data;
+              _this.selectxtclasses = _this.classesList[0].shiftId;
+              _this.initChart1();
+              _this.time1 = setInterval(() => {
+                _this.initChart1();
               }, 1000 * 60 * 1);
-          // this.initChart2();
+            }
-          // this.initChart3();
+          });
-          // this.initChart4();
         }
       });
     },
@@ -346,6 +376,7 @@ export default {
       myChart1.setOption(option1);
       getMesBoardEquProductionToday({
         factory: _this.selectxt,
+        shiftId: _this.selectxtclasses,
         ymd: _this.datetime,
         equTypeCode: "equ_type_cxj",
       }).then((response) => {
@@ -578,6 +609,7 @@ export default {
       myChart2.setOption(option2);
       getMesBoardEquProductionToday({
         factory: _this.selectxt,
+        shiftId: _this.selectxtclasses,
         ymd: _this.datetime,
         equTypeCode: "equ_type_hf",
       }).then((response) => {
@@ -770,6 +802,7 @@ export default {
       myChart3.setOption(option3);
       getMesBoardEquProductionToday({
         factory: _this.selectxt,
+        shiftId: _this.selectxtclasses,
         ymd: _this.datetime,
         equTypeCode: "equ_type_spj",
       }).then((response) => {
@@ -963,6 +996,7 @@ export default {
       myChart4.setOption(option4);
       getMesBoardEquProductionToday({
         factory: _this.selectxt,
+        shiftId: _this.selectxtclasses,
         ymd: _this.datetime,
         equTypeCode: "equ_type_lg",
       }).then((response) => {
@@ -1052,613 +1086,54 @@ export default {
         }
       });
     },
-    initChart2() {
+    selectline() {
       const _this = this;
-      var myChart2 = echarts.init(document.querySelector("#echart2"));
+      this.optionDatalist1 = [];
-      var option2 = {
+      this.optionDatalist2 = [];
-        grid: {
+      this.optionDatalist3 = [];
-          left: "70",
+      this.optionDatalist4 = [];
-          right: "7%",
+      getBoardShifts({
-          top: "5%",
-          bottom: "1%",
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: "axis",
-          show: true,
-          axisPointer: {
-            type: "none",
-          },
-          formatter: function (e) {
-            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
-          },
-        },
-        xAxis: {
-          name: "辆",
-          // max: total,
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-          },
-          axisLabel: {
-            show: true,
-          },
-          axisTick: {
-            show: true,
-          },
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: false,
-            data: [],
-            axisLine: {
-              show: true,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-
-        series: [
-          {
-            type: "pictorialBar",
-            symbol: "rect",
-            // symbolRepeat: "fixed",
-            // symbolMargin: "2",
-            // symbolClip: true,
-            // symbolSize: [5, 20],
-            barWidth: 20,
-            data: [],
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "left",
-                distance: 10, //
-                show: true,
-              },
-            },
-            z: 10,
-          },
-          {
-            type: "bar",
-            itemStyle: {
-              color: "#141A27",
-            },
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "right",
-                distance: 10, //
-                show: true,
-              },
-            },
-            data: [], // value鍊<EFBFBD>
-            tooltip: {
-              show: false,
-            },
-            barWidth: 30,
-          },
-        ],
-      };
-      myChart2.setOption(option2);
-      getMesBoardEquProductionToday({
         factory: _this.selectxt,
-        ymd: _this.datetime,
-        equTypeCode: "equ_type_cxj",
       }).then((response) => {
-        if (response) {
         if (response.data) {
-            let numberlist = [];
+          console.log(response.data);
-            let dataoption = [];
+          _this.classesList = response.data;
-            let totalArr = [];
+          _this.selectxtclasses = _this.classesList[0].shiftId;
-            _this.optionDatalist2 = [];
+          _this.initChart1();
-            _this.number2 = response.data.totalNum[0].totalNum;
-            response.data.everyNum.forEach((item) => {
-              let a = {};
-              a.name = item.equName;
-              a.value = item.totalNum;
-              a.code = item.equCode;
-              _this.optionDatalist2.push(a);
-              dataoption.push(a);
-              numberlist.push(item.totalNum);
-            });
-            dataoption.sort((a, b) => {
-              return a.value - b.value;
-            });
-            let max = Math.max(...numberlist);
-            max = max + 100;
-            dataoption.forEach((item) => {
-              totalArr.push(max);
-            });
-            option2 = {
-              yAxis: [
-                {
-                  data: dataoption,
-                },
-              ],
-              series: [
-                {
-                  data: dataoption,
-                  itemStyle: {
-                    normal: {
-                      color: function (params) {
-                        var index_num = params.value;
-
-                        for (var i = 0; i < dataoption.length; i++) {
-                          //判断数据是否大于1
-                          if (index_num > 1131) {
-                            //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#FFB742" },
-                                { offset: 1, color: "#FFB742" },
-                              ]
-                            );
-                          } else {
-                            //var colorList = ['blue'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#005954" },
-                                { offset: 1, color: "#66E1DF" },
-                              ]
-                            );
         }
-                        }
+      });
-                      },
-                    },
     },
+    selectline2() {
+      this.initChart1();
     },
-                {
+    //左侧第一个选择类型下拉框 回调函数
-                  data: totalArr,
   },
-              ],
+};
-            };
+</script>
-            myChart2.setOption(option2);
+<style lang="scss" scoped>
-          }
+.app-container {
-        }
+  padding: 0px 24px;
-      });
+}
-    },
+.home {
-    initChart3() {
+  width: 100%;
-      const _this = this;
+  height: 100vh;
-      var myChart3 = echarts.init(document.querySelector("#echart3"));
+  background: url("../../../assets/images/bg-body.png") no-repeat;
-      var option3 = {
+  background-size: 100% 100%;
-        grid: {
+  background-color: #050711;
-          left: "70",
+  .head {
-          right: "7%",
+    width: 100%;
-          top: "5%",
+    height: 74px;
-          bottom: "1%",
+    position: relative;
-          containLabel: true,
+    .head-content {
-        },
+      height: 74px;
-        tooltip: {
+      background-image: url("../../../assets/images/bg-head.png");
-          trigger: "axis",
+      background-repeat: no-repeat;
-          show: true,
+      background-size: 100% 100%;
-          axisPointer: {
+      text-align: center;
-            type: "none",
+      .title {
-          },
+        font-size: 42px;
-          formatter: function (e) {
+        font-weight: 400;
-            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
+        color: #ffffff;
-          },
-        },
-        xAxis: {
-          name: "辆",
-          // max: total,
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-          },
-          axisLabel: {
-            show: true,
-          },
-          axisTick: {
-            show: true,
-          },
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: false,
-            data: [],
-            axisLine: {
-              show: true,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-
-        series: [
-          {
-            type: "pictorialBar",
-            symbol: "rect",
-            // symbolRepeat: "fixed",
-            // symbolMargin: "2",
-            // symbolClip: true,
-            // symbolSize: [5, 20],
-            barWidth: 20,
-            data: [],
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "left",
-                distance: 10, //
-                show: true,
-              },
-            },
-            z: 10,
-          },
-          {
-            type: "bar",
-            itemStyle: {
-              color: "#141A27",
-            },
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "right",
-                distance: 10, //
-                show: true,
-              },
-            },
-            data: [], // value鍊<EFBFBD>
-            tooltip: {
-              show: false,
-            },
-            barWidth: 30,
-          },
-        ],
-      };
-      myChart3.setOption(option3);
-      getMesBoardEquProductionToday({
-        factory: _this.selectxt,
-        ymd: _this.datetime,
-        equTypeCode: "equ_type_cxj",
-      }).then((response) => {
-        if (response) {
-          if (response.data) {
-            let numberlist = [];
-            let dataoption = [];
-            let totalArr = [];
-            _this.optionDatalist3 = [];
-            _this.number3 = response.data.totalNum[0].totalNum;
-            response.data.everyNum.forEach((item) => {
-              let a = {};
-              a.name = item.equName;
-              a.value = item.totalNum;
-              a.code = item.equCode;
-              _this.optionDatalist3.push(a);
-              dataoption.push(a);
-              numberlist.push(item.totalNum);
-            });
-            dataoption.sort((a, b) => {
-              return a.value - b.value;
-            });
-            let max = Math.max(...numberlist);
-            max = max + 100;
-            dataoption.forEach((item) => {
-              totalArr.push(max);
-            });
-            option3 = {
-              yAxis: [
-                {
-                  data: dataoption,
-                },
-              ],
-              series: [
-                {
-                  data: dataoption,
-                  itemStyle: {
-                    normal: {
-                      color: function (params) {
-                        var index_num = params.value;
-
-                        for (var i = 0; i < dataoption.length; i++) {
-                          //判断数据是否大于1
-                          if (index_num > 1131) {
-                            //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#FFB742" },
-                                { offset: 1, color: "#FFB742" },
-                              ]
-                            );
-                          } else {
-                            //var colorList = ['blue'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#005954" },
-                                { offset: 1, color: "#66E1DF" },
-                              ]
-                            );
-                          }
-                        }
-                      },
-                    },
-                  },
-                },
-                {
-                  data: totalArr,
-                },
-              ],
-            };
-            myChart3.setOption(option3);
-          }
-        }
-      });
-    },
-    initChart4() {
-      const _this = this;
-      var myChart4 = echarts.init(document.querySelector("#echart4"));
-      var option4 = {
-        grid: {
-          left: "70",
-          right: "7%",
-          top: "5%",
-          bottom: "1%",
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: "axis",
-          show: true,
-          axisPointer: {
-            type: "none",
-          },
-          formatter: function (e) {
-            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
-          },
-        },
-        xAxis: {
-          name: "辆",
-          // max: total,
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-          },
-          axisLabel: {
-            show: true,
-          },
-          axisTick: {
-            show: true,
-          },
-        },
-        yAxis: [
-          {
-            type: "category",
-            inverse: false,
-            data: [],
-            axisLine: {
-              show: true,
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-
-        series: [
-          {
-            type: "pictorialBar",
-            symbol: "rect",
-            // symbolRepeat: "fixed",
-            // symbolMargin: "2",
-            // symbolClip: true,
-            // symbolSize: [5, 20],
-            barWidth: 20,
-            data: [],
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "left",
-                distance: 10, //
-                show: true,
-              },
-            },
-            z: 10,
-          },
-          {
-            type: "bar",
-            itemStyle: {
-              color: "#141A27",
-            },
-            label: {
-              normal: {
-                formatter: "{b}",
-                textStyle: {
-                  color: "#D0DEEE",
-                  fontSize: 14,
-                },
-                position: "right",
-                distance: 10, //
-                show: true,
-              },
-            },
-            data: [], // value鍊<EFBFBD>
-            tooltip: {
-              show: false,
-            },
-            barWidth: 30,
-          },
-        ],
-      };
-      myChart4.setOption(option4);
-      getMesBoardEquProductionToday({
-        factory: _this.selectxt,
-        ymd: _this.datetime,
-        equTypeCode: "equ_type_cxj",
-      }).then((response) => {
-        if (response) {
-          if (response.data) {
-            let numberlist = [];
-            let dataoption = [];
-            let totalArr = [];
-            _this.optionDatalist4 = [];
-            _this.number4 = response.data.totalNum[0].totalNum;
-            response.data.everyNum.forEach((item) => {
-              let a = {};
-              a.name = item.equName;
-              a.value = item.totalNum;
-              a.code = item.equCode;
-              _this.optionDatalist4.push(a);
-              dataoption.push(a);
-              numberlist.push(item.totalNum);
-            });
-            dataoption.sort((a, b) => {
-              return a.value - b.value;
-            });
-            let max = Math.max(...numberlist);
-            max = max + 100;
-            dataoption.forEach((item) => {
-              totalArr.push(max);
-            });
-            option4 = {
-              yAxis: [
-                {
-                  data: dataoption,
-                },
-              ],
-              series: [
-                {
-                  data: dataoption,
-                  itemStyle: {
-                    normal: {
-                      color: function (params) {
-                        var index_num = params.value;
-
-                        for (var i = 0; i < dataoption.length; i++) {
-                          //判断数据是否大于1
-                          if (index_num > 1131) {
-                            //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#FFB742" },
-                                { offset: 1, color: "#FFB742" },
-                              ]
-                            );
-                          } else {
-                            //var colorList = ['blue'];
-                            //return colorList[params.dataIndex];
-                            return new echarts.graphic.LinearGradient(
-                              0,
-                              0,
-                              1,
-                              0,
-                              [
-                                { offset: 0, color: "#005954" },
-                                { offset: 1, color: "#66E1DF" },
-                              ]
-                            );
-                          }
-                        }
-                      },
-                    },
-                  },
-                },
-                {
-                  data: totalArr,
-                },
-              ],
-            };
-            myChart4.setOption(option4);
-          }
-        }
-      });
-    },
-    selectline() {
-      this.initChart1();
-      // this.initChart2();
-      // this.initChart3();
-      // this.initChart4();
-    },
-    //左侧第一个选择类型下拉框 回调函数
-  },
-};
-</script>
-<style lang="scss" scoped>
-.app-container {
-  padding: 0px 24px;
-}
-.home {
-  width: 100%;
-  height: 100vh;
-  background: url("../../../assets/images/bg-body.png") no-repeat;
-  background-size: 100% 100%;
-  background-color: #050711;
-  .head {
-    width: 100%;
-    height: 74px;
-    position: relative;
-    .head-content {
-      height: 74px;
-      background-image: url("../../../assets/images/bg-head.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      text-align: center;
-      .title {
-        font-size: 42px;
-        font-weight: 400;
-        color: #ffffff;
       }
     }
     .head-logo {
@@ -1763,15 +1238,31 @@ export default {
   //     left: 24px;
   //   }
 }
+.factory {
+  display: flex;
+  // justify-content: space-around;
+}
 .selectborder {
-  margin: auto;
-  width: 354px;
-  height: 50px;
   background-color: transparent;
   border-radius: 4px;
   // border: 2px solid #27408c;
   position: relative;
-  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 310px;
+  margin-left: 50px;
+}
+.selectborder1 {
+  background-color: transparent;
+  border-radius: 4px;
+  // border: 2px solid #27408c;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 88px;
+  margin-left: 25px;
 }
 .selectborder select {
   /*清除select的边框样式*/
@@ -1786,7 +1277,7 @@ export default {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  font-size: 28px;
+  font-size: 25px;
   font-weight: 400;
   color: #ffffff;
   line-height: 42px;
@@ -1805,7 +1296,26 @@ export default {
   -moz-appearance: none;
   appearance: none;
   padding-left: 20px;
-  font-size: 28px;
+  font-size: 25px;
+  font-weight: 500;
+  color: #3fa2ff;
+  border-radius: 0%;
+}
+.selectborder1 option {
+  /*清除select的边框样式*/
+  border: none;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+  background-color: transparent;
+  /*将select的宽高等于div的宽高*/
+  width: 200px;
+  height: 50px;
+  /*隐藏select的下拉图标*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-left: 20px;
+  font-size: 25px;
   font-weight: 500;
   color: #3fa2ff;
   border-radius: 0%;
@@ -1817,7 +1327,19 @@ export default {
   background: url(../../../assets/images/xiala.png) no-repeat center;
   /*通过定位将图标放在合适的位置*/
   position: absolute;
-  right: 15px;
+  right: 0px;
+  top: 25%;
+  /*给自定义的图标实现点击下来功能*/
+  pointer-events: none;
+}
+.selectborder1:after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background: url(../../../assets/images/xiala.png) no-repeat center;
+  /*通过定位将图标放在合适的位置*/
+  position: absolute;
+  right: 0px;
   top: 25%;
   /*给自定义的图标实现点击下来功能*/
   pointer-events: none;