柯赛看板调整，仓库看板调整

src/assets/scss/indexwarehouse.scss

@@ -127,21 +127,16 @@
       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: 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
       }
 
       // 底部数据
       .bottom-box {
-       // margin-top: 10px;
+        // margin-top: 10px;
         display: grid;
-        grid-template-columns: 2.8fr 1.2fr ;
+        grid-template-columns: 1.2fr 1fr 0.8fr;
       }
     }
   }

src/components/warehousechart/bottom1Chart/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom1Chart"
+        height="410px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart/index.vue";
+export default {
+  data() {
+    return {
+      options: {},
+      // 定义颜色
+    }
+  },
+  components: {
+    Echart
+  },
+  props: {
+    linedata: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    linedata: {
+      handler(newData) {
+        this.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:newData.xAxiss,
+              axisLabel: {
+                fontSize: 16,
+                fontWeight: "bold"
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              min: newData.min, //70
+              max: 100,
+              interval: newData.interval,  //分7个数据，6段
+              nameTextStyle: {
+                fontSize: 20
+              },
+              axisLabel: {
+                formatter: '{value}%',
+                fontSize: 16
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  // 使用深浅的间隔色
+                  type: "dashed",
+                  color: ['#aaa', '#aaa']
+                }
+              }
+            }
+          ],
+          series: newData.series
+          /*  [
+          {
+            name: '线体产出',
+            type: 'bar',
+            barWidth: 20,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                color:  "rgb(174,228,187)"
+              }
+            },
+          },
+          {
+            name: '计划剩余',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                color:  "rgb(251,234,78)"
+              }
+            },
+          },
+          {
+             name: '计划达成率%',
+             type: 'line',
+             data:[],
+             yAxisIndex: 1,
+             symbolSize: 4,
+             tooltip: {
+               valueFormatter: function (value) {
+                 return value + '%';
+               }
+             },
+             lineStyle: {
+               width: 3
+             },
+             itemStyle: {
+               normal: {
+                 barBorderRadius: 6,
+                 color:  "rgb(42,87,42)"
+               }
+             },
+             emphasis: {
+               focus: 'series'
+             }
+           }
+        ]*/
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    // 根据自己的业务情况修改
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/warehousechart/bottom2Chart/chart.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <!-- 当日工段投产良率 -->
+    <Echart
+        :options="options"
+        id="bottom2Chart"
+        height="325px"
+        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: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 9
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+          {
+            type: 'value',
+            name: 'rate',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          }
+
+        ],
+        series: [
+          /*  {
+              name: '投入',
+              type: 'bar',
+              barWidth: 20,
+              emphasis: {
+                focus: 'series'
+              },
+              data:[]
+              //data: [320, 332, 301, 334, 390, 330, 320]
+            },*/
+          {
+            name: '已备料',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            itemStyle: {
+              color: '#9FE6B8'  //fac858
+            },
+            //data: [220, 232, 221, 234, 290, 230, 220]
+          },
+          {
+            name: '未备料',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle: {
+              color: '#FFE900'  //fac858
+            },
+
+          },
+          {
+            name: '备料比例%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            //data: [92, 92,92, 72, 82, 62, 62],
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(0,161,26,0.8)" },
+                  { offset: 0.2, color: "rgba(0,161,26,0.5)" },
+                  { offset: 1, color: "rgba(0,161,26,0.2)" }
+                ])
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.getdata();
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+
+    async getdata() {
+      this.options.xAxis[0].data = [];
+      this.options.series[0].data = [];
+      this.options.series[1].data =[];
+      this.options.series[2].data = [];
+      var caller = 'KB!WHMAKEPREPAREPG';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100&condition=1=1")
+          .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();
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  if(index%2 == 0) {
+                    xAxis0.push(element.v_whname);
+                  }else{
+                    xAxis0.push('\n'+element.v_whname);
+                  }
+                  //已备料
+                  series0.push(element.v_haveqty);
+                  //未备料
+                  series1.push(element.v_unqty);
+                  //备料率
+                  series2.push(element.v_okrate);
+                }
+                this.options.xAxis[0].data = xAxis0;
+                this.options.series[0].data = series0;
+                this.options.series[1].data = series1;
+                this.options.series[2].data = series2;
+              },(result)=>{
+                console.error(result)
+              }
+          );
+    }
+  }
+}
+</script>

src/components/warehousechart/up1Chart/chart.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="up1Chart"
+        height="420px"
+        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: [
+            "#37a2da",
+            "#32c5e9",
+            "#37a2da",
+            "#32c5e9",
+            "#ff9f7f",
+            "#fb7293",
+            "#e7bcf3",
+            "#8378ea"
+          ],
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          series: [
+            {
+              type: "pie",
+              radius: '40%',
+              center: ['50%', '20%'],
+              data: newData.data1,
+              label: {
+                fontSize: 18,
+                fontWeight:"bold",
+                color: "#d3d6dd",
+              },
+            },
+            {
+              type: "pie",
+              radius: '40%',
+              center: ["50%", "68%"],
+              data: newData.data2,
+              label: {
+                fontSize: 18,
+                fontWeight:"bold",
+                color: "#d3d6dd",
+              },
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/warehousechart/up1Chart/index.vue

@@ -0,0 +1,99 @@
+<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,
+      cdata: {
+        xData:[],
+        data1:[],
+        data2:[]
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.getdata();
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+      var caller = 'KB!WHCHECKDATA';
+      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 data1 = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let ob = new Object();
+             // xData0.push(element.v_name);
+              ob.value = element.v_qty;
+              ob.name = element.v_name;
+              data1.push(ob);
+            }
+            this.cdata.data1 = data1;
+          },(result)=>{
+            console.error(result)
+          }
+      );
+
+      /**
+       * 检验，良率或者不良率
+       */
+      caller = 'KB!WHCHECKOKRATE'
+      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 data2 = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let ob = new Object();
+              ob.value = element.v_rate;
+              ob.name = element.v_name;
+              data2.push(ob);
+            }
+            this.cdata.data2 = data2;
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/shop/index.vue

@@ -47,7 +47,7 @@
                   车间看板<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="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="total">总看板</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-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->

src/views/warehouse/bottom1.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="bottom2">
+    <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 " >
+          <Bottom1Chart :linedata="linedata" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Bottom1Chart from "../../components/warehousechart/bottom1Chart";
+import {mapState} from "vuex";
+export default {
+  components: {
+    Bottom1Chart
+  },
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      linedata :{
+        series : null,
+        xAxiss  :null,
+        interval :15,
+        min:0
+      },
+      timing:null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!WHTMONTHIQCRATE';
+      var cond = "1=1";
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: cond
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let series = new Array();
+            let xAxis0 = new Array();
+            let mindata = 100;
+
+            //30天内
+            let ndata = new Array();
+            for (let i =29 ;i>=0;i--){
+              let formattedDate;
+              if(i == 0){
+                formattedDate = this.$moment().format('MM/DD');
+              }else{
+                formattedDate = this.$moment().subtract(i, 'days').format('MM/DD')
+              }
+              xAxis0.push(formattedDate);
+              //获取分组当天数据
+              let dataall = dataList;
+              let data0 = '-';
+              if(null != dataall) {
+                let datam = dataall.filter(item => item.v_ymd == formattedDate);
+                if(datam.length>0){
+                  data0 = datam[0].v_okrate;
+                  if(mindata>data0){
+                    mindata = data0;
+                  }
+                }
+              }
+              ndata.push(data0);
+            }
+            series.push({
+              name: '合格率',
+              type: 'line',
+              data: ndata,
+              symbolSize: 4,
+              lineStyle: {
+                width: 3
+              },
+              emphasis: {
+                focus: 'series'
+              }
+            });
+            this.linedata.series = series;
+            this.linedata.xAxiss = xAxis0;
+            //最小值往下取整10的倍数，然后减20
+             mindata = Math.floor(mindata/10)*10 - 20;
+             mindata = mindata<0?0:mindata;
+            this.linedata.min = mindata;
+            //分7个数据，6段
+            this.linedata.interval = Math.ceil((100-mindata)/7);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+//$box-height: 520px;
+$box-height: 475px;
+$box-width: 100%;
+#bottom2 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>

src/views/warehouse/bottom2.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="bottom2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单备料完成进度</span>
+        </div>
+      </div>
+      <div>
+        <Bottom2Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Bottom2Chart from '@/components/warehousechart/bottom2Chart';
+export default {
+  components: {
+    Bottom2Chart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 100%;
+#bottom2 {
+  padding: 15px 10px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .up{
+    height: 150px;
+    .bg-color-black {
+      border-radius: 10px;
+      height: 150px;
+    }
+  }
+  .down{
+    height: 370px;
+    .bg-color-black {
+      height: 350px;
+      border-radius: 10px;
+    }
+  }
+
+}
+</style>

src/views/warehouse/bottom3.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="up1">
+    <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="d-flex jc-center body-box">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+export default {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      timing:null,
+    }
+  },
+  components: {},
+  mounted() {
+    // this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 10000);
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up1 {
+  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;
+    width: $box-width;
+    .body-box {
+      padding-top: 25px;
+    }
+  }
+}
+</style>

src/views/warehouse/index.vue

@@ -47,31 +47,12 @@
                   仓库看板<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="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="total">总看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</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="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>
 
-<!--              <el-select v-model="factory" class="dropdown" @change ="handleBlur" style="width:80px">
-                <el-option
-                    v-for="item in factoryoptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                ></el-option>
-              </el-select>
-
-              <el-select v-model="ulcode" class="dropdown" @change ="handleBlur2" style="width: 150px">
-                <el-option
-                    v-for="item in uldata"
-                    :key="item.UL_CODE"
-                    :label="item.UL_NAME"
-                    :value="item.UL_CODE"
-                ></el-option>
-              </el-select>-->
-
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
             </div>
@@ -81,11 +62,33 @@
         <div class="body-box">
           <!-- 上面 -->
           <div class="content-box">
-              <div>
-                <dv-border-box-12>
-                  <up1 />
-                </dv-border-box-12>
-              </div>
+            <div>
+              <dv-border-box-12>
+                <up1 />
+              </dv-border-box-12>
+            </div>
+            <div>
+              <dv-border-box-12 >
+                <up2 />
+              </dv-border-box-12>
+            </div>
+            <div>
+              <dv-border-box-12 >
+                <up3 />
+              </dv-border-box-12>
+            </div>
+          </div>
+          <!-- 下面 -->
+          <div class="bottom-box">
+            <dv-border-box-12>
+              <bottom1 />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <bottom2 />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <bottom3 />
+            </dv-border-box-12>
           </div>
         </div>
       </div>
@@ -97,7 +100,12 @@
 import drawMixin from "../../utils/drawMixin";
 import  common  from '../../utils/common';
 import {formatTime} from '../../utils/index.js'
-import up1 from './up1'
+import up1 from './up1.vue';
+import up2 from './up2.vue';
+import up3 from './up3.vue';
+import bottom1 from  './bottom1.vue'
+import bottom2 from  './bottom2.vue'
+import bottom3 from  './bottom3.vue'
 import {mapMutations, mapState} from "vuex"
 
 export default {
@@ -121,7 +129,7 @@ export default {
     }
   },
   components: {
-    up1
+    up1,up2,up3, bottom1,bottom2, bottom3
   },
   created() {
     // this.getuldata();
@@ -142,56 +150,12 @@ export default {
         this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
         this.dateWeek = this.weekday[new Date().getDay()]
       }, 1000);
-      //定时获取厂区,大线
-      /*this.timing2 = setInterval(() => {
-        this.getFactory();
-        this.getuldata();
-      }, 300000);*/ //5分钟一次
-      /*this.$store.commit('setFactoryOptions',this.factoryoptions);
-      this.$store.commit('setFactory',this.loginForm.factory);*/
     },
     cancelLoading() {
       setTimeout(() => {
         this.loading = false
       }, 1000)
     },
-    handleBlur (val){
-      this.setFactory(val);
-      location.reload();
-    },
-    handleBlur2 (val){
-      sessionStorage.setItem('ul_code',val);
-      this.$cookie.set("ul_code", val, {
-        expires: 30,
-      });
-      location.reload();
-    },
-    getuldata (){
-      this.$http.get("kanban/getUlDataByFactory.action",{
-        params: {
-          fa_name: this.factory
-        }
-      }).then( (res)=>{
-                if(res.data.uldata) {
-                  const data = res.data.uldata;
-                  if(this.$cookie.get("ul_code") && data.some(item => item.UL_CODE === this.$cookie.get("ul_code")) ){
-                    sessionStorage.setItem('ul_code', this.$cookie.get("ul_code"));
-                  }else {
-                    sessionStorage.setItem('ul_code', data[0].UL_CODE);
-                    this.$cookie.set("ul_code", data[0].UL_CODE, {
-                      expires: 30,
-                    });
-                  }
-                  this.uldata = data;
-                }else{
-                  sessionStorage.setItem('ul_code','');
-                  this.uldata = [];
-                }
-                this.ulcode = sessionStorage.getItem("ul_code");
-              },(result)=>{
-                console.error(result)
-              });
-    },
   }
 }
 </script>

src/views/warehouse/up1.vue

@@ -1,136 +1,65 @@
 <template>
   <div id="up1">
     <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2 jc-center pb-2">
-        <span class="fs-xxl text mx-2 fw-b">已备料未上线数据</span>
+      <div class="d-flex pt-1 pl-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 class="jc-center body-box">
+        <Up1Chart/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Up1Chart from "../../components/warehousechart/up1Chart";
+import {mapState} from "vuex";
 export default {
-  components: {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
   },
   data() {
     return {
-      config: {
-        header: [],//['线别','生产工单', '机型', '订单数', '备料状态', '计划投入', '计划完成', '计划工时', '加班工时', '提醒事项'],
-        data: [],
-        rowNum: 15, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        columnWidth: [],//[130,190, 180, 100, 100, 100, 100, 100, 100, 160],
-        align: []//['center','left','left','left','left','center','center','center','center']
-      },
-      timing: null,
+      timing:null,
     }
   },
+  components: {Up1Chart},
   mounted() {
-    this.refreshdata()
+    // this.refreshdata();
   },
-  beforeDestroy() {
+  beforeDestroy () {
     clearInterval(this.timing)
   },
   methods: {
     refreshdata() {
-      this.getdata(); //获取-数据
+      this.settestdata(); //获取数据
       this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
+        this.settestdata(); //获取-主题词
       }, 10000);
     },
 
-    async getdata() {
-      var caller = 'KB!WHData';
-      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
-        params: {
-          condition: "1=1" ,
-        }
-      }).then((result) => {
-               let columns = result.data.columns;
-               let headers = new Array();
-               let columnWidths = new Array();
-               let fieldnames = new Array();
-               let aligns = new Array();
-               for (let index = 0; index < columns.length; index++) {
-                 const element = columns[index];
-                 if(element.width>0) {
-                   headers.push(element.text);
-                   columnWidths.push(element.width);
-                   fieldnames.push(element.dataIndex);
-                   aligns.push('center');
-                 }
-               }
-               this.config.header = headers;
-               this.config.columnWidth = columnWidths;
-               this.config.align = aligns;
-
-                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();
-                  fieldnames.forEach(function (ele) {
-                    // 遍历数组，对每个元素进行操作
-                    item.push("<span  class='colorGrass fs-lg'>" + element[ele] + "</span>");
-                  });
-
-                 /* if (element.v_blstatus == '未领料') {  //98%
-                    item.push("<span  class='colorRemind fs-lgmd'>" + element.v_blstatus + "</span>");
-                  } else {
-                    item.push("<span  class='colorGrass fs-lg'>" + element.v_blstatus + "</span>");
-                  }*/
-                  resultList.push(item);
-                }
-                this.config.data = resultList;
-                /*const scrollBoard = this.$refs['scroll-board'];
-                //刷新数据
-                scrollBoard.updateRows(resultList);*/
-                this.config = { ...this.config };
-              }, (result) => {
-                console.error(result)
-              }
-          );
-    }
   }
-};
+}
 </script>
 
-<style lang="scss" class>
-$box-height: 950px;
+<style lang="scss" scoped>
+$box-height: 475px;
 $box-width: 100%;
 #up1 {
   padding: 13px;
   height: $box-height;
+  // font-size: 32px;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    border-radius: 10px;
     height: $box-height - 25px;
+    border-radius: 10px;
     padding: 5px;
-  }
-
-  .text {
-    color: #c3cbde;
-    //font-size: 15px;
-  }
-
-  .body-box {
     width: $box-width;
-
-    .dv-scroll-board .header {
-      font-size: 20px;
-    }
-
-    .dv-scroll-board {
-      height: $box-height - 70px;
+    .body-box {
+      padding-top: 25px;
     }
   }
-
 }
-</style>
+</style>

src/views/warehouse/up2.vue

@@ -0,0 +1,210 @@
+<template>
+  <div id="up2">
+    <div class="bg-color-black">
+      <div class="up mt-4">
+        <div class="d-flex pt-1 pl-2 jc-center mb-5">
+          <span class="fs-xxl text mx-2 fw-b">备料完工情况</span>
+        </div>
+        <div class="body-box d-flex">
+          <div class="item d-flex jc-center flex-column">
+            <div class="location">
+              <div class="circle-hollow">
+                <div class="info">
+                  <h2 class="pb-2">{{inQty}}</h2>
+                  <p class="fs-xxl pt-2">
+                    入库数量
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{outQty}}</h2>
+                <p class="fs-xxl pt-2">
+                  出货数量
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="down">
+        <div class="body-box">
+          <div class="d-flex jc-center fs-xxl fw-b rate flex-column">
+            <div>需备料单据数：{{finishQty}} </div>
+            <div class="mt-3">已完成备料数：{{unfinishQty}}</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  data() {
+    return {
+      timing:null,
+      finishQty:0,
+      unfinishQty:0,
+      inQty:10000,
+      outQty:10000,
+    }
+  },
+  components: {},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 15000);
+    },
+
+    async setdata() {
+      this.finishQty = 0;
+      this.unfinishQty = 0;
+      this.inQty = 0;
+      this.outQty = 0;
+
+      //备料完成情况
+      caller = 'KB!WHPREMADEData1';
+      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.inQty = dataList[0].inqty;
+              this.outQty = dataList[0].outqty;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+      //备料单据数
+      var caller = 'KB!WHPREMADEData2';
+      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.finishQty = dataList[0].finishqty;
+              this.unfinishQty = dataList[0].unfinishqty;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up2 {
+  padding: 13px;
+  // padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+
+  .bg-color-black {
+    padding: 5px;
+    height: $box-height - 25px;
+    //  width: width - 5px;
+    border-radius: 10px;
+  }
+
+  .text {
+    color: #c3cbde;
+    font-size: 25px;
+  }
+
+  .down {
+    width: 100%;
+    margin-top: 60px;
+    .rate{
+      justify-content: center; /* 水平居中 */
+      align-items: center;
+    }
+  }
+
+  .up{
+    .body-box {
+      margin-top: 50px;
+      flex-wrap: wrap;
+      justify-content: space-around;
+    }
+
+    .item {
+      width: 50%;
+      align-items: center;
+      /*.location{
+         position: absolute;
+         left: 20%;
+      }*/
+      .circle-hollow {
+        width: 170px;
+        height: 170px;
+        border: 3px solid #4ecdc4; /* 边框样式 */
+        border-radius: 50%;
+        background-color: transparent; /* 透明背景 */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        letter-spacing:2px;
+        flex-direction: column; /* 文字垂直排列 */
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
+        .info{
+          text-align: center;
+          width: 140px;
+          p{
+            border-top: 1px solid #ddd;
+          }
+        }
+      }
+    }
+  }
+  .body-box {
+    border-radius: 10px;
+
+
+    .percent {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        width: 33.3%;
+        height: 120px;
+
+        span {
+          //margin-top: 8px;
+          font-size: 20px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/warehouse/up3.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="up3">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2 jc-center pb-2 mb-2">
+        <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>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  data() {
+    return {
+      config: {
+        header: ['类别','总数量', '低于安全库存数'],
+        data: [],
+        rowNum: 12, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [200,200, 200],
+        align: ['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!WHALERTDATA';
+      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='colorGrass fs-xl'>" + element.v_type + "</span>");
+                  item.push("<span  class='colorGrass fs-xl'>" + element.v_qty + "</span>");
+                  item.push("<span  class='colorGrass fs-xl'>" + element.v_lqty + "</span>");
+                  resultList.push(item);
+                }
+                this.config.data = resultList;
+                this.config = { ...this.config };
+              }, (result) => {
+                console.error(result)
+              }
+          );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 475px;
+$box-width: 100%;
+#up3 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    border-radius: 10px;
+    height: $box-height - 25px;
+    padding: 5px;
+  }
+
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+
+  .body-box {
+    width: $box-width;
+
+    .dv-scroll-board .header {
+      font-size: 20px;
+    }
+
+    .dv-scroll-board {
+      height: $box-height - 70px;
+    }
+  }
+
+}
+</style>