修改网络请求

hw-ui/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>

hw-ui/src/api/board/fifthFloorProduction.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request2'
+
+// 工单生产进度
+export function workOrderProgress(query) {
+  return request({
+    url: '/fifthMesBorder/workOrderProgress',
+    method: 'get',
+    params: query
+  })
+}
+
+// 楼层生产数据
+export function productProgress(query) {
+  return request({
+    url: '/fifthMesBorder/productProgress',
+    method: 'get',
+    params: query
+  })
+}
+
+// 组员生产合格率
+export function productionQualified(query) {
+  return request({
+    url: '/fifthMesBorder/productionQualified',
+    method: 'get',
+    params: query
+  })
+}
+
+// 工时统计
+export function orderTime(query) {
+  return request({
+    url: '/fifthMesBorder/orderTime',
+    method: 'get',
+    params: query
+  })
+}
+
+// 工位生产效率
+export function orderEfficiency(query) {
+  return request({
+    url: '/fifthMesBorder/orderEfficiency',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/fifthFloorWarehouse.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request1'
+
+export function locationCount(query) {
+  return request({
+    url: '/FifthWmsBorder/locationCount',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fifthPanake(query) {
+  return request({
+    url: '/FifthWmsBorder/fifthPanake',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/firstFloorWarehouse.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request1'
+import request1 from '@/utils/request2'
+
+// 出入库详情
+export function inAndOutInfo(query) {
+  return request({
+    url: '/FirstWmsBorder/inAndOutInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 原材料库存占比
+export function stockPercentage(query) {
+  return request({
+    url: '/FirstWmsBorder/stockPercentage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 采购订单
+export function purchaseInfo(query) {
+  return request({
+    url: '/FirstWmsBorder/purchaseInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 生产订单物料需求
+export function bomInfo(query) {
+  return request({
+    url: '/FirstWmsBorder/bomInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 成品出入库
+export function productInAndOutInfo(query) {
+  return request({
+    url: '/FirstWmsBorder/productInAndOutInfo',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/fourthFloorWarehouse.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request1'
+import request1 from '@/utils/request2'
+
+// 出入库详情
+export function inAndOutInfo(query) {
+  return request({
+    url: '/FourthWmsBorder/inAndOutInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 原材料库存占比
+export function stockPercentage(query) {
+  return request({
+    url: '/FourthWmsBorder/stockPercentage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 采购订单
+export function purchaseInfo(query) {
+  return request({
+    url: '/FourthWmsBorder/purchaseInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 生产订单物料需求
+export function bomInfo(query) {
+  return request({
+    url: '/FourthWmsBorder/bomInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+// 成品出入库
+export function productInAndOutInfo(query) {
+  return request({
+    url: '/FourthWmsBorder/productInAndOutInfo',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/secondFloorProduction.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request2'
+
+// 工单计划
+export function workOrderProgress(query) {
+  return request({
+    url: '/SecondMesBorder/selectOrderMonth',
+    method: 'get',
+    params: query
+  })
+}
+
+// 最近工单完成情况
+export function selectLatestWorkOrder(query) {
+  return request({
+    url: '/SecondMesBorder/selectLatestWorkOrder',
+    method: 'get',
+    params: query
+  })
+}
+
+// 获取设备状态
+export function getLineStatus(query) {
+  return request({
+    url: '/SecondMesBorder/getLineStatus',
+    method: 'get',
+    params: query
+  })
+}
+
+// 小时产量
+export function getHourProduction(query) {
+  return request({
+    url: '/SecondMesBorder/getHourProduction',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getDayProduction(query) {
+  return request({
+    url: '/SecondMesBorder/getDayProduction',
+    method: 'get',
+    params: query
+  })
+}
+
+export function dustAnalysis(query) {
+  return request({
+    url: '/SecondMesBorder/dustAnalysis',
+    method: 'get',
+    params: query
+  })
+}
+
+export function deviceTimeCount(query) {
+  return request({
+    url: '/SecondMesBorder/deviceTimeCount',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/secondFloorWarehouse.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request1'
+
+export function workOrderProgress(query) {
+  return request({
+    url: '/SecondWmsBorder/totalStock',
+    method: 'get',
+    params: query
+  })
+}
+
+export function instockTimeCount(query) {
+  return request({
+    url: '/SecondWmsBorder/instockTimeCount',
+    method: 'get',
+    params: query
+  })
+}
+
+export function locationCount(query) {
+  return request({
+    url: '/SecondWmsBorder/locationCount',
+    method: 'get',
+    params: query
+  })
+}
+
+export function tableInfo(query) {
+  return request({
+    url: '/SecondWmsBorder/tableInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+export function inAndOutStockInfo(query) {
+  return request({
+    url: '/SecondWmsBorder/inAndOutStockInfo',
+    method: 'get',
+    params: query
+  })
+}
+
+export function todayInstockAmount(query) {
+  return request({
+    url: '/SecondWmsBorder/todayInstockAmount',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/thirdFloorProduction.js

@@ -0,0 +1,64 @@
+import request from '@/utils/request2'
+
+// 工单计划
+export function thirdOrderPlan(query) {
+  return request({
+    url: '/ThirdMesBorder/thirdOrderPlan',
+    method: 'get',
+    params: query
+  })
+}
+
+// 工单信息
+export function getLatestWorkOrder(query) {
+  return request({
+    url: '/ThirdMesBorder/getLatestWorkOrder',
+    method: 'get',
+    params: query
+  })
+}
+
+// 产线信息
+export function getLineStatus(query) {
+  return request({
+    url: '/ThirdMesBorder/getLineStatus',
+    method: 'get',
+    params: query
+  })
+}
+
+// 温湿度统计
+export function temperatureAndhumunity(query) {
+  return request({
+    url: '/ThirdMesBorder/temperatureAndhumunity',
+    method: 'get',
+    params: query
+  })
+}
+
+// 生产统计数据
+export function productAmount(query) {
+  return request({
+    url: '/ThirdMesBorder/productAmount',
+    method: 'get',
+    params: query
+  })
+}
+
+// 生产完成统计
+export function productCompleteCount(query) {
+  return request({
+    url: '/ThirdMesBorder/productCompleteCount',
+    method: 'get',
+    params: query
+  })
+}
+
+// 原料入库时间
+export function rawInstock(query) {
+  return request({
+    url: '/ThirdMesBorder/rawInstock',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/api/board/thirdFloorWarehouse.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request1'
+import request1 from '@/utils/request2'
+
+export function monthRawAmount(query) {
+  return request({
+    url: '/ThirdWmsBorder/monthRawAmount',
+    method: 'get',
+    params: query
+  })
+}
+
+export function locationStatus(query) {
+  return request({
+    url: '/ThirdWmsBorder/locationStatus',
+    method: 'get',
+    params: query
+  })
+}
+
+export function productPlan(query) {
+  return request({
+    url: '/ThirdWmsBorder/productPlan',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 当前库存统计
+export function productCompleteCount(query) {
+  return request1({
+    url: '/ThirdMesBorder/productCompleteCount',
+    method: 'get',
+    params: query
+  })
+}

hw-ui/src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 50000
 })
 
 // request拦截器

hw-ui/src/utils/request1.js

@@ -0,0 +1,151 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from '@/plugins/cache'
+import { saveAs } from 'file-saver'
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: '/board-api-ware',
+  // 超时
+  timeout: 50000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  // 是否需要防止数据重复提交
+  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
+    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
+    if (requestSize >= limitSize) {
+      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
+      return config;
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      const s_url = sessionObj.url;                  // 请求地址
+      const s_data = sessionObj.data;                // 请求数据
+      const s_time = sessionObj.time;                // 请求时间
+      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+        const message = '数据正在处理，请勿重复提交';
+        return Promise.reject(new Error(message))
+      } else {
+        cache.session.setJSON('sessionObj', requestObj)
+      }
+    }
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // 二进制数据则直接返回
+    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
+      return res.data
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+          isRelogin.show = false;
+          store.dispatch('LogOut').then(() => {
+            location.href = '/index';
+          })
+      }).catch(() => {
+        isRelogin.show = false;
+      });
+    }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    } else if (code === 500) {
+      Message({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      Message({ message: msg, type: 'warning' })
+      return Promise.reject('error')
+    } else if (code !== 200) {
+      Notification.error({ title: msg })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  }
+)
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  return service.post(url, params, {
+    transformRequest: [(params) => { return tansParams(params) }],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob',
+    ...config
+  }).then(async (data) => {
+    const isBlob = blobValidate(data);
+    if (isBlob) {
+      const blob = new Blob([data])
+      saveAs(blob, filename)
+    } else {
+      const resText = await data.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+      Message.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r) => {
+    console.error(r)
+    Message.error('下载文件出现错误，请联系管理员！')
+    downloadLoadingInstance.close();
+  })
+}
+
+export default service

hw-ui/src/utils/request2.js

@@ -0,0 +1,151 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from '@/plugins/cache'
+import { saveAs } from 'file-saver'
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: '/board-api-prod',
+  // 超时
+  timeout: 50000
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  // 是否需要防止数据重复提交
+  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+  if (getToken() && !isToken) {
+    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  // get请求映射params参数
+  if (config.method === 'get' && config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.params = {};
+    config.url = url;
+  }
+  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+    const requestObj = {
+      url: config.url,
+      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+      time: new Date().getTime()
+    }
+    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
+    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
+    if (requestSize >= limitSize) {
+      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
+      return config;
+    }
+    const sessionObj = cache.session.getJSON('sessionObj')
+    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+      cache.session.setJSON('sessionObj', requestObj)
+    } else {
+      const s_url = sessionObj.url;                  // 请求地址
+      const s_data = sessionObj.data;                // 请求数据
+      const s_time = sessionObj.time;                // 请求时间
+      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+        const message = '数据正在处理，请勿重复提交';
+        return Promise.reject(new Error(message))
+      } else {
+        cache.session.setJSON('sessionObj', requestObj)
+      }
+    }
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    // 二进制数据则直接返回
+    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
+      return res.data
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+          isRelogin.show = false;
+          store.dispatch('LogOut').then(() => {
+            location.href = '/index';
+          })
+      }).catch(() => {
+        isRelogin.show = false;
+      });
+    }
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    } else if (code === 500) {
+      Message({ message: msg, type: 'error' })
+      return Promise.reject(new Error(msg))
+    } else if (code === 601) {
+      Message({ message: msg, type: 'warning' })
+      return Promise.reject('error')
+    } else if (code !== 200) {
+      Notification.error({ title: msg })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
+    return Promise.reject(error)
+  }
+)
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  return service.post(url, params, {
+    transformRequest: [(params) => { return tansParams(params) }],
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    responseType: 'blob',
+    ...config
+  }).then(async (data) => {
+    const isBlob = blobValidate(data);
+    if (isBlob) {
+      const blob = new Blob([data])
+      saveAs(blob, filename)
+    } else {
+      const resText = await data.text();
+      const rspObj = JSON.parse(resText);
+      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+      Message.error(errMsg);
+    }
+    downloadLoadingInstance.close();
+  }).catch((r) => {
+    console.error(r)
+    Message.error('下载文件出现错误，请联系管理员！')
+    downloadLoadingInstance.close();
+  })
+}
+
+export default service

hw-ui/src/views/board/production/fifthFloor.vue

@@ -3,87 +3,28 @@
     <div class="headTitle">京源生产监控平台</div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title">
+         class="title"
+    >
       {{ i }}
     </div>
     <div class="table1">
-      <div style="background-color: #1077bc19">
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 10%">
-          编号
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 23.333%">
-          生产工单
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          计划数量
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          实际数量
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          差异值
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          完成率
-        </div>
-      </div>
-      <vue-seamless-scroll
-        :class-option="scrollTableOption"
-        :data="scrollTableData"
-        class="case-item"
-        style="height: calc(100% - 30px);overflow: hidden;"
-      >
-        <div
-          v-for="(item, index) in scrollTableData"
-          :key="index"
-        >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
-            <div
-              class="scrollTableItem" style="width: 10%">
-              {{ item.value1 }}
-            </div>
-            <div
-              class="scrollTableItem" style="width: 23.333%">
-              {{ item.value2 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value3 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value4 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value5 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value6 }}
-            </div>
-          </div>
-        </div>
-      </vue-seamless-scroll>
-    </div>
-    <div class="table2">
       <div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 10%">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
           编号
         </div>
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 23.333%">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 36%">
           生产工单
         </div>
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
           计划数量
         </div>
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
           实际数量
         </div>
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
           差异值
         </div>
-        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
           完成率
         </div>
       </div>
@@ -99,28 +40,100 @@
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
             <div
-              class="scrollTableItem" style="width: 10%">
-              {{ item.value1 }}
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.no }}
             </div>
             <div
-              class="scrollTableItem" style="width: 23.333%">
-              {{ item.value2 }}
+              class="scrollTableItem" style="width: 36%"
+            >
+              {{ item.orderCode }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value3 }}
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.planAmount }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value4 }}
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.completeAmount }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value5 }}
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.quantityAmount }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value6 }}
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.finishingRate }}%
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="table2">
+      <div style="background-color: #1077bc19;height: 50px;line-height: 50px;">
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
+          编号
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 36%">
+          工序名称
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
+          开始时间
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 14%">
+          结束时间
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
+          生产用时
+        </div>
+        <div class="scrollTableItem" style="padding:0;color:#65c2f3;font-weight: bold;width: 12%">
+          计划用时
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData1"
+        class="case-item"
+        style="height: calc(100% - 50px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData1"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.processId }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 36%"
+            >
+              {{ item.processName }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.planAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 14%"
+            >
+              {{ item.completeAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.quantityAmount }}
+            </div>
+            <div
+              class="scrollTableItem" style="width: 12%"
+            >
+              {{ item.finishingRate }}%
             </div>
           </div>
         </div>
@@ -132,29 +145,36 @@
     <div class="chart2">
       <Chart key="chart2" ref="chart2"></Chart>
     </div>
-    <div class="num1 num1_1" style="top: 11.9%;left: 11.1%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:14.6%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:18.1%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:21.8%;color:#5fc2f2">0</div>
-    <div class="num1 num1_5" style="top: 11.9%;left:35.6%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:39.2%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:42.8%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:46.4%;color:#59ee7b">0</div>
-    <div class="num1 num1_9" style="top: 11.9%;left:60.3%;color:#f60008">1</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:63.9%;color:#f60008">0</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:67.4%;color:#f60008">0</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:71%;color:#f60008">0</div>
-    <div class="num1 num1_13" style="top: 11.9%;left:84.8%;color:#f60008">1</div>
-    <div class="num1 num1_14" style="top: 11.9%;left:88.4%;color:#f60008">0</div>
-    <div class="num1 num1_15" style="top: 11.9%;left:92%;color:#f60008">0</div>
-    <div class="num1 num1_16" style="top: 11.9%;left:95.6%;color:#f60008">0</div>
+    <div class="num1 num1_1" style="top: 11.9%;left: 11.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:14.6%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:18.1%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:21.8%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:35.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:42.8%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:46.4%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
+    <div class="num1 num1_9" style="top: 11.9%;left:60.3%;color:#f60008">{{ topData.diff[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:63.9%;color:#f60008">{{ topData.diff[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:67.4%;color:#f60008">{{ topData.diff[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:71%;color:#f60008">{{ topData.diff[3] }}</div>
+    <div class="num1 num1_13" style="top: 11.9%;left:84.8%;color:#f60008">{{ topData.rate[0] }}</div>
+    <div class="num1 num1_14" style="top: 11.9%;left:88.4%;color:#f60008">{{ topData.rate[1] }}</div>
+    <div class="num1 num1_15" style="top: 11.9%;left:92%;color:#f60008">{{ topData.rate[2] }}</div>
+    <div class="num1 num1_16" style="top: 11.9%;left:95.6%;color:#f60008">%</div>
   </div>
 </template>
 
 <script>
-import vueSeamlessScroll from "vue-seamless-scroll";
+import vueSeamlessScroll from 'vue-seamless-scroll'
 import Chart from '@/components/board/Chart'
 import * as echarts from 'echarts'
+import {
+  orderEfficiency,
+  orderTime,
+  productionQualified,
+  productProgress,
+  workOrderProgress
+} from '@/api/board/fifthFloorProduction'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -165,6 +185,12 @@ export default {
   },
   data() {
     return {
+      topData: {
+        planAmount: [0, 0, 0, 0],
+        completeAmount: [0, 0, 0, 0],
+        diff: [0, 0, 0, 0],
+        rate: [0, 0, 0]
+      },
       title: [
         '工单生产进度',
         '工位生产效率TOP',
@@ -172,7 +198,7 @@ export default {
         '计划数量:',
         '完成数量:',
         '差异值:',
-        '完成进度:',
+        '完成进度:'
       ],
       titlePosition: [
         {
@@ -185,7 +211,7 @@ export default {
         },
         {
           top: 70.5,
-          left:  69
+          left: 69
         },
         {
           top: 11.9,
@@ -212,207 +238,268 @@ export default {
         openWatch: true, // 开启数据实时监控刷新dom
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 0,
+        waitTime: 0
       },
-      scrollTableData: Array(50).fill('').map(function (i, k) {
-        let val1 = Math.ceil(Math.random() * 10000)
-        let val2 = val1 - Math.ceil(Math.random() * val1)
-        let val3 = val1 - val2
-        let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
-        return {
-          value1: k + 1,
-          value2: "20230304" + k,
-          value3: val1,
-          value4: val2,
-          value5: val3,
-          value6: val4,
-        }
-      }),
+      scrollTableData: [],
+      scrollTableData1: []
     }
   },
   mounted() {
-    this.$refs.chart1.setData({
-      color: ["#3398DB"],
-      title: {
-        text: "组员生产合格率",
-        textStyle: {
-           color: '#fff'
-        }
-      },
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-        formatter: "{b} <br> 合格率: {c}%",
-      },
-      /*legend: {
-            data: [date]
-        },*/
-      grid: {
-        top:'30',
-        left: "4%",
-        right: "4%",
-        bottom: "2%",
-        containLabel: true,
-      },
-      xAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-        min: 0,
-        max: 100,
-        interval: 20,
-        axisLabel: {
-          formatter: "{value}%",
-          textStyle: {
-            color: '#fff',
-            fontWeight: "80",
-          },
-        },
-      },
-      yAxis: {
-        type: "category",
-        data: [
-          "人员1",
-          "人员2",
-          "人员3",
-          "人员4",
-          "人员5",
-          "人员6",
-          "人员7",
-        ],
-        axisLabel: {
-          show: true,
-          interval: 0,
-          rotate: 0,
-          margin: 10,
-          inside: false,
-          textStyle: {
-            color: '#fff',
-            fontWeight: "50",
-          },
-        },
-      },
-      series: [
-        {
-          type: "bar",
-          label: {
-            normal: {
-              show: true,
-              // formatter: '{c}',
-              formatter: function (v) {
-                var val = v.data;
-                if (val === 0) {
-                  return "";
-                }
-                return val;
-              },
-              color: "#fff",
-            },
-          },
-          data: [22, 33, 44, 55, 66, 77, 88],
-        },
-      ],
-    })
-    this.$refs.chart2.setData({
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-        },
-      },
-      grid: {
-        top:'5%',
-        left: "3%",
-        right: "4%",
-        bottom: "3%",
-        containLabel: true,
-      },
-      yAxis: [
-        {
-          type: "value",
-          name: "次数",
-          position: "left",
-        },
-        {
-          show: false,
-        },
-      ],
-      xAxis: {
-        type: "category",
-        data: [
-          "员工1",
-          "员工2",
-          "员工3",
-          "员工4",
-          "员工5",
-          "员工6",
-          "员工7",
-          "员工8",
-          "员工9",
-          "员工10",
-          "员工11",
-          "员工12",
-        ],
-      },
-      series: [
-        {
-          name: "流程1",
-          type: "bar",
-          stack: "次数",
-          label: {
-            normal: {
-              show: true,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: "rgb(249,18,243)",
-            },
-          },
-          data: [197, 134, 138, 167, 160, 174, 164, 0, 0, 0, 0, 0],
-        },
-        {
-          name: "流程2",
-          type: "bar",
-          stack: "次数",
-          label: {
-            normal: {
-              show: true,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: "rgb(249,205,30)",
-            },
-          },
-          data: [325, 191, 315, 400, 407, 448, 417, 0, 0, 0, 0, 0],
-        },
-        {
-          name: "流程3",
-          type: "bar",
-          stack: "次数",
-          label: {
-            normal: {
-              show: true,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: "rgb(0, 137, 239)",
-            },
-          },
-          data: [138, 111, 156, 139, 116, 151, 154, 0, 0, 0, 0, 0],
-        },
-      ],
-    })
+    this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.chart.resize()
       this.$refs.chart2.chart.resize()
     }
   },
-  methods: {}
+  methods: {
+    getData() {
+      workOrderProgress().then(e => {
+        this.scrollTableData = e.data.map((v, k) => {
+          return {
+            no: k + 1,
+            orderCode: v.orderCode,
+            planAmount: v.planAmount,
+            completeAmount: v.completeAmount,
+            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
+            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
+          }
+        })
+      })
+      productProgress().then(e => {
+        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
+        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
+        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
+        this.topData.rate = parseFloat(e.data.planAmount) === 0 ? [0, 0, 0] : [...[0, 0, 0], ...((parseFloat(e.data.completeAmount) / parseFloat(e.data.planAmount)) || 0).toString().split('')].slice(-3)
+      })
+      productionQualified().then(e => {
+        // console.log(e)
+        this.$refs.chart1.setData({
+          color: ['#3398DB'],
+          title: {
+            text: '组员生产合格率',
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            formatter: '{b} <br> 合格率: {c}%'
+          },
+          /*legend: {
+                data: [date]
+            },*/
+          grid: {
+            top: '30',
+            left: '4%',
+            right: '4%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01],
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%',
+              textStyle: {
+                color: '#fff',
+                fontWeight: '80'
+              }
+            }
+          },
+          yAxis: {
+            type: 'category',
+            data: e.data.map(v => v.name),
+            axisLabel: {
+              show: true,
+              interval: 0,
+              rotate: 0,
+              margin: 10,
+              inside: false,
+              textStyle: {
+                color: '#fff',
+                fontWeight: '50'
+              }
+            }
+          },
+          series: [
+            {
+              type: 'bar',
+              label: {
+                normal: {
+                  show: true,
+                  // formatter: '{c}',
+                  formatter: function(v) {
+                    var val = v.data
+                    if (val === 0) {
+                      return ''
+                    }
+                    return val
+                  },
+                  color: '#fff'
+                }
+              },
+              data: e.data.map(v => parseFloat(v.passRate))
+            }
+          ]
+        })
+      })
+      orderTime().then(e => {
+        // console.log(e)
+
+        // this.$refs.chart2.setData({
+        //   tooltip: {
+        //     trigger: 'axis',
+        //     axisPointer: {
+        //       type: 'shadow'
+        //     }
+        //   },
+        //   grid: {
+        //     top: '5%',
+        //     left: '3%',
+        //     right: '4%',
+        //     bottom: '3%',
+        //     containLabel: true
+        //   },
+        //   yAxis: [
+        //     {
+        //       type: 'value',
+        //       name: '次数',
+        //       position: 'left'
+        //     },
+        //     {
+        //       show: false
+        //     }
+        //   ],
+        //   xAxis: {
+        //     type: 'category',
+        //     data: [
+        //       '员工1',
+        //       '员工2',
+        //       '员工3',
+        //       '员工4',
+        //       '员工5',
+        //       '员工6',
+        //       '员工7',
+        //       '员工8',
+        //       '员工9',
+        //       '员工10',
+        //       '员工11',
+        //       '员工12'
+        //     ]
+        //   },
+        //   series: [
+        //     {
+        //       name: '流程1',
+        //       type: 'bar',
+        //       stack: '次数',
+        //       label: {
+        //         normal: {
+        //           show: true
+        //         }
+        //       },
+        //       itemStyle: {
+        //         normal: {
+        //           color: 'rgb(249,18,243)'
+        //         }
+        //       },
+        //       data: [197, 134, 138, 167, 160, 174, 164, 0, 0, 0, 0, 0]
+        //     },
+        //     {
+        //       name: '流程2',
+        //       type: 'bar',
+        //       stack: '次数',
+        //       label: {
+        //         normal: {
+        //           show: true
+        //         }
+        //       },
+        //       itemStyle: {
+        //         normal: {
+        //           color: 'rgb(249,205,30)'
+        //         }
+        //       },
+        //       data: [325, 191, 315, 400, 407, 448, 417, 0, 0, 0, 0, 0]
+        //     },
+        //     {
+        //       name: '流程3',
+        //       type: 'bar',
+        //       stack: '次数',
+        //       label: {
+        //         normal: {
+        //           show: true
+        //         }
+        //       },
+        //       itemStyle: {
+        //         normal: {
+        //           color: 'rgb(0, 137, 239)'
+        //         }
+        //       },
+        //       data: [138, 111, 156, 139, 116, 151, 154, 0, 0, 0, 0, 0]
+        //     }
+        //   ]
+        // })
+        this.$refs.chart2.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '5%',
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          yAxis: [
+            {
+              type: 'value',
+              name: '次数',
+              position: 'left'
+            },
+            {
+              show: false
+            }
+          ],
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => v.processId.toString())
+          },
+          series: [
+            {
+              name: '时长(分钟）',
+              type: 'bar',
+              barMaxWidth: '100px',
+              stack: '次数',
+              label: {
+                normal: {
+                  show: true
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: 'rgb(249,18,243)'
+                }
+              },
+              data: e.data.map(v => (parseFloat(v.produceTime) / 60).toFixed(2))
+            }
+          ]
+        })
+      })
+      orderEfficiency().then(e => {
+        console.log(e)
+        this.scrollTableData1 = e.data
+      })
+    }
+  }
 }
 </script>
 <style lang="less" scoped>

hw-ui/src/views/board/warehouse/fifthFloor.vue

@@ -1,12 +1,65 @@
 <template>
   <div class="app-container">
+    <div class="warehouse"></div>
     <div class="headTitle">京源智能仓储监控平台</div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title"
-    >
+         class="title">
       {{ i }}
     </div>
+    <div class="table1">
+      <div style="background-color: #1077bc19">
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务类型
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          物料名称
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          库位编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          时间
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem">
+              {{ item.value1 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value2 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value3 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value4 }}
+            </div>
+            <div
+              class="scrollTableItem">
+              {{ item.value5 }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
     <div class="chart1">
       <HighChart key="chart1" ref="chart1"></HighChart>
     </div>
@@ -19,40 +72,30 @@
     <div class="chart4">
       <HighChart key="chart4" ref="chart4"></HighChart>
     </div>
+    <div class="chart5">
+      <Chart key="chart5" ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <Chart key="chart6" ref="chart6"></Chart>
+    </div>
 
-    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">0</div>
-
-    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">0</div>
-
+    <div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
     <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
     <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
     <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
     <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-
-    <div class="num1 num1_13" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_14" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_15" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_16" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-
-    <div class="num1 num1_17" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_18" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_19" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_20" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-
   </div>
 </template>
 
-<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
-<!--  质量接口 柱状图 +折线图 合格率和数量   -->
-
 <script>
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import vueSeamlessScroll from "vue-seamless-scroll";
 import Chart from '@/components/board/Chart'
 import HighChart from '@/components/board/HighChart'
 import * as echarts from 'echarts'
@@ -71,36 +114,60 @@ export default {
         '原料库出库数量:',
         '辅料库出库数量:',
         '半成品入库数量:',
-        '辅料库出库数量:',
-        '半成品入库数量:',
-        '库存占比'
+        '库存占比',
+        '调度任务',
+        '成品库可用库存占比',
+        '成品库订单库存统计',
       ],
       titlePosition: [
         {
           top: 11.5,
-          left: 3.5
+          left: 7.5
         },
         {
           top: 11.5,
-          left: 22.5
+          left: 40
         },
         {
           top: 11.5,
-          left: 41.3
-        },
-        {
-          top: 11.5,
-          left: 60.3
-        },
-        {
-          top: 11.5,
-          left: 79.1
+          left: 72.5
         },
         {
           top: 19.4,
           left: 5.5
+        },
+        {
+          top: 59.8,
+          left: 5.5
+        },
+        {
+          top: 59.8,
+          left: 37
+        },
+        {
+          top: 59.8,
+          left: 68.5
+        },
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0,
+      },
+      scrollTableData: Array(100).fill('').map(function (i, k) {
+        return {
+          value1: k + 1,
+          value2: '出库',
+          value3: '物料1',
+          value4: '000' + k,
+          value5: '2024.03.04',
         }
-      ]
+      }),
     }
   },
   mounted() {
@@ -119,20 +186,20 @@ export default {
         animation: false,
         backgroundColor: null,
         events: {
-          load: function() {
+          load: function () {
             let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
+              points = this.series[0].points;
+            each(points, function (p, i) {
               p.graphic.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side1.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side2.attr({
                 translateY: -p.shapeArgs.ran
-              })
-            })
+              });
+            });
           }
         },
         options3d: {
@@ -156,15 +223,15 @@ export default {
           size: 200,
           dataLabels: {
             enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
             }
           },
           showInLegend: false,
           point: {
             events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
               }
             }
           }
@@ -229,20 +296,20 @@ export default {
         animation: false,
         backgroundColor: null,
         events: {
-          load: function() {
+          load: function () {
             let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
+              points = this.series[0].points;
+            each(points, function (p, i) {
               p.graphic.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side1.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side2.attr({
                 translateY: -p.shapeArgs.ran
-              })
-            })
+              });
+            });
           }
         },
         options3d: {
@@ -266,15 +333,15 @@ export default {
           size: 200,
           dataLabels: {
             enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
             }
           },
           showInLegend: false,
           point: {
             events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
               }
             }
           }
@@ -339,20 +406,20 @@ export default {
         animation: false,
         backgroundColor: null,
         events: {
-          load: function() {
+          load: function () {
             let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
+              points = this.series[0].points;
+            each(points, function (p, i) {
               p.graphic.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side1.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side2.attr({
                 translateY: -p.shapeArgs.ran
-              })
-            })
+              });
+            });
           }
         },
         options3d: {
@@ -376,15 +443,15 @@ export default {
           size: 200,
           dataLabels: {
             enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
             }
           },
           showInLegend: false,
           point: {
             events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
               }
             }
           }
@@ -449,20 +516,20 @@ export default {
         animation: false,
         backgroundColor: null,
         events: {
-          load: function() {
+          load: function () {
             let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
+              points = this.series[0].points;
+            each(points, function (p, i) {
               p.graphic.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side1.attr({
                 translateY: -p.shapeArgs.ran
-              })
+              });
               p.graphic.side2.attr({
                 translateY: -p.shapeArgs.ran
-              })
-            })
+              });
+            });
           }
         },
         options3d: {
@@ -486,15 +553,15 @@ export default {
           size: 200,
           dataLabels: {
             enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
+            formatter: function () {
+              return this.point.options.name + '<br>' + this.point.options.h + '%';
             }
           },
           showInLegend: false,
           point: {
             events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
+              legendItemClick: function (e) {
+                return false; // 直接 return false 即可禁用图例点击事件
               }
             }
           }
@@ -543,12 +610,157 @@ export default {
           ].sort((a, b) => a.y - b.y)
         }]
     })
+    this.$refs.chart5.setData({
+      title: {
+        x: 'center',
+        y: 'center',
+        text: "75%",
+        textStyle: {
+          color: '#ccc',
+          fontSize: 2 * vw,
+        },
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["47.5%", "55%"],
+          center: ["50%", "50%"],
+          startAngle: 225,
+          endAngle: -45,
+          color: ['#fa9800', "transparent"],
+          data: [
+            {
+              value: 75,
+              name: ''
+            },
+            {
+              value: 25,
+              name: ''
+            },
+          ],
+          label: {
+            show: false
+          },
+          labelLine: {
+            normal: {
+              show: false,
+            },
+          },
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      grid: {
+        borderWidth: 0,
+        top: "10%",
+        left: "10%",
+        right: "10%",
+        bottom: "10%",
+      },
+      yAxis: {
+        type: "category",
+        axisLabel: {
+          margin: 10,
+          color: "#ffffff63",
+        },
+
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff1f",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff3",
+            width: 2,
+          },
+        },
+        data: ['物料1', '物料2', '物料3'],
+      },
+      xAxis: {
+        type: "value",
+        axisLabel: {
+          margin: 10,
+          color: "#ffffff63",
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff1f",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: "#ffffff1f",
+          },
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          barWidth: "40%",
+          itemStyle: {
+
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              1,
+              0,
+              [
+                {
+                  offset: 0,
+                  color: "#0a2ad7",
+                },
+                {
+                  offset: 1,
+                  color: "#138dd7",
+                },
+              ],
+              false
+            ),
+          },
+          data: [1, 2, 3],
+        },
+        {
+          name: "",
+          type: "pictorialBar",
+          barWidth: "40%",
+          symbolSize: [5, '100%'],
+          symbolPosition: 'end',
+          symbolOffset: [3, 0],
+          barGap: '-100%',
+          itemStyle: {
+            color: '#138dd7'
+          },
+          data: [1, 2, 3],
+        },
+      ]
+    })
 
     window.onresize = () => {
       this.$refs.chart1.resize()
       this.$refs.chart2.resize()
       this.$refs.chart3.resize()
       this.$refs.chart4.resize()
+      this.$refs.chart5.chart.resize()
+      this.$refs.chart6.chart.resize()
     }
   },
   methods: {}
@@ -557,7 +769,7 @@ export default {
 <style lang="less" scoped>
 
 .app-container {
-  background-image: url("../../../assets/board/warehouseBg3.jpg");
+  background-image: url("../../../assets/board/warehouseBg3_1.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -603,6 +815,22 @@ export default {
   letter-spacing: 2px;
 }
 
+.table1 {
+  position: absolute;
+  top: 62.9%;
+  left: 3.4%;
+  width: 30.2%;
+  height: 30%;
+  color: #fff;
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 5);
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
 
 .chart1 {
   position: absolute;
@@ -622,20 +850,36 @@ export default {
 
 .chart3 {
   position: absolute;
-  top: 62.5%;
-  left: 3.4%;
+  top: 22.5%;
+  left: 49.6%;
   width: 23%;
   height: 32%;
 }
 
 .chart4 {
   position: absolute;
-  top: 62.5%;
-  left: 26.5%;
+  top: 22.5%;
+  left: 72.7%;
   width: 23%;
   height: 32%;
 }
 
+.chart5 {
+  position: absolute;
+  top: 60.7%;
+  left: 40%;
+  width: 20vw;
+  height: 20vw;
+}
+
+.chart6 {
+  position: absolute;
+  top: 63%;
+  left: 66.5%;
+  width: 30%;
+  height: 32%;
+}
+
 .span {
   position: absolute;
   transform: translateY(-50%);

hw-ui/src/views/board/warehouse/fifthFloor1.vue

@@ -1,892 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="warehouse"></div>
-    <div class="headTitle">京源智能仓储监控平台</div>
-    <div v-for="(i,k) in title"
-         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title">
-      {{ i }}
-    </div>
-    <div class="table1">
-      <div style="background-color: #1077bc19">
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          任务编号
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          任务类型
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          物料名称
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          库位编号
-        </div>
-        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
-          时间
-        </div>
-      </div>
-      <vue-seamless-scroll
-        :class-option="scrollTableOption"
-        :data="scrollTableData"
-        class="case-item"
-        style="height: calc(100% - 30px);overflow: hidden;"
-      >
-        <div
-          v-for="(item, index) in scrollTableData"
-          :key="index"
-        >
-          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
-            <div
-              class="scrollTableItem">
-              {{ item.value1 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value2 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value3 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value4 }}
-            </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value5 }}
-            </div>
-          </div>
-        </div>
-      </vue-seamless-scroll>
-    </div>
-    <div class="chart1">
-      <HighChart key="chart1" ref="chart1"></HighChart>
-    </div>
-    <div class="chart2">
-      <HighChart key="chart2" ref="chart2"></HighChart>
-    </div>
-    <div class="chart3">
-      <HighChart key="chart3" ref="chart3"></HighChart>
-    </div>
-    <div class="chart4">
-      <HighChart key="chart4" ref="chart4"></HighChart>
-    </div>
-    <div class="chart5">
-      <Chart key="chart5" ref="chart5"></Chart>
-    </div>
-    <div class="chart6">
-      <Chart key="chart6" ref="chart6"></Chart>
-    </div>
-
-    <div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
-    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
-    <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-  </div>
-</template>
-
-<script>
-import vueSeamlessScroll from "vue-seamless-scroll";
-import Chart from '@/components/board/Chart'
-import HighChart from '@/components/board/HighChart'
-import * as echarts from 'echarts'
-
-const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
-export default {
-  name: 'Board1',
-  components: {
-    vueSeamlessScroll,
-    Chart,
-    HighChart
-  },
-  data() {
-    return {
-      title: [
-        '原料库出库数量:',
-        '辅料库出库数量:',
-        '半成品入库数量:',
-        '库存占比',
-        '调度任务',
-        '成品库可用库存占比',
-        '成品库订单库存统计',
-      ],
-      titlePosition: [
-        {
-          top: 11.5,
-          left: 7.5
-        },
-        {
-          top: 11.5,
-          left: 40
-        },
-        {
-          top: 11.5,
-          left: 72.5
-        },
-        {
-          top: 19.4,
-          left: 5.5
-        },
-        {
-          top: 59.8,
-          left: 5.5
-        },
-        {
-          top: 59.8,
-          left: 37
-        },
-        {
-          top: 59.8,
-          left: 68.5
-        },
-      ],
-      scrollTableOption: {
-        step: 0.5, // 数值越大速度滚动越快
-        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
-        hoverStop: true, // 是否开启鼠标悬停stop
-        direction: 1, // 0向下 1向上 2向左 3向右
-        openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 0,
-      },
-      scrollTableData: Array(100).fill('').map(function (i, k) {
-        return {
-          value1: k + 1,
-          value2: '出库',
-          value3: '物料1',
-          value4: '000' + k,
-          value5: '2024.03.04',
-        }
-      }),
-    }
-  },
-  mounted() {
-    this.$refs.chart1.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart2.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart3.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart4.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function () {
-            let each = Highcharts.each,
-              points = this.series[0].points;
-            each(points, function (p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              });
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              });
-            });
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function () {
-              return this.point.options.name + '<br>' + this.point.options.h + '%';
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function (e) {
-                return false; // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart5.setData({
-      title: {
-        x: 'center',
-        y: 'center',
-        text: "75%",
-        textStyle: {
-          color: '#ccc',
-          fontSize: 2 * vw,
-        },
-      },
-      series: [
-        {
-          type: "pie",
-          radius: ["47.5%", "55%"],
-          center: ["50%", "50%"],
-          startAngle: 225,
-          endAngle: -45,
-          color: ['#fa9800', "transparent"],
-          data: [
-            {
-              value: 75,
-              name: ''
-            },
-            {
-              value: 25,
-              name: ''
-            },
-          ],
-          label: {
-            show: false
-          },
-          labelLine: {
-            normal: {
-              show: false,
-            },
-          },
-        },
-      ],
-    })
-    this.$refs.chart6.setData({
-      tooltip: {
-        trigger: "item",
-      },
-      grid: {
-        borderWidth: 0,
-        top: "10%",
-        left: "10%",
-        right: "10%",
-        bottom: "10%",
-      },
-      yAxis: {
-        type: "category",
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#fff3",
-            width: 2,
-          },
-        },
-        data: ['物料1', '物料2', '物料3'],
-      },
-      xAxis: {
-        type: "value",
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-      },
-      series: [
-        {
-          name: "",
-          type: "bar",
-          barWidth: "40%",
-          itemStyle: {
-
-            color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              1,
-              0,
-              [
-                {
-                  offset: 0,
-                  color: "#0a2ad7",
-                },
-                {
-                  offset: 1,
-                  color: "#138dd7",
-                },
-              ],
-              false
-            ),
-          },
-          data: [1, 2, 3],
-        },
-        {
-          name: "",
-          type: "pictorialBar",
-          barWidth: "40%",
-          symbolSize: [5, '100%'],
-          symbolPosition: 'end',
-          symbolOffset: [3, 0],
-          barGap: '-100%',
-          itemStyle: {
-            color: '#138dd7'
-          },
-          data: [1, 2, 3],
-        },
-      ]
-    })
-
-    window.onresize = () => {
-      this.$refs.chart1.resize()
-      this.$refs.chart2.resize()
-      this.$refs.chart3.resize()
-      this.$refs.chart4.resize()
-      this.$refs.chart5.chart.resize()
-      this.$refs.chart6.chart.resize()
-    }
-  },
-  methods: {}
-}
-</script>
-<style lang="less" scoped>
-
-.app-container {
-  background-image: url("../../../assets/board/warehouseBg3_1.jpg");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.warehouse {
-  background-image: url("../../../assets/board/warehouse1.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
-  width: 18%;
-  height: 27.8%;
-  top: 65%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.headTitle {
-  position: absolute;
-  top: 5%;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  font-size: 1.5vw;
-  color: #d6eaed;
-  letter-spacing: 10px;
-}
-
-.num1 {
-  position: absolute;
-  font-size: 1.5vw;
-  transform: translate(-50%, -50%);
-}
-
-.title {
-  position: absolute;
-  transform: translateY(-50%);
-  color: #dddddd;
-  font-size: 1vw;
-  letter-spacing: 2px;
-}
-
-.table1 {
-  position: absolute;
-  top: 62.9%;
-  left: 3.4%;
-  width: 30.2%;
-  height: 30%;
-  color: #fff;
-}
-
-.scrollTableItem {
-  display: inline-block;
-  width: calc(100% / 5);
-  text-align: center;
-  padding: 14px 0;
-  color: #4e99c5
-}
-
-.chart1 {
-  position: absolute;
-  top: 22.5%;
-  left: 3.4%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart2 {
-  position: absolute;
-  top: 22.5%;
-  left: 26.5%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart3 {
-  position: absolute;
-  top: 22.5%;
-  left: 49.6%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart4 {
-  position: absolute;
-  top: 22.5%;
-  left: 72.7%;
-  width: 23%;
-  height: 32%;
-}
-
-.chart5 {
-  position: absolute;
-  top: 60.7%;
-  left: 40%;
-  width: 20vw;
-  height: 20vw;
-}
-
-.chart6 {
-  position: absolute;
-  top: 63%;
-  left: 66.5%;
-  width: 30%;
-  height: 32%;
-}
-
-.span {
-  position: absolute;
-  transform: translateY(-50%);
-}
-
-.span1 {
-  position: absolute;
-  transform: translate(-50%, -50%);
-}
-</style>

hw-ui/src/views/board/warehouse/fifthFloor2.vue

@@ -0,0 +1,563 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源智能仓储监控平台</div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title"
+    >
+      {{ i }}
+    </div>
+    <div class="chart1">
+      <HighChart key="chart1" ref="chart1"></HighChart>
+    </div>
+    <div class="chart2">
+      <HighChart key="chart2" ref="chart2"></HighChart>
+    </div>
+    <div class="chart3">
+      <HighChart key="chart3" ref="chart3"></HighChart>
+    </div>
+    <div class="chart4">
+      <HighChart key="chart4" ref="chart4"></HighChart>
+    </div>
+
+    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">{{ topData.furawInStock[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">{{ topData.furawInStock[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">{{ topData.furawInStock[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">{{ topData.furawInStock[3] }}</div>
+
+    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">{{ topData.productInStock[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">{{ topData.productInStock[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">{{ topData.productInStock[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">{{ topData.productInStock[3] }}</div>
+
+    <div class="num1 num1_9" style="top: 11.9%;left:51.1%;color:#f60008">{{ topData.productOutStock[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:53.4%;color:#f60008">{{ topData.productOutStock[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:55.7%;color:#f60008">{{ topData.productOutStock[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:58.1%;color:#f60008">{{ topData.productOutStock[3] }}</div>
+
+    <div class="num1 num1_13" style="top: 11.9%;left:69.9%;color:#59ee7b">{{ topData.rawInStock[0] }}</div>
+    <div class="num1 num1_14" style="top: 11.9%;left:72.3%;color:#59ee7b">{{ topData.rawInStock[1] }}</div>
+    <div class="num1 num1_15" style="top: 11.9%;left:74.6%;color:#59ee7b">{{ topData.rawInStock[2] }}</div>
+    <div class="num1 num1_16" style="top: 11.9%;left:76.9%;color:#59ee7b">{{ topData.rawInStock[3] }}</div>
+
+    <div class="num1 num1_17" style="top: 11.9%;left:88.7%;color:#f60008">{{ topData.rawOutStock[0] }}</div>
+    <div class="num1 num1_18" style="top: 11.9%;left:91%;color:#f60008">{{ topData.rawOutStock[1] }}</div>
+    <div class="num1 num1_19" style="top: 11.9%;left:93.4%;color:#f60008">{{ topData.rawOutStock[2] }}</div>
+    <div class="num1 num1_20" style="top: 11.9%;left:95.7%;color:#f60008">{{ topData.rawOutStock[3] }}</div>
+
+  </div>
+</template>
+
+<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
+<!--  质量接口 柱状图 +折线图 合格率和数量   -->
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import Chart from '@/components/board/Chart'
+import HighChart from '@/components/board/HighChart'
+import * as echarts from 'echarts'
+import { fifthPanake, locationCount } from '@/api/board/fifthFloorWarehouse'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart,
+    HighChart
+  },
+  data() {
+    return {
+      topData: {
+        furawInStock: [0, 0, 0, 0],
+        productInStock: [0, 0, 0, 0],
+        productOutStock: [0, 0, 0, 0],
+        rawInStock: [0, 0, 0, 0],
+        rawOutStock: [0, 0, 0, 0]
+      },
+      title: [
+        '原料库入库数量:',
+        '成品入库数量:',
+        '成品出库数量:',
+        '辅料入库数量:',
+        '辅料出库数量:',
+        '库存占比'
+      ],
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 3.5
+        },
+        {
+          top: 11.5,
+          left: 22.5
+        },
+        {
+          top: 11.5,
+          left: 41.3
+        },
+        {
+          top: 11.5,
+          left: 60.3
+        },
+        {
+          top: 11.5,
+          left: 79.1
+        },
+        {
+          top: 19.4,
+          left: 5.5
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.resize()
+      this.$refs.chart2.resize()
+      this.$refs.chart3.resize()
+      this.$refs.chart4.resize()
+    }
+  },
+  methods: {
+    getData() {
+      locationCount().then(e => {
+        this.topData.furawInStock = [...[0, 0, 0, 0], ...(e.data.furawInStock || 0).toString().split('')].slice(-4)
+        this.topData.productInStock = [...[0, 0, 0, 0], ...(e.data.productInStock || 0).toString().split('')].slice(-4)
+        this.topData.productOutStock = [...[0, 0, 0, 0], ...(e.data.productOutStock || 0).toString().split('')].slice(-4)
+        this.topData.rawInStock = [...[0, 0, 0, 0], ...(e.data.rawInStock || 0).toString().split('')].slice(-4)
+        this.topData.rawOutStock = [...[0, 0, 0, 0], ...(e.data.rawOutStock || 0).toString().split('')].slice(-4)
+      })
+      fifthPanake().then(e => {
+        console.log(e)
+        this.$refs.chart1.setData({
+          title: {
+            text: '辅料空料箱占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '空料箱',
+                  y: e.data.emptyLocationPercentage * 100,
+                  h: e.data.emptyLocationPercentage * 100
+                },
+                {
+                  name: '非空料箱',
+                  y: (1 - e.data.emptyLocationPercentage) * 100,
+                  h: (1 - e.data.emptyLocationPercentage) * 100
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+        this.$refs.chart2.setData({
+          title: {
+            text: '辅料库位使用率占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: e.data.opplyLocationPercentage * 100,
+                  h: e.data.opplyLocationPercentage * 100
+                },
+                {
+                  name: '未使用',
+                  y: (1 - e.data.opplyLocationPercentage) * 100,
+                  h: (1 - e.data.opplyLocationPercentage) * 100
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+
+        let total = e.data.productStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
+        this.$refs.chart3.setData({
+          title: {
+            text: '成品库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: e.data.productStocks.map(v => {
+                return {
+                  name: v.productId,
+                  y: v.totalAmount,
+                  h: parseFloat(((v.totalAmount / total) * 100).toFixed(2))
+                }
+              })
+            }]
+        })
+        let total1 = e.data.wmsRawStocks.map(v => parseFloat(v.totalAmount)).reduce((a, b) => a + b, 0)
+        this.$refs.chart4.setData({
+          title: {
+            text: '原材料库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: e.data.wmsRawStocks.map(v => {
+                return {
+                  name: v.materialId,
+                  y: v.totalAmount,
+                  h: parseFloat(((v.totalAmount / total1) * 100).toFixed(2))
+                }
+              })
+            }]
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/warehouseBg3.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.warehouse {
+  background-image: url("../../../assets/board/warehouse1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 18%;
+  height: 27.8%;
+  top: 65%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 1.5vw;
+  transform: translate(-50%, -50%);
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+
+.chart1 {
+  position: absolute;
+  top: 22.5%;
+  left: 3.4%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 22.5%;
+  left: 26.5%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart3 {
+  position: absolute;
+  top: 62.5%;
+  left: 3.4%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart4 {
+  position: absolute;
+  top: 62.5%;
+  left: 26.5%;
+  width: 23%;
+  height: 32%;
+}
+
+.span {
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.span1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+</style>

hw-ui/src/views/board/warehouse/firstFloor.vue

@@ -47,24 +47,29 @@
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
             <div
-              class="scrollTableItem">
-              {{ item.value1 }}
+              class="scrollTableItem"
+            >
+              {{ item.taskCode }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value2 }}
+              class="scrollTableItem"
+            >
+              入库
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value3 }}
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value4 }}
+              class="scrollTableItem"
+            >
+              {{ item.locationCode }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value5 }}
+              class="scrollTableItem"
+            >
+              {{ item.applylate }}
             </div>
           </div>
         </div>
@@ -91,64 +96,57 @@
       </div>
       <vue-seamless-scroll
         :class-option="scrollTableOption"
-        :data="scrollTableData"
+        :data="scrollTableData1"
         class="case-item"
         style="height: calc(100% - 30px);overflow: hidden;"
       >
         <div
-          v-for="(item, index) in scrollTableData"
+          v-for="(item, index) in scrollTableData1"
           :key="index"
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
             <div
-              class="scrollTableItem">
-              {{ item.value1 }}
+              class="scrollTableItem"
+            >
+              {{ item.orderCode }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value2 }}
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value3 }}
+              class="scrollTableItem"
+            >
+              {{ item.saleAmount }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value4 }}
+              class="scrollTableItem"
+            >
+              <!--              {{ item.value4 }}-->
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value5 }}
+              class="scrollTableItem"
+            >
+              {{ item.releaseTime }}
             </div>
           </div>
         </div>
       </vue-seamless-scroll>
     </div>
 
-    <div class="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">0</div>
-
-    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;color:#59ee7b">0</div>
-
-    <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-
-    <div class="num1 num1_13" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_14" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_15" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_16" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
-
-    <div class="num1 num1_17" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
-    <div class="num1 num1_18" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
-    <div class="num1 num1_19" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
-    <div class="num1 num1_20" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
+    <div class="num1 num1_1" style="top: 11.9%;left:17.4%;color:#5fc2f2">{{ topData.num1[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:21%;color:#5fc2f2">{{ topData.num1[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:24.5%;color:#5fc2f2">{{ topData.num1[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:28.1%;color:#5fc2f2">{{ topData.num1[3] }}</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">{{ topData.num2[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:53.6%;color:#59ee7b">{{ topData.num2[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">{{ topData.num2[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:60.7%;color:#59ee7b">{{ topData.num2[3] }}</div>
+    <div class="num1 num1_9" style="top: 11.9%;left:82.6%;color:#f60008">{{ topData.num3[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:86.2%;color:#f60008">{{ topData.num3[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:89.7%;color:#f60008">{{ topData.num3[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:93.2%;color:#f60008">{{ topData.num3[3] }}</div>
 
   </div>
 </template>
@@ -161,6 +159,14 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
 import Chart from '@/components/board/Chart'
 import HighChart from '@/components/board/HighChart'
 import * as echarts from 'echarts'
+import {
+  bomInfo,
+  inAndOutInfo,
+  productInAndOutInfo,
+  purchaseInfo,
+  stockPercentage
+} from '@/api/board/firstFloorWarehouse'
+import { parseTime } from '@/utils/ruoyi'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -172,26 +178,31 @@ export default {
   },
   data() {
     return {
+      topData: {
+        num1: [0, 0, 0, 0],
+        num2: [0, 0, 0, 0],
+        num3: [0, 0, 0, 0]
+      },
       title: [
+        '原料库入库数量:',
         '原料库出库数量:',
-        '辅料库出库数量:',
-        '半成品入库数量:',
-        '辅料库出库数量:',
         '半成品入库数量:',
+        '  ',
+        '  ',
         '库存占比'
       ],
       titlePosition: [
         {
           top: 11.5,
-          left: 3.5
+          left: 7.5
         },
         {
           top: 11.5,
-          left: 22.5
+          left: 40.3
         },
         {
           top: 11.5,
-          left: 41.3
+          left: 72.8
         },
         {
           top: 11.5,
@@ -214,341 +225,14 @@ export default {
         openWatch: true, // 开启数据实时监控刷新dom
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 0,
+        waitTime: 0
       },
-      scrollTableData: Array(100).fill('').map(function (i, k) {
-        return {
-          value1: k + 1,
-          value2: '出库',
-          value3: '物料1',
-          value4: '000' + k,
-          value5: '2024.03.04',
-        }
-      }),
+      scrollTableData: [],
+      scrollTableData1: []
     }
   },
   mounted() {
-    this.$refs.chart1.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function() {
-            let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              })
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              })
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              })
-            })
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart2.setData({
-      title: {
-        text: '原料库存占比',
-        style: {
-          color: '#fff'
-        }
-      },
-      credits: {
-        enabled: false
-      },
-      chart: {
-        type: 'pie',
-        startAngle: Math.PI / 6,
-        animation: false,
-        backgroundColor: null,
-        events: {
-          load: function() {
-            let each = Highcharts.each,
-              points = this.series[0].points
-            each(points, function(p, i) {
-              p.graphic.attr({
-                translateY: -p.shapeArgs.ran
-              })
-              p.graphic.side1.attr({
-                translateY: -p.shapeArgs.ran
-              })
-              p.graphic.side2.attr({
-                translateY: -p.shapeArgs.ran
-              })
-            })
-          }
-        },
-        options3d: {
-          enabled: true,
-          alpha: 60,
-          beta: 0
-        }
-      },
-      legend: {
-        reversed: true,
-        itemStyle: {
-          color: '#fff'
-        }
-      },
-      plotOptions: {
-        pie: {
-          allowPointSelect: false,
-          cursor: 'pointer',
-          depth: 35,
-          startAngle: 45,
-          size: 200,
-          dataLabels: {
-            enabled: true,
-            formatter: function() {
-              return this.point.options.name + '<br>' + this.point.options.h + '%'
-            }
-          },
-          showInLegend: false,
-          point: {
-            events: {
-              legendItemClick: function(e) {
-                return false // 直接 return false 即可禁用图例点击事件
-              }
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          name: 'Browser share',
-          data: [
-            {
-              'name': '材料1',
-              y: 30.0,
-              h: 30.0
-            },
-            {
-              name: '材料2',
-              y: 26.8,
-              h: 26.8
-            },
-            {
-              'name': '材料3',
-              y: 15,
-              h: 15
-            },
-            {
-              name: '材料4',
-              y: 12.8,
-              h: 12.8
-            },
-            {
-              'name': '材料5',
-              y: 8.5,
-              h: 8.5
-            },
-            {
-              'name': '材料6',
-              y: 6.2,
-              h: 6.2
-            },
-            {
-              'name': '材料7',
-              y: 0.7,
-              h: 0.7
-            }
-          ].sort((a, b) => a.y - b.y)
-        }]
-    })
-    this.$refs.chart3.setData({
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          // 坐标轴指示器，坐标轴触发有效
-          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-        },
-      },
-      grid: {
-        left: "2%",
-        right: "4%",
-        bottom: "14%",
-        top: "16%",
-        containLabel: true,
-      },
-      legend: {
-        x: 'center',
-        top: 12,
-        textStyle: {
-          color: "#fff",
-        },
-        itemWidth: 12,
-        itemHeight: 10,
-        // itemGap: 35
-      },
-      xAxis: {
-        type: "category",
-        data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
-        axisLine: {
-          lineStyle: {
-            color: "white",
-          },
-        },
-        axisLabel: {
-          // interval: 0,
-          // rotate: 40,
-          textStyle: {
-            fontFamily: "Microsoft YaHei",
-          },
-        },
-      },
-
-      yAxis: {
-        type: "value",
-        max: "1200",
-        axisLine: {
-          show: false,
-          lineStyle: {
-            color: "white",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: "rgba(255,255,255,0.3)",
-          },
-        },
-        axisLabel: {},
-      },
-      series: [
-        {
-          name: "入库",
-          type: "bar",
-          barWidth: "15%",
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#fccb05",
-                },
-                {
-                  offset: 1,
-                  color: "#f5804d",
-                },
-              ]),
-            },
-          },
-          data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
-        },
-        {
-          name: "出库",
-          type: "bar",
-          barWidth: "15%",
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#8bd46e",
-                },
-                {
-                  offset: 1,
-                  color: "#09bcb7",
-                },
-              ]),
-            },
-          },
-          data: [400, 500, 500, 500, 500, 400, 400, 500, 500],
-        },
-      ],
-    })
+    this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.resize()
@@ -556,7 +240,320 @@ export default {
       this.$refs.chart3.resize()
     }
   },
-  methods: {}
+  methods: {
+    getData() {
+      inAndOutInfo().then(e => {
+        console.log(e)
+        this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4)
+      })
+      stockPercentage().then(e => {
+        let num1 = e.data.nostockAmount + e.data.stockAmount
+        let num2 = e.data.stockAmount
+        let num2_1
+        let num3 = e.data.nostockAmount
+        let num3_1
+        if (num1 === 0) {
+          num2_1 = 50
+          num3_1 = 50
+        } else {
+          num2_1 = parseFloat(((num2 / num1) * 100).toFixed(2))
+          num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
+        }
+        this.$refs.chart1.setData({
+          title: {
+            text: '原料库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: num2_1,
+                  h: Math.min(num2_1, 50)
+                },
+                {
+                  name: '未使用',
+                  y: num3_1,
+                  h: Math.min(num3_1, 50)
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+        let num11 = e.data.noProductstockAmount + e.data.productstockAmount
+        let num12 = e.data.productstockAmount
+        let num12_1
+        let num13 = e.data.noProductstockAmount
+        let num13_1
+        if (num11 === 0) {
+          num12_1 = 50
+          num13_1 = 50
+        } else {
+          num12_1 = parseFloat(((num12 / num11) * 100).toFixed(2))
+          num13_1 = parseFloat(((num13 / num11) * 100).toFixed(2))
+        }
+        this.$refs.chart2.setData({
+          title: {
+            text: '成品库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: num12_1,
+                  h: num12_1
+                },
+                {
+                  name: '未使用',
+                  y: num12_1,
+                  h: num12_1
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+      })
+      purchaseInfo().then(e => {
+        this.scrollTableData = e.data
+      })
+      bomInfo().then(e => {
+        this.scrollTableData1 = e.data
+      })
+      productInAndOutInfo().then(e => {
+        this.$refs.chart3.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '2%',
+            right: '4%',
+            bottom: '14%',
+            top: '16%',
+            containLabel: true
+          },
+          legend: {
+            x: 'center',
+            top: 12,
+            textStyle: {
+              color: '#fff'
+            },
+            itemWidth: 12,
+            itemHeight: 10
+            // itemGap: 35
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            }
+          },
+
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.3)'
+              }
+            },
+            axisLabel: {}
+          },
+          series: [
+            {
+              name: '入库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#fccb05'
+                    },
+                    {
+                      offset: 1,
+                      color: '#f5804d'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.instockAmount)
+            },
+            {
+              name: '出库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#8bd46e'
+                    },
+                    {
+                      offset: 1,
+                      color: '#09bcb7'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.outStockAmount)
+            }
+          ]
+        })
+      })
+    }
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -646,18 +643,19 @@ export default {
 
 .table1 {
   position: absolute;
-  top: 52.9%;
+  top: 62.9%;
   left: 3.4%;
   width: 45.7%;
-  height: 40%;
+  height: 32%;
   color: #fff;
 }
+
 .table2 {
   position: absolute;
-  top: 52.9%;
+  top: 62.9%;
   left: 50.4%;
   width: 45.7%;
-  height: 40%;
+  height: 32%;
   color: #fff;
 }
 

hw-ui/src/views/board/warehouse/fourthFloor.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">京源智能仓储监控平台</div>
+    <div v-for="(i,k) in title"
+         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
+         class="title"
+    >
+      {{ i }}
+    </div>
+    <div class="chart1">
+      <HighChart key="chart1" ref="chart1"></HighChart>
+    </div>
+    <div class="chart2">
+      <HighChart key="chart2" ref="chart2"></HighChart>
+    </div>
+    <div class="chart3">
+      <Chart key="chart3" ref="chart3"></Chart>
+    </div>
+
+    <div class="table1">
+      <div style="background-color: #1077bc19">
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          任务类型
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          物料名称
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          库位编号
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          时间
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.taskCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              入库
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.locationCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.applylate }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+
+    <div class="table2">
+      <div style="background-color: #1077bc19">
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          订单
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          物料
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          物料需求
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          Bom分解
+        </div>
+        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
+          时间
+        </div>
+      </div>
+      <vue-seamless-scroll
+        :class-option="scrollTableOption"
+        :data="scrollTableData1"
+        class="case-item"
+        style="height: calc(100% - 30px);overflow: hidden;"
+      >
+        <div
+          v-for="(item, index) in scrollTableData1"
+          :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.orderCode }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.materialName }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.saleAmount }}
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              <!--              {{ item.value4 }}-->
+            </div>
+            <div
+              class="scrollTableItem"
+            >
+              {{ item.releaseTime }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+
+    <div class="num1 num1_1" style="top: 11.9%;left:17.4%;color:#5fc2f2">{{ topData.num1[0] }}</div>
+    <div class="num1 num1_2" style="top: 11.9%;left:21%;color:#5fc2f2">{{ topData.num1[1] }}</div>
+    <div class="num1 num1_3" style="top: 11.9%;left:24.5%;color:#5fc2f2">{{ topData.num1[2] }}</div>
+    <div class="num1 num1_4" style="top: 11.9%;left:28.1%;color:#5fc2f2">{{ topData.num1[3] }}</div>
+    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">{{ topData.num2[0] }}</div>
+    <div class="num1 num1_6" style="top: 11.9%;left:53.6%;color:#59ee7b">{{ topData.num2[1] }}</div>
+    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">{{ topData.num2[2] }}</div>
+    <div class="num1 num1_8" style="top: 11.9%;left:60.7%;color:#59ee7b">{{ topData.num2[3] }}</div>
+    <div class="num1 num1_9" style="top: 11.9%;left:82.6%;color:#f60008">{{ topData.num3[0] }}</div>
+    <div class="num1 num1_10" style="top: 11.9%;left:86.2%;color:#f60008">{{ topData.num3[1] }}</div>
+    <div class="num1 num1_11" style="top: 11.9%;left:89.7%;color:#f60008">{{ topData.num3[2] }}</div>
+    <div class="num1 num1_12" style="top: 11.9%;left:93.2%;color:#f60008">{{ topData.num3[3] }}</div>
+
+  </div>
+</template>
+
+<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
+<!--  质量接口 柱状图 +折线图 合格率和数量   -->
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import Chart from '@/components/board/Chart'
+import HighChart from '@/components/board/HighChart'
+import * as echarts from 'echarts'
+import {
+  bomInfo,
+  inAndOutInfo,
+  productInAndOutInfo,
+  purchaseInfo,
+  stockPercentage
+} from '@/api/board/firstFloorWarehouse'
+import { parseTime } from '@/utils/ruoyi'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: 'Board1',
+  components: {
+    vueSeamlessScroll,
+    Chart,
+    HighChart
+  },
+  data() {
+    return {
+      topData: {
+        num1: [0, 0, 0, 0],
+        num2: [0, 0, 0, 0],
+        num3: [0, 0, 0, 0]
+      },
+      title: [
+        '原料库入库数量:',
+        '原料库出库数量:',
+        '半成品入库数量:',
+        '  ',
+        '  ',
+        '库存占比'
+      ],
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 7.5
+        },
+        {
+          top: 11.5,
+          left: 40.3
+        },
+        {
+          top: 11.5,
+          left: 72.8
+        },
+        {
+          top: 11.5,
+          left: 60.3
+        },
+        {
+          top: 11.5,
+          left: 79.1
+        },
+        {
+          top: 19.4,
+          left: 5.5
+        }
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 0
+      },
+      scrollTableData: [],
+      scrollTableData1: []
+    }
+  },
+  mounted() {
+    this.getData()
+
+    window.onresize = () => {
+      this.$refs.chart1.resize()
+      this.$refs.chart2.resize()
+      this.$refs.chart3.resize()
+    }
+  },
+  methods: {
+    getData() {
+      inAndOutInfo().then(e => {
+        console.log(e)
+        this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
+        this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4)
+      })
+      stockPercentage().then(e => {
+        let num1 = e.data.nostockAmount + e.data.stockAmount
+        let num2 = e.data.stockAmount
+        let num2_1
+        let num3 = e.data.nostockAmount
+        let num3_1
+        if (num1 === 0) {
+          num2_1 = 50
+          num3_1 = 50
+        } else {
+          num2_1 = parseFloat(((num2 / num1) * 100).toFixed(2))
+          num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
+        }
+        this.$refs.chart1.setData({
+          title: {
+            text: '原料库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: num2_1,
+                  h: Math.min(num2_1, 50)
+                },
+                {
+                  name: '未使用',
+                  y: num3_1,
+                  h: Math.min(num3_1, 50)
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+        let num11 = e.data.noProductstockAmount + e.data.productstockAmount
+        let num12 = e.data.productstockAmount
+        let num12_1
+        let num13 = e.data.noProductstockAmount
+        let num13_1
+        if (num11 === 0) {
+          num12_1 = 50
+          num13_1 = 50
+        } else {
+          num12_1 = parseFloat(((num12 / num11) * 100).toFixed(2))
+          num13_1 = parseFloat(((num13 / num11) * 100).toFixed(2))
+        }
+        this.$refs.chart2.setData({
+          title: {
+            text: '成品库存占比',
+            style: {
+              color: '#fff'
+            }
+          },
+          credits: {
+            enabled: false
+          },
+          chart: {
+            type: 'pie',
+            startAngle: Math.PI / 6,
+            animation: false,
+            backgroundColor: null,
+            events: {
+              load: function() {
+                let each = Highcharts.each,
+                  points = this.series[0].points
+                each(points, function(p, i) {
+                  p.graphic.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side1.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                  p.graphic.side2.attr({
+                    translateY: -p.shapeArgs.ran
+                  })
+                })
+              }
+            },
+            options3d: {
+              enabled: true,
+              alpha: 60,
+              beta: 0
+            }
+          },
+          legend: {
+            reversed: true,
+            itemStyle: {
+              color: '#fff'
+            }
+          },
+          plotOptions: {
+            pie: {
+              allowPointSelect: false,
+              cursor: 'pointer',
+              depth: 35,
+              startAngle: 45,
+              size: 200,
+              dataLabels: {
+                enabled: true,
+                formatter: function() {
+                  return this.point.options.name + '<br>' + this.point.options.h + '%'
+                }
+              },
+              showInLegend: false,
+              point: {
+                events: {
+                  legendItemClick: function(e) {
+                    return false // 直接 return false 即可禁用图例点击事件
+                  }
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              name: '占比',
+              data: [
+                {
+                  'name': '已使用',
+                  y: num12_1,
+                  h: num12_1
+                },
+                {
+                  name: '未使用',
+                  y: num12_1,
+                  h: num12_1
+                }
+              ].sort((a, b) => a.y - b.y)
+            }]
+        })
+      })
+      purchaseInfo().then(e => {
+        this.scrollTableData = e.data
+      })
+      bomInfo().then(e => {
+        this.scrollTableData1 = e.data
+      })
+      productInAndOutInfo().then(e => {
+        this.$refs.chart3.setData({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '2%',
+            right: '4%',
+            bottom: '14%',
+            top: '16%',
+            containLabel: true
+          },
+          legend: {
+            x: 'center',
+            top: 12,
+            textStyle: {
+              color: '#fff'
+            },
+            itemWidth: 12,
+            itemHeight: 10
+            // itemGap: 35
+          },
+          xAxis: {
+            type: 'category',
+            data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
+            axisLine: {
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            }
+          },
+
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: 'white'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.3)'
+              }
+            },
+            axisLabel: {}
+          },
+          series: [
+            {
+              name: '入库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#fccb05'
+                    },
+                    {
+                      offset: 1,
+                      color: '#f5804d'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.instockAmount)
+            },
+            {
+              name: '出库',
+              type: 'bar',
+              barWidth: '15%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#8bd46e'
+                    },
+                    {
+                      offset: 1,
+                      color: '#09bcb7'
+                    }
+                  ])
+                }
+              },
+              data: e.data.map(v => v.outStockAmount)
+            }
+          ]
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/warehouseBg3.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.warehouse {
+  background-image: url("../../../assets/board/warehouse1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  width: 18%;
+  height: 27.8%;
+  top: 65%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.num1 {
+  position: absolute;
+  font-size: 1.5vw;
+  transform: translate(-50%, -50%);
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+
+.chart1 {
+  position: absolute;
+  top: 22.5%;
+  left: 3.4%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 22.5%;
+  left: 26.5%;
+  width: 23%;
+  height: 32%;
+}
+
+.chart3 {
+  position: absolute;
+  top: 22.5%;
+  left: 50.4%;
+  width: 46%;
+  height: 32%;
+}
+
+
+.span {
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.span1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.table1 {
+  position: absolute;
+  top: 62.9%;
+  left: 3.4%;
+  width: 45.7%;
+  height: 32%;
+  color: #fff;
+}
+
+.table2 {
+  position: absolute;
+  top: 62.9%;
+  left: 50.4%;
+  width: 45.7%;
+  height: 32%;
+  color: #fff;
+}
+
+.scrollTableItem {
+  display: inline-block;
+  width: calc(100% / 5);
+  text-align: center;
+  padding: 14px 0;
+  color: #4e99c5
+}
+
+</style>

hw-ui/src/views/board/warehouse/thirdFloor.vue

@@ -4,24 +4,25 @@
     <div class="headTitle">京源智能仓储监控平台</div>
     <div v-for="(i,k) in title"
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
-         class="title">
+         class="title"
+    >
       {{ i }}
     </div>
     <div class="table1">
       <div style="background-color: #094170aa">
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
           任务编号
         </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 13%">
           任务类型
         </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 13%">
           物料名称
         </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 13%">
           库位编号
         </div>
-        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
+        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 25%">
           时间
         </div>
       </div>
@@ -37,24 +38,29 @@
         >
           <div :style='"background-color:" + ((index % 2 === 0)? "#053460aa":"#032d57aa") '>
             <div
-              class="scrollTableItem">
-              {{ item.value1 }}
+              class="scrollTableItem" style="width: 36%"
+            >
+              {{ item.taskCode }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value2 }}
+              class="scrollTableItem" style="width: 13%"
+            >
+              {{ item.taskType }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value3 }}
+              class="scrollTableItem" style="width: 13%"
+            >
+              {{ item.materialId }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value4 }}
+              class="scrollTableItem" style="width: 13%"
+            >
+              {{ item.rawOutstockId }}
             </div>
             <div
-              class="scrollTableItem">
-              {{ item.value5 }}
+              class="scrollTableItem" style="width: 25%"
+            >
+              {{ item.applyDate }}
             </div>
           </div>
         </div>
@@ -64,22 +70,22 @@
       <Chart key="chart1" ref="chart1"></Chart>
     </div>
 
-    <div class="num1 num1_1" style="top: 26.7%;left: 43.1%;color:#5fc2f2">1</div>
-    <div class="num1 num1_2" style="top: 26.7%;left:46.1%;color:#5fc2f2">0</div>
-    <div class="num1 num1_3" style="top: 26.7%;left:49%;color:#5fc2f2">0</div>
-    <div class="num1 num1_4" style="top: 26.7%;left:52%;color:#5fc2f2">0</div>
-    <div class="num1 num1_5" style="top: 26.7%;left:56.2%;color:#59ee7b">1</div>
-    <div class="num1 num1_6" style="top: 26.7%;left:59.2%;color:#59ee7b">0</div>
-    <div class="num1 num1_7" style="top: 26.7%;left:62.2%;color:#59ee7b">0</div>
-    <div class="num1 num1_8" style="top: 26.7%;left:65.2%;color:#59ee7b">0</div>
-    <div class="num1 num1_9" style="top: 26.7%;left:70.8%;color:#f60008">1</div>
-    <div class="num1 num1_10" style="top: 26.7%;left:73.8%;color:#f60008">0</div>
-    <div class="num1 num1_11" style="top: 26.7%;left:76.8%;color:#f60008">0</div>
-    <div class="num1 num1_12" style="top: 26.7%;left:79.8%;color:#f60008">0</div>
-    <div class="num1 num1_13" style="top: 26.7%;left:84%;color:#f60008">1</div>
-    <div class="num1 num1_14" style="top: 26.7%;left:87%;color:#f60008">0</div>
-    <div class="num1 num1_15" style="top: 26.7%;left:90%;color:#f60008">0</div>
-    <div class="num1 num1_16" style="top: 26.7%;left:93%;color:#f60008">0</div>
+    <div class="num1 num1_1" style="top: 26.7%;left: 43.1%;color:#5fc2f2">{{ warehouseData.dayRawInAmount[0] }}</div>
+    <div class="num1 num1_2" style="top: 26.7%;left:46.1%;color:#5fc2f2">{{ warehouseData.dayRawInAmount[1] }}</div>
+    <div class="num1 num1_3" style="top: 26.7%;left:49%;color:#5fc2f2">{{ warehouseData.dayRawInAmount[2] }}</div>
+    <div class="num1 num1_4" style="top: 26.7%;left:52%;color:#5fc2f2">{{ warehouseData.dayRawInAmount[3] }}</div>
+    <div class="num1 num1_5" style="top: 26.7%;left:56.2%;color:#59ee7b">{{ warehouseData.dayRawOutAmount[0] }}</div>
+    <div class="num1 num1_6" style="top: 26.7%;left:59.2%;color:#59ee7b">{{ warehouseData.dayRawOutAmount[1] }}</div>
+    <div class="num1 num1_7" style="top: 26.7%;left:62.2%;color:#59ee7b">{{ warehouseData.dayRawOutAmount[2] }}</div>
+    <div class="num1 num1_8" style="top: 26.7%;left:65.2%;color:#59ee7b">{{ warehouseData.dayRawOutAmount[3] }}</div>
+    <div class="num1 num1_9" style="top: 26.7%;left:70.8%;color:#f60008">{{ warehouseData.monthRawInAmount[0] }}</div>
+    <div class="num1 num1_10" style="top: 26.7%;left:73.8%;color:#f60008">{{ warehouseData.monthRawInAmount[1] }}</div>
+    <div class="num1 num1_11" style="top: 26.7%;left:76.8%;color:#f60008">{{ warehouseData.monthRawInAmount[2] }}</div>
+    <div class="num1 num1_12" style="top: 26.7%;left:79.8%;color:#f60008">{{ warehouseData.monthRawInAmount[3] }}</div>
+    <div class="num1 num1_13" style="top: 26.7%;left:84%;color:#f60008">{{ warehouseData.monthRawOutAmount[0] }}</div>
+    <div class="num1 num1_14" style="top: 26.7%;left:87%;color:#f60008">{{ warehouseData.monthRawOutAmount[1] }}</div>
+    <div class="num1 num1_15" style="top: 26.7%;left:90%;color:#f60008">{{ warehouseData.monthRawOutAmount[2] }}</div>
+    <div class="num1 num1_16" style="top: 26.7%;left:93%;color:#f60008">{{ warehouseData.monthRawOutAmount[3] }}</div>
     <div class="span" style="top: 14.7%; left: 41%; color:#7ba9cb;font-size: 1.2vw">仓库库位/出入库统计</div>
     <div class="span" style="top: 21.7%; left: 42%; color:#7ba9cb;font-size: 0.9vw">单日入库量</div>
     <div class="span" style="top: 21.7%; left: 55%; color:#7ba9cb;font-size: 0.9vw">单日出库量</div>
@@ -111,9 +117,10 @@
 </template>
 
 <script>
-import vueSeamlessScroll from "vue-seamless-scroll";
+import vueSeamlessScroll from 'vue-seamless-scroll'
 import Chart from '@/components/board/Chart'
 import * as echarts from 'echarts'
+import { locationStatus, monthRawAmount, productCompleteCount, productPlan } from '@/api/board/thirdFloorWarehouse'
 
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
@@ -124,9 +131,15 @@ export default {
   },
   data() {
     return {
+      warehouseData: {
+        dayRawInAmount: [0, 0, 0, 0],
+        dayRawOutAmount: [0, 0, 0, 0],
+        monthRawInAmount: [0, 0, 0, 0],
+        monthRawOutAmount: [0, 0, 0, 0]
+      },
       title: [
         '生产计划',
-        '当前库存统计',
+        '当前库存统计'
       ],
       titlePosition: [
         {
@@ -136,7 +149,7 @@ export default {
         {
           top: 58.7,
           left: 5.5
-        },
+        }
       ],
       scrollTableOption: {
         step: 0.5, // 数值越大速度滚动越快
@@ -146,196 +159,210 @@ export default {
         openWatch: true, // 开启数据实时监控刷新dom
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 0,
+        waitTime: 0
       },
-      scrollTableData: Array(100).fill('').map(function (i, k) {
-        return {
-          value1: k + 1,
-          value2: '出库',
-          value3: '物料1',
-          value4: '000' + k,
-          value5: '2024.03.04',
-        }
-      }),
+      scrollTableData: []
     }
   },
   mounted() {
-    this.$refs.chart1.setData({
-      grid: {
-        top: "10%",
-        left: "5%",
-        right: "5%",
-        bottom: "10%",
-      },
-      tooltip: {
-        trigger: "axis",
-        axisPointer: {
-          type: "shadow",
-          label: {
-            show: true,
-          },
-        },
-      },
-      legend: {
-        data: ["出库", "入库"],
-        top: "0%",
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-      xAxis: {
-        data: [
-          "物料1",
-          "物料2",
-          "物料3",
-          "物料4",
-          "物料5",
-          "物料6",
-          "物料7",
-          "物料8",
-        ],
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-      },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          margin: 10,
-          color: "#ffffff63",
-        },
-
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: "#ffffff1f",
-          },
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: 'dashed',
-            color: "#ffffff1f",
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#fff3",
-            width: 2,
-          },
-        },
-      },
-      series: [
-        {
-          name: "出库",
-          type: "bar",
-          barWidth: '25%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                1,
-                0,
-                0,
-                [
-                  {
-                    offset: 0,
-                    color: "#0a2ad7",
-                  },
-                  {
-                    offset: 1,
-                    color: "#138dd7",
-                  },
-                ],
-                false
-              ),
-            },
-          },
-          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-        },
-        {
-          name: "入库",
-          type: "bar",
-          barWidth: '25%',
-          barGap: '20%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                1,
-                0,
-                0,
-                [
-                  {
-                    offset: 0,
-                    color: "#159d40",
-                  },
-                  {
-                    offset: 1,
-                    color: "#0bcb98",
-                  },
-                ],
-                false
-              ),
-            },
-          },
-          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-        },
-        {
-          name: "",
-          tooltip: {
-            show: false
-          },
-          type: "pictorialBar",
-          barWidth: "25%",
-          symbolSize: ['100%', 5],
-          symbolPosition: 'end',
-          symbolOffset: ['-60%', -3],
-          itemStyle: {
-            color: '#138dd7'
-          },
-          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-        },
-        {
-          name: "",
-          type: "pictorialBar",
-          tooltip: {
-            show: false
-          },
-          barWidth: "25%",
-          symbolSize: ['100%', 5],
-          symbolPosition: 'end',
-          symbolOffset: ['60%', -3],
-          itemStyle: {
-            color: '#0bcb98'
-          },
-          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
-        },
-      ],
-    })
+    this.getData()
 
     window.onresize = () => {
       this.$refs.chart1.chart.resize()
     }
   },
-  methods: {}
+  methods: {
+    getData() {
+      monthRawAmount().then(e => {
+        this.warehouseData.dayRawInAmount = [...[0, 0, 0, 0], ...(e.data.dayRawInAmount || 0).toString().split('')].slice(-4)
+        this.warehouseData.dayRawOutAmount = [...[0, 0, 0, 0], ...(e.data.dayRawOutAmount || 0).toString().split('')].slice(-4)
+        this.warehouseData.monthRawInAmount = [...[0, 0, 0, 0], ...(e.data.monthRawInAmount || 0).toString().split('')].slice(-4)
+        this.warehouseData.monthRawOutAmount = [...[0, 0, 0, 0], ...(e.data.monthRawOutAmount || 0).toString().split('')].slice(-4)
+      })
+      locationStatus().then(e => {
+        console.log(e)
+      })
+      productCompleteCount().then(e=>{
+
+        this.$refs.chart1.setData({
+          grid: {
+            top: '10%',
+            left: '5%',
+            right: '5%',
+            bottom: '10%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true
+              }
+            }
+          },
+          legend: {
+            data: ['出库', '入库'],
+            top: '0%',
+            textStyle: {
+              color: '#ffffff'
+            }
+          },
+          xAxis: {
+            data: e.data.map(v => v.materialId),
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              margin: 10,
+              color: '#ffffff63'
+            },
+
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#ffffff1f'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: '#ffffff1f'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#fff3',
+                width: 2
+              }
+            }
+          },
+          series: [
+            {
+              name: '出库',
+              type: 'bar',
+              barWidth: '25%',
+              barMaxWidth: '20px',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      {
+                        offset: 0,
+                        color: '#0a2ad7'
+                      },
+                      {
+                        offset: 1,
+                        color: '#138dd7'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.outStock)
+            },
+            {
+              name: '入库',
+              type: 'bar',
+              barWidth: '25%',
+              barMaxWidth: '20px',
+              barGap: '20%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      {
+                        offset: 0,
+                        color: '#159d40'
+                      },
+                      {
+                        offset: 1,
+                        color: '#0bcb98'
+                      }
+                    ],
+                    false
+                  )
+                }
+              },
+              data: e.data.map(v => v.inStock)
+            },
+            {
+              name: '',
+              tooltip: {
+                show: false
+              },
+              type: 'pictorialBar',
+              barWidth: '25%',
+              barMaxWidth: '20px',
+              symbolSize: ['100%', 5],
+              symbolPosition: 'end',
+              symbolOffset: ['-60%', -3],
+              itemStyle: {
+                color: '#138dd7'
+              },
+              data: e.data.map(v => v.outStock)
+            },
+            {
+              name: '',
+              type: 'pictorialBar',
+              tooltip: {
+                show: false
+              },
+              barWidth: '25%',
+              barMaxWidth: '20px',
+              symbolSize: ['100%', 5],
+              symbolPosition: 'end',
+              symbolOffset: ['60%', -3],
+              itemStyle: {
+                color: '#0bcb98'
+              },
+              data: e.data.map(v => v.inStock)
+            }
+          ]
+        })
+      })
+      productPlan().then(e => {
+        this.scrollTableData = e.data.map(v => {
+          return {
+            taskCode: v.taskCode,
+            taskType: v.taskType,
+            materialId: v.materialId,
+            rawOutstockId: v.rawOutstockId,
+            applyDate: v.applyDate
+          }
+        })
+      })
+    }
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -400,7 +427,8 @@ export default {
   width: calc(100% / 5);
   text-align: center;
   padding: 14px 0;
-  color: #fff9
+  color: #fff9;
+  font-size: 0.8vw;
 }
 
 .chart1 {