添加新看板

src/api/board/cs4.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+// 查询产量
+export function getWhiteBoardProdDetails(query) {
+  return request({
+    url: '/mes/wcsInterface/getWhiteBoardProdDetails',
+    method: 'post',
+    data: query,
+    header:{
+      PoolName:'ds_999'
+    }
+  });
+}

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register','/cs4']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -33,6 +33,7 @@ export const constantRoutes = [
   {path: '/cs', component: () => import('@/views/cs/index.vue')},
   {path: '/cs2', component: () => import('@/views/cs/index2.vue')},
   {path: '/cs3', component: () => import('@/views/cs/index3.vue')},
+  {path: '/cs4', component: () => import('@/views/cs/index4.vue')},
   {path: '/cs3_1', component: () => import('@/views/cs/index3_1.vue')},
   {
     path: '/redirect',

src/views/cs/index3.vue

@@ -80,7 +80,7 @@
             </div>
             <div
               class="scrollTable" style="color:#49b2fc">
-             40KWh
+              40KWh
             </div>
             <div
               class="scrollTable" style="color:#49b2fc">
@@ -170,7 +170,7 @@ export default {
             }
           },
           xAxis: {
-            data:data.map(v => v.equipment_code),
+            data: data.map(v => v.equipment_code),
             axisLine: {
               show: true, //隐藏X轴轴线
               lineStyle: {

src/views/cs/index4.vue

@@ -0,0 +1,438 @@
+<template>
+  <div class="bg">
+
+    <div :class="`menu`" style="left: 2%">
+      <el-dropdown trigger="click" @command="dropdownLink">
+                    <span class="el-dropdown-link">
+                        {{ type }} <i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+        <el-dropdown-menu slot="dropdown">
+          <div class="topNavScroll"
+               style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
+
+            <el-dropdown-item command="成型">
+                <span style="color: #f8fefd">
+                  成型
+                </span>
+            </el-dropdown-item>
+            <el-dropdown-item command="收坯">
+                <span style="color: #f8fefd">
+                  收坯
+                </span>
+            </el-dropdown-item>
+          </div>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div :class="`menu`" style="left: 9%">
+      <el-dropdown trigger="click" @command="dropdownLink1">
+                    <span class="el-dropdown-link">
+                        {{ bz }} <i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+        <el-dropdown-menu slot="dropdown">
+          <div class="topNavScroll"
+               style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
+
+            <el-dropdown-item command="白班">
+                <span style="color: #f8fefd">
+                  白班
+                </span>
+            </el-dropdown-item>
+            <el-dropdown-item command="夜班">
+                <span style="color: #f8fefd">
+                  夜班
+                </span>
+            </el-dropdown-item>
+          </div>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="title">{{ type }}工序生产信息</div>
+    <div class="subTitle" style="top: 15.2%;  left: 2.7%;">{{ type }}计划与实际</div>
+    <div class="subTitle" style="top: 15.2%;  left: 51.4%;">{{ type }}机信息</div>
+    <Chart ref="chart1" class="chart1"></Chart>
+    <div class="table1">
+      <div v-for="ii in groupByCount(list)">
+        <div v-for="i in ii" class="item">
+          <div class="itemTitle">{{ type }}{{ i.equipmentCode }}</div>
+          <div class="info1">运行状态：</div>
+          <div class="info1-1" :style="`color:${getColor(1)}`">{{ i.completed_count >0?'运行中':'已暂停' }}</div>
+          <div class="info2">订单号：<span style="width: 100%;display: inline-block"></span></div>
+          <div class="info2-1">{{ i.workorder_code }}</div>
+          <div class="info3">产品名称：</div>
+          <div class="info3-1">{{ i.product_name }}</div>
+          <div class="info4">完成数量：</div>
+          <div class="info4-1">{{ i.completed_count }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import Chart from "@/components/Charts/Chart";
+import * as echarts from 'echarts'
+import {getWhiteBoardProdDetails} from "../../api/board/cs4";
+
+export default {
+  components: {
+    Chart,
+  },
+  data() {
+    return {
+      list:[],
+      type: '成型',
+      bz: '白班',
+      equipmentCode: 'C',
+      shiftId: '5'
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getColor(e) {
+      if (e === 1) {
+        return '#77d75b'
+      }
+    },
+    getData() {
+      getWhiteBoardProdDetails({
+        shiftId:this.shiftId,
+        equipmentCode:this.equipmentCode
+      }).then((e) => {
+        console.log(e)
+        this.list = e.data.splist
+        this.$refs.chart1.setData({
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+            },
+          },
+          grid: {
+            left: "2%",
+            right: "4%",
+            bottom: "5%",
+            top: "10%",
+            containLabel: true,
+          },
+          legend: {
+            top: '2%',
+            x: 'center',
+            textStyle: {
+              color: "#fff",
+            },
+            itemWidth: 12,
+            itemHeight: 10,
+            // itemGap: 35
+          },
+          xAxis: {
+            type: "category",
+            data: e.data.cxlist.map(v=>v.workorder_code),
+
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: "#9996",
+              },
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: "Microsoft YaHei",
+              },
+            },
+          },
+
+          yAxis: {
+            type: "value",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: "#9996",
+              },
+            },
+            axisLabel: {},
+          },
+          series: [
+            {
+              name: "计划数量",
+              type: "bar",
+              showBackground: true,
+              backgroundStyle: {
+                color: '#fff1'
+              },
+              barGap: "0%",
+              barWidth: "30%",
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#01a5fe",
+                    },
+                    {
+                      offset: 1,
+                      color: "#0057ff",
+                    },
+                  ]),
+                },
+              },
+              data: e.data.cxlist.map(v=>v.plan_number),
+            },
+            {
+              name: "完成数量",
+              type: "bar",
+              barGap: "30%",
+              showBackground: true,
+              backgroundStyle: {
+                color: '#fff1'
+              },
+              barWidth: "30%",
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#19fdb4",
+                    },
+                    {
+                      offset: 1,
+                      color: "#0abb62",
+                    },
+                  ]),
+                },
+              },
+              data: e.data.cxlist.map(v=>v.completed_count),
+            },
+          ],
+        })
+      })
+    },
+    groupByCount(array) {
+      let result = [];
+      for (let i = 0; i < array.length; i += 3) {
+        result.push(array.slice(i, i + 3));
+      }
+      return result;
+    },
+
+    dropdownLink(e) {
+      this.type = e
+      if (e === '成型') {
+        this.equipmentCode = 'C'
+      }
+      if (e === '收坯') {
+        this.equipmentCode = 'S'
+      }
+      this.getData()
+    },
+    dropdownLink1(e) {
+      this.bz = e
+      if (e === '白班') {
+        this.shiftId = '5'
+      }
+      if (e === '夜班') {
+        this.shiftId = '2'
+      }
+      this.getData()
+    },
+  },
+
+}
+</script>
+<style scoped lang="less">
+
+.el-dropdown-menu {
+  padding: 0 !important;
+  border: none !important;
+}
+
+.menu {
+  background-image: url("~@/assets/board/cs3/subheadClick1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 8vw;
+  height: 1.66vw;
+  top: 8.5%;
+  line-height: 1.66vw;
+  font-size: 0.8vw;
+  color: #d4d4d4;
+  text-align: center;
+
+  /deep/ .el-dropdown {
+    color: #fff;
+  }
+}
+
+.bg {
+  background-image: url("~@/assets/board/cs3/bg2.jpg");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  position: absolute;
+  top: 3%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 2vw;
+  color: #fff;
+  letter-spacing: 2px;
+  transform: translateY(-50%);
+}
+
+.subTitle {
+  position: absolute;
+  color: #fff;
+  transform: translateY(-50%);
+  font-size: 1vw;
+}
+
+.chart1 {
+  position: absolute;
+  top: 18%;
+  left: 2.2%;
+  width: 46.9%;
+  height: 78%;
+}
+
+.table1 {
+  position: absolute;
+  top: 18%;
+  left: 50.9%;
+  width: 46.9%;
+  height: 78%;
+  overflow: auto;
+}
+
+.table1::-webkit-scrollbar {
+  display: inline-block;
+}
+
+.item {
+  width: 30%;
+  margin: 1.5%;
+  height: 13.1vw;
+  display: inline-block;
+  background-image: url("~@/assets/board/cs3/bg3.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.itemTitle {
+  position: absolute;
+  top: 13.5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1vw;
+  color: #f8f7f4;
+}
+
+.info1 {
+  position: absolute;
+  top: 33.7%;
+  left: 7%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  color: #028cf1;
+  letter-spacing: 1px;
+}
+
+.info1-1 {
+  position: absolute;
+  top: 33.7%;
+  left: 39%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  letter-spacing: 1px;
+}
+
+.info2 {
+  position: absolute;
+  top: 54.5%;
+  left: 7%;
+  width: 30%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  color: #028cf1;
+  letter-spacing: 1px;
+  text-align: justify;
+}
+
+.info2-1 {
+  position: absolute;
+  top: 50.5%;
+  left: 37%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  letter-spacing: 1px;
+  color: #dbdde9;
+  white-space: nowrap;
+}
+
+.info3 {
+  position: absolute;
+  top: 66.7%;
+  left: 7%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  color: #028cf1;
+  letter-spacing: 1px;
+}
+
+.info3-1 {
+  position: absolute;
+  top: 66.7%;
+  left: 37%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  letter-spacing: 1px;
+  color: #dbdde9;
+}
+
+.info4 {
+  position: absolute;
+  top: 83.7%;
+  left: 7%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  color: #028cf1;
+  letter-spacing: 1px;
+}
+
+.info4-1 {
+  position: absolute;
+  top: 83.7%;
+  left: 37%;
+  font-size: 0.8vw;
+  transform: translateY(-50%);
+  letter-spacing: 1px;
+  color: #dbdde9;
+}
+</style>