添加生产进度看包

src/assets/scss/indexmakeprocess.scss

@@ -0,0 +1,149 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/bg3.jpg");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 26px;
+        position: absolute;
+        width: 400px;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #1a5cd7;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 20px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #1a5cd7;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+     /* .content-box {
+        display: grid;
+        grid-template-columns: 1.5fr 1.3fr 1.2fr;
+      }*/
+      .content-box {
+        display: grid;
+        grid-template-columns:  1.2fr 1.1fr 1fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+       // margin-top: 10px;
+        display: grid;
+        grid-template-columns: 1fr ;
+      }
+    }
+  }
+}

src/components/makeprocesschart/bottom1Chart/chart.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom1Chart"
+        height="265px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      timing :null,
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18
+          },
+          itemWidth: 29,
+          itemHeight: 19
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              fontSize: 16
+            }
+          },
+          {
+            type: 'value',
+            /*name: 'rate',*/
+            min: 0,
+            max: 100,
+            interval: 20,
+            nameTextStyle: {
+              fontSize: 20
+            },
+            axisLabel: {
+              formatter: '{value}%',
+              fontSize: 16
+            }
+          }
+
+        ],
+        series: [
+          {
+            name: '投入',
+            type: 'bar',
+            barWidth: 20,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+              //color:'#2d8cf0',
+            },
+          },
+          {
+            name: '产出',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+             // color:'#19be6b',
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 20,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },
+          },
+          {
+            name: 'UPPH',
+            type: 'bar',
+            barWidth: 20,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color: "#ea7ccc",
+            },
+          },
+          {
+            name: '良率%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            symbolSize: 4,
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            lineStyle: {
+              width: 3
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color:  "rgb(59, 162, 114)"
+                /* color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                   { offset: 0, color: "rgba(156,107,211,0.8)" },
+                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                   { offset: 1, color: "rgba(156,107,211,0.2)" }
+                 ])*/
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 15,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },lineStyle: {
+              width: 3
+            },
+           /* label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color: "#ea7ccc",
+            },*/
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color: "#ea7ccc",
+                /* color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                   { offset: 0, color: "rgba(156,107,211,0.8)" },
+                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                   { offset: 1, color: "rgba(156,107,211,0.2)" }
+                 ])*/
+              }
+            }
+          },
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      var caller = 'KB!LongLineHourQTY';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let xAxis0 = new Array();
+            let series0 = new Array();
+            let series1 = new Array();
+            let series2 = new Array();
+            let series3 = new Array();
+            let series4 = new Array();
+            let series5 = new Array();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.v_period);
+          //投入
+          series0.push(element.v_inqty);
+          if(element.v_inqty>maxnumber){
+            maxnumber= element.v_inqty;
+          }
+          //产出
+          series1.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //不良
+          series2.push(element.v_ngqty);
+          //upph
+          series3.push(element.upph);
+          //良率
+          series4.push(element.v_okrate);
+          //UPH
+          series5.push(element.uph);
+          if(element.uph>maxnumber){
+            maxnumber= element.uph;
+          }
+        }
+        this.options.xAxis[0].data = xAxis0;
+        this.options.series[0].data = series0;
+        this.options.series[1].data = series1;
+        this.options.series[2].data = series2;
+        this.options.series[3].data = series3;
+        this.options.series[4].data = series4;
+        this.options.series[5].data = series5;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>

src/components/makeprocesschart/bottom1Chart/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        rateData:[
+        ]
+      }
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    //this.setData();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        this.cdata.rateData.push(rate.toFixed(2));
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/makeprocesschart/up2Chart/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <Echart
+                :options="options"
+                id="up2Chart"
+                height="300px"
+                width="100%"
+        ></Echart>
+    </div>
+</template>
+
+<script>
+    import Echart from '@/common/echart'
+    export default {
+        data() {
+            return {
+                options: {},
+                // 定义颜色
+            }
+        },
+        components: {
+            Echart
+        },
+        props: {
+          bardata: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        watch: {
+          bardata: {
+                handler(newData) {
+                    this.options = {
+                      tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        }
+                      },
+                      legend: {
+                        bottom: "90%",
+                        textStyle: {
+                          fontSize: 20
+                        }
+                      },
+                      grid: {
+                          left: '3%',
+                          right: '4%',
+                          bottom: 20,
+                          containLabel: true
+                      },
+                      xAxis: {
+                          type: 'value',
+                          max: newData.max
+                      },
+                      // 下方Y轴
+                      yAxis: {
+                          type:'category',
+                          data:newData.yAxis,
+                          axisLabel: {
+                            fontSize: 25,
+                           // fontWeight: "bold"
+                          }
+                      },
+                      series: [
+                          {
+                              name: '计划数',
+                              type: 'bar',
+                              data: newData.planData,
+                              label: {
+                                show: true,
+                                position: 'right',
+                                fontSize:16,
+                                fontWeight: "bold",
+                                color:  "inherit"
+                              },
+                            barWidth: 16,
+                            itemStyle: {
+                              color: "#ABA5FC"
+                            },
+                          },
+                          {
+                            name: '实际数',
+                            type: 'bar',
+                            data: newData.actData,
+                            label: {
+                              show: true,
+                              position: 'right',
+                              fontSize:16,
+                              fontWeight: "bold",
+                              color:  "inherit"
+                            },
+                            barWidth: 16,
+                            itemStyle: {
+                              color: "#8CF9B8"
+                            },
+                          }
+                      ]
+                    }
+                },
+                immediate: true,
+                deep: true
+            }
+        }
+    }
+</script>

src/components/makeprocesschart/up3Chart/chart.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="up3Chart"
+      height="325px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          color:newData.color,
+          tooltip: {
+            trigger: "item",
+            formatter: "{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "vertical",
+            icon: "circle",
+           // right: 0,
+           // top: 10,
+            bottom: 20,
+            left: "center",
+            x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+              fontSize: 16
+            },
+          },
+          series: [
+            {
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              center: ["48%", "35%"],
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+                width: 120,
+                color:"inherit",
+                show:newData.labelShow,
+              /*  formatter:function(param){
+                  let text = param.data.name;
+                  if (text.length < 8) {
+                    return text ;
+                  } else {
+                    return text.substring(0, 8) + '...' ;
+                  }
+                },*/
+              },
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/makeprocesschart/up3Chart/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data () {
+    return {
+      timing :null,
+      color1: [
+        "#f65e2b",
+        "#fb7293",
+        "#f85179",
+        "#f1305e",
+        "#fa0640",
+        "#d5093a",
+        "#ab032d"
+      ],
+      color2:[ "#8CF9B8"],
+      cdata: {
+        xData:[],
+        seriesData:[],
+        labelShow:true,
+        color:this.color1
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'KB!ZZTopFiveBad';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "1=1"
+                }
+              }).then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let xData0 = new Array();
+                        let seriesData0 = new Array();
+                        let sum1 = 0;
+                        let totalsum = 0;
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          let ob = new Object();
+                          xData0.push(element.mb_badname);
+                          ob.value = element.v_cn;
+                          ob.name = element.mb_badname;
+                          seriesData0.push(ob);
+                          sum1 +=element.v_cn;
+                          totalsum = element.v_sum;
+                        }
+                        if(totalsum-sum1>0){
+                           xData0.push('其它');
+                           let ob = new Object();
+                           ob.value = totalsum-sum1;
+                           ob.name = '其它'||totalsum-sum1||'pcs';
+                           seriesData0.push(ob);
+                       }
+                        if(totalsum == 0){
+                          xData0.push('今日无不良现象');
+                          let ob = new Object();
+                          ob.value = 100;
+                          ob.name = '今日无不良现象';
+                          seriesData0.push(ob);
+                          this.cdata.labelShow = false;
+                          this.cdata.color = this.color2;
+                        }else{
+                          this.cdata.labelShow = true;
+                          this.cdata.color = this.color1;
+                        }
+                       this.cdata.xData = xData0;
+                       this.cdata.seriesData = seriesData0;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/index.js

@@ -42,7 +42,16 @@ const routes = [{
     title: "品质看板",
     requireAuth: true // 标识该路由是否需要登录
   }
-},{
+},
+  {
+    path: '/makeprocess',
+    name: 'makeprocess',
+    component: () => import('../views/makeprocess/index.vue'),
+    meta: {
+      title: "生产进度",
+      requireAuth: true // 标识该路由是否需要登录
+    }
+  },{
   path: '/warehouse',
   name: 'warehouse',
   component: () => import('../views/warehouse/index.vue'),

src/views/makeprocess/bottom1.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="bottom1">
+    <div class = "up">
+      <div class="bg-color-black">
+        <div class="d-flex pt-1 pl-2 pb-2 jc-center">
+          <span class="fs-xxl text mx-2 fw-b">订单执行进度</span>
+        </div>
+        <div class="d-flex jc-center body-box">
+          <dv-scroll-board :config="config" ref="scroll-board" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+      config: {
+        header: ['单号','业务员','产品编号','产品名称', '订单数','裁切','打点','SMT','无尘1','无尘2','组装1','组装2','样品','丝印','包装' ],
+        data: [],
+        rowNum: 15, //表格行数
+        headerHeight: 35,
+        headerBGC: 'rgba(15,19,37,0.1)', //表头
+        oddRowBGC: 'rgb(33,56,117)', //奇数行
+        evenRowBGC: 'rgb(33,56,117)', //偶数行
+        columnWidth: [150,110,200,150, 110, 120, 120, 120, 120, 120,120, 120,120],
+        align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center','center']
+      },
+      timing: null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy() {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!MakeProcess';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "1=1" ,
+        }
+      }).then((result) => {
+                let dataList = JSON.parse(result.data.data);
+                let resultList = new Array();
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  let item = new Array();
+                  item.push("<span  class='colorY fs-xxl'>" + element.v_salecode + "</span>");
+                  item.push("<span  class='colorY fs-xxl'>" + element.sa_seller + "</span>");
+                  item.push("<span  class='colorY fs-xxl'>" + element.v_prodcode + "</span>");
+                  item.push("<span  class='colorY fs-xxl'>" + element.v_prdetail + "</span>");
+                  item.push("<span  class='colorY fs-xxl'>" + element.v_qty + "</span>");
+                  if(element.v_qty==element.裁切 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.裁切 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.裁切 + "</span>");
+                  }
+                  if(element.v_qty==element.打点 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.打点 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.打点 + "</span>");
+                  }
+                  if(element.v_qty==element.smt ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.smt + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.smt + "</span>");
+                  }
+                  if(element.v_qty==element.无尘01 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.无尘01 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.无尘01 + "</span>");
+                  }
+                  if(element.v_qty==element.无尘02 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.无尘02 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.无尘02 + "</span>");
+                  }
+                  if(element.v_qty==element.组装01 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.组装01 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.组装01 + "</span>");
+                  }
+                  if(element.v_qty==element.组装02 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.组装02 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.组装02 + "</span>");
+                  }
+                  if(element.v_qty==element.样品 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.样品 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.样品 + "</span>");
+                  }
+                  if(element.v_qty==element.丝印 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.丝印 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.丝印 + "</span>");
+                  }
+                  if(element.v_qty==element.包装 ){
+                    item.push("<span  class='colorGrass fs-xxl'>" + element.包装 + "</span>");
+                  }else {
+                    item.push("<span  class='colorY fs-xxl'>" + element.包装 + "</span>");
+                  }
+                  resultList.push(item);
+                }
+                const scrollBoard = this.$refs['scroll-board'];
+                //刷新数据
+                scrollBoard.updateRows(resultList);
+              }, (result) => {
+                console.error(result)
+              }
+          );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 950px;
+$box-width: 100%;
+#bottom1 {
+  padding: 10px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+
+  .up {
+    .bg-color-black {
+      border-radius: 10px;
+      height: 920px;
+      padding: 5px;
+    }
+
+    .text {
+      color: #c3cbde;
+      font-size: 25px;
+    }
+
+    .body-box {
+      width: $box-width;
+
+      .dv-scroll-board .header {
+        font-size: 25px;
+      }
+
+      .dv-scroll-board {
+        height: 900px;
+      }
+    }
+  }
+
+
+}
+</style>

src/views/makeprocess/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
+            <div class="title">
+              <span class="title-text">COSTEC-MES 可视化平台</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s bg-color-blue">
+              <span class="react-left"></span>
+              <span class="text fw-b" style="font-size:24px;">柯赛科技数据看板</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-r mr-3">
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="fullScreen" ref="fullScreen"
+                         v-show=!isFullScreen >全屏</el-button>
+              <el-button type="text" class="text" style="width:50% ;font-size: 21px;" @click="exitFullScreen" ref="exitFullScreen" v-show=isFullScreen>退出全屏</el-button>
+            </div>
+            <div class="react-right mr-4 react-l-s" style="width: 900px">
+              <span class="react-after"></span>
+              <el-dropdown class="dropdown">
+                <span class="el-dropdown-link" ref="echarType">
+                  生产进度看板<i class="el-icon-arrow-down el-icon--right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item class="dropdownitem"><router-link to="total">总看板</router-link></el-dropdown-item>
+                  <el-dropdown-item class="dropdownitem"><router-link to="prodline">车间看板</router-link></el-dropdown-item>
+                  <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+                  <el-dropdown-item class="dropdownitem"><router-link to="warehouse">仓库看板</router-link></el-dropdown-item>
+                 </el-dropdown-menu>
+              </el-dropdown>
+              <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 下面 -->
+          <div class="bottom-box">
+              <dv-border-box-12>
+                <bottom1 />
+              </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../../utils/drawMixin";
+import  common  from '../../utils/common';
+import {formatTime} from '../../utils/index.js'
+import bottom1 from './bottom1.vue'
+import {mapMutations, mapState} from "vuex"
+
+export default {
+  mixins: [ drawMixin,common ],
+  computed: {
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      timing: null,
+      timing2: null,
+      timing3: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+    }
+  },
+  components: {
+    bottom1
+  },
+  created() {
+     this.isFullScreen = document.fullscreenElement;
+  },
+  mounted() {
+    this.timeFn();
+    this.cancelLoading();
+    this.autoFullScreen();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing);
+    clearInterval(this.timing2);
+  },
+  methods: {
+    ...mapMutations(['setFactory']),
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
+      }, 1000);
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
+    },
+    autoFullScreen(){
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.$showMsgBox({
+            caption: "提示",
+            msg: '是否全屏展示？',
+            callback: (data) => {
+              if (data == "yes") {
+                this.fullScreen();
+              }
+            }
+          })
+        }, 3000)
+      }
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/indexmakeprocess.scss';
+.dropdown{
+  font-size: 22px;
+  color: #f7f8fa;
+  transform: skewX(45deg);
+  ::v-deep .el-select-dropdown {
+    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
+    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
+    border: 1px solid #0f1325;
+    background: #04308D !important;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #0f1325;
+    color: #fff;
+    border: 1px solid #0f1325;
+  }
+
+  .el-select-dropdown__item {
+    color: #fff;
+    background-color: #0f1325;
+  }
+  ::v-deep .el-select-dropdown {
+    background-color: transparent;
+    border: 1px solid #0f1325;
+  }
+  ::v-deep.el-select-dropdown__list {
+    padding: 0;
+  }
+  ::v-deep.el-popper[x-placement^="bottom"] {
+    margin-top: 0px;
+  }
+  ::v-deep.el-popper .popper__arrow,
+  ::v-deep.el-popper .popper__arrow::after {
+    display: none;
+  }
+  .el-select-dropdown__item:hover {
+    background-color: rgba(0, 225, 219, 0.690196078431373);
+  }
+}
+
+</style>

src/views/makeprocess/up2.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="up2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxl text mx-2 fw-b">当日工序计划进度</span>
+      </div>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <BarChart :bardata="bardata"  />
+        </div>
+        <div class="d-flex jc-center fs-xl fw-b rate flex-column mt-2">
+          <div>当日已完成比例：{{finishRate}}% </div>
+          <div class="mt-1">当日未达成比例：{{unfinishRate}}%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarChart from '@/components/zzchart/up2Chart'
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+      bardata : {
+        planData:[],
+        actData:[],
+        yAxis:[],
+        max : 1000,
+      },
+      finishRate:0,
+      unfinishRate:0,
+    }
+  },
+  components: {BarChart},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 10000);
+    },
+
+    async setdata() {
+      //当前工单
+      var caller = 'KB!LongLineLinePlan';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "V_OUTLINE='组装'" ,
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0){
+              let yAxis0 = new Array();
+              let series0 = new Array();
+              let series1 = new Array();
+              var maxnumber=0;
+              for (let index = 0; index < dataList.length; index++) {
+                const element = dataList[index];
+                yAxis0.push(element.v_wccode);
+                //计划
+                series0.push(element.v_planqty);
+                if(element.v_planqty>maxnumber){
+                  maxnumber= element.v_planqty;
+                }
+                //实际
+                series1.push(element.v_actqty);
+                if(element.v_actqty>maxnumber){
+                  maxnumber= element.v_actqty;
+                }
+              }
+              this.bardata.planData = series0;
+              this.bardata.actData = series1;
+              this.bardata.yAxis = yAxis0;
+              this.bardata.max = Math.ceil(maxnumber*1.2);
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+
+      this.finishRate = 0;
+      this.unfinishRate = 0;
+      //比例,用的是总看板的达成比例caller，如果不一样，自行修改caller
+      caller = 'KB!TOTALDayMakeRate';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "V_OUTLINE='组装'"
+        }
+      }).then((result) => {
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0){
+              this.finishRate = dataList[0].finishrate;
+              this.unfinishRate = dataList[0].unfinishrate;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 430px;
+$box-width: 100%;
+#up2 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 40px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+
+  .text {
+    color: #c3cbde;
+    font-size: 25px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .rate{
+      justify-content: center; /* 水平居中 */
+      align-items: center;
+    }
+  }
+}
+</style>

src/views/makeprocess/up3.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="up3">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2 jc-center">
+        <span class="fs-xl text mx-2 fw-b">不良现象TOP5</span>
+      </div>
+      <div >
+        <BadChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BadChart from '../../components/zzchart/up3Chart'
+import {mapState} from "vuex";
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+    }
+  },
+  components: {
+    BadChart
+  },
+  mounted() {
+    //this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 430px;
+$box-width: 100%;
+#up3 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .text {
+    color: #f4cc03;
+    font-size: 25px;
+  }
+
+}
+</style>

src/views/makeprocess/up4.vue

@@ -0,0 +1,189 @@
+<template>
+  <div id="up4">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxxl text mx-2 fw-b">人员管理</span>
+      </div>
+      <div class="d-flex body-box">
+        <div class="item fs-xxl">
+          <p class="ml-3 colorText fw-b ">组装01生产区域负责人</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80' >
+              <p>{{ upitem.v_leadname }}</p>
+            </div>
+            <img :src="imgSrc1" class="responsive-img">
+          </div>
+        </div>
+        <div class="item fs-xxl">
+          <p class="ml-3 colorText fw-b ">组装01品质区域负责人</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80'>
+              <p>{{ upitem.v_quaname }}</p>
+            </div>
+            <img :src="imgSrc2"  class="responsive-img">
+          </div>
+        </div>
+        <div class="item fs-xxl">
+          <p class="ml-3 colorText fw-b ">组装02生产区域负责人</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80' >
+              <p>{{ upitem.v_leadname2 }}</p>
+            </div>
+            <img :src="imgSrc3" class="responsive-img">
+          </div>
+        </div>
+        <div class="item fs-xxl">
+          <p class="ml-3 colorText fw-b ">组装02品质区域负责人</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80'>
+              <p>{{ upitem.v_quaname2 }}</p>
+            </div>
+            <img :src="imgSrc4"  class="responsive-img">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      timing:null,
+      upitem:{},
+      imgSrc1:'',
+      imgSrc2:'',
+      imgSrc3:'',
+      imgSrc4:'',
+    }
+  },
+  components: {},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 300000);
+    },
+    async settestdata() {
+      //人员管理
+      var caller = 'KB!ZZManInfo';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1" ,
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0) {
+              this.upitem = dataList[0];
+              if(null != this.upitem.v_leadimageurl && '' != this.upitem.v_leadimageurl ) {
+                this.fetchImage('imgSrc1',this.upitem.v_leadimageurl);
+                 //this.imgSrc1 = this.$http.defaults.baseURL+"/kanban/download.action?path=D:/PROJECT2/uas-system/out/artifacts/postattach/U001/b2ebddde15d94de680dc6405540f7cb0.png&_noc=1";
+              }
+              if(null != this.upitem.v_quaimageurl && '' != this.upitem.v_quaimageurl) {
+                this.fetchImage('imgSrc2',this.upitem.v_quaimageurl);
+              }
+              if(null != this.upitem.v_leadimageurl && '' != this.upitem.v_leadimageurl2 ) {
+                this.fetchImage('imgSrc3',this.upitem.v_leadimageurl2);
+               }
+              if(null != this.upitem.v_quaimageurl && '' != this.upitem.v_quaimageurl2) {
+                this.fetchImage('imgSrc4',this.upitem.v_quaimageurl2);
+              }
+
+            }else{
+              this.upitem ={},
+              this.imgSrc1 ='';
+              this.imgSrc2 ='';
+              this.imgSrc3 ='';
+              this.imgSrc4 ='';
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    },
+
+    async fetchImage(param,url) {
+      try {
+        // 假设你已经有了token，并且知道图片的URL
+       let response = await this.$httpImg.get("/kanban/download.action?path="+url+"&_noc=1");
+        if (response.status === 200) {
+          // 创建一个URL，并且使用这个URL作为img的src
+          this[param] = URL.createObjectURL(new Blob([response.data]));
+        }else{
+          this[param] = '';
+        }
+      } catch (error) {
+        console.error('Error fetching image:', error);
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 430px;
+$box-width: 100%;
+#up4 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  .text {
+    color: #c3cbde;
+    font-size: 25px;
+  }
+  .body-box {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 7px;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 50%;
+      height: 175px;
+      .dv-dig-flop {
+        width: 100%;
+       // height: 30px;
+       // font-size: 20px;
+        color: #3de7c9;
+        display: flex;
+      //  align-items: center;
+      }
+      .w-80{
+        width : 80px;
+      }
+      .responsive-img {
+        width: 150px; /* 或者指定宽度，如 300px */
+        height: 150px; /* 保持图片的宽高比 */
+        //display: block;
+        margin-left: 20px;
+        //margin-right: 0;
+      }
+      .responsive-img2 {
+        width: 70px; /* 或者指定宽度，如 300px */
+        height: 80px; /* 保持图片的宽高比 */
+        //display: block;
+        margin-left: 20px;
+        //margin-right: 0;
+      }
+    }
+  }
+
+}
+</style>