9.29代码提交

package-lock.json

@@ -13,6 +13,7 @@
         "echarts": "^5.5.1",
         "element-plus": "^2.3.14",
         "less": "^4.2.0",
+        "moment": "^2.30.1",
         "three": "^0.164.1",
         "video.js": "^7.21.6",
         "vue": "^3.3.4",
@@ -1902,6 +1903,14 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mpd-parser": {
       "version": "0.22.1",
       "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",
@@ -4392,6 +4401,11 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
+    },
     "mpd-parser": {
       "version": "0.22.1",
       "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "echarts": "^5.5.1",
     "element-plus": "^2.3.14",
     "less": "^4.2.0",
+    "moment": "^2.30.1",
     "three": "^0.164.1",
     "video.js": "^7.21.6",
     "vue": "^3.3.4",

public/1.pdf

@@ -0,0 +1,21 @@
+运行代理服务器
+
+1） 修改\nginx\conf 路径下的 nginx.conf 文件，把 server 节点下的 listen 和 server_name 中
+     的 IP 和端口，直接修改成运行 nginx 所在 PC 或者服务器的网卡的 IP 和端口，之后保存
+     文件。
+     (截图示例中部署 nginx 代理服务器所在的 PC 的 IP 为 10.17.35.14，81 为没有被占用的
+     端口，第三方对接时需要修改成实际环境中的 IP 和端口)。
+
+2）运行 nginx-1.10.2 里面的 start.bat 开启代理服务器。
+运行 Demo 页面
+
+浏览器地址栏输入：http://ip:port/cn/demo.html
+（这边的 IP 和 PORT 为第一步骤中，nginx.conf 里配置的 IP 和 PORT，示例中使用的是
+10.17.35.14 和 81，所以地址栏里输入：http://10.17.35.14:81/cn/demo.html）
+
+页面中，登录设备需要输入海康硬件设备的 IP 地址、端口、用户名和密码，其中端口为设
+备的 HTTP 端口（默认内网的 80）
+停止运行代理服务器
+
+运行 nginx-1.10.2 里面的 stop.bat 可以停止运行代理服务器。
+

src/api/home.js

@@ -56,3 +56,39 @@ export function getLocInfo(params){
         params
     })
 }
+// 库存消息
+export function getInventoryMessage(params){
+    return request({
+        url:'/api/inventory/GetInventoryMessage',
+        method:'get',
+        params
+    })
+}
+
+// 即时库存信息情况
+export function getStoreMsg(params){
+    return request({
+        url:'/api/inventory/GetInventoryInfo',
+        method:'get',
+        params
+    })
+}
+
+// 空箱 实箱 批次数据获取
+export function getBrandBox(params){
+    return request({
+        url:'/api/location/GetLocInfo',
+        method:'get',
+        params
+    })
+}
+
+// 获取各品牌库存情况表格数据接口
+export function getBrandTable(params){
+    return request({
+        url:'/api/location/GetConLocData',
+        method:'get',
+        params
+    })
+
+}

src/api/operation/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+// 设备基础信息页面
+export function downloadPdf(url){
+    return request({
+        url:url,
+        method:'get',
+        responseType: 'blob',
+    })
+}

src/api/productionInformation/index.js

@@ -0,0 +1,79 @@
+
+import request from '@/utils/request'
+// 入库信息
+// 获取各品牌的占比
+export function getBrandPercent(params){
+    return request({
+        url:'/api/inOrder/GetBrandPercent',
+        method:'get',
+        params
+    })
+}
+// 获取仓库细节
+export function getRepoDetails(params){
+    return request({
+        url:'/api/inOrder/GetRepoDetails',
+        method:'get',
+        params
+    })
+}
+// 获取所有的品牌名称
+export function getBrandNames(params){
+    return request({
+        url:'/api/inOrder/GetBrandNames',
+        method:'get',
+        params
+    })
+}
+// 获取某品牌某年某月的情况
+export function getBrandTimeCount(params){
+    return request({
+        url:'/api/inOrder/GetBrandTimeCount',
+        method:'get',
+        params
+    })
+}
+
+// 出库信息
+// 获取各品牌的占比
+export function getOutBrandPercent(params){
+    return request({
+        url:'/api/outOrder/GetBrandPercent',
+        method:'get',
+        params
+    })
+}
+// 获取仓库细节
+export function getOutRepoDetails(params){
+    return request({
+        url:'/api/outOrder/GetRepoDetails',
+        method:'get',
+        params
+    })
+}
+// 获取所有的品牌名称
+export function getOutBrandNames(params){
+    return request({
+        url:'/api/outOrder/GetBrandNames',
+        method:'get',
+        params
+    })
+}
+// 获取某品牌某年某月的情况
+export function getOutBrandTimeCount(params){
+    return request({
+        url:'/api/outOrder/GetBrandTimeCount',
+        method:'get',
+        params
+    })
+}
+
+
+// 装箱站入库统计
+export function getWeightBetweenTime(params){
+    return request({
+        url:'/api/inOrder/GetWeightBetweenTime',
+        method:'get',
+        params
+    })
+}

src/components/echarts/pie.vue

@@ -65,7 +65,7 @@ function initChart() {
       {
         type: "image",
         style: {
-          image: getPath.fontBg, // 图片地址
+          image: props.dataMap.name?getPath.fontBg:'', // 图片地址
           width: 52,
           height: 24,
         },
@@ -80,26 +80,26 @@ function initChart() {
         top: "69%",
         style: {
           fill: "#fff",
-          text: `${props.dataMap.name}`,
+          text: `${props.dataMap.name?props.dataMap.name:''}`,
-          fontSize: `14`,
+          fontSize: `0.8rem`,
         },
       },
       {
         type: "text",
         z: 100,
         left: "center",
-        top: props.dataMap.kg?"81%":"84%",
+        top: '78%',
         style: {
           fill: "#fff",
-          text: `${props.dataMap.type}`,
+          text: `${props.dataMap.type?props.dataMap.type:''}`,
-          fontSize: `12`,
+          fontSize: `0.9rem`,
         },
       },
       {
         type: "text",
         z: 100,
         left: "center",
-        top: "91%",
+        top: "85%",
         style: {
           fill: "rgba(255, 206, 84, 1)",
           text: `${props.dataMap.kg?props.dataMap.kg:''}`,

src/components/equipmentManagement/components/health/index.vue

@@ -170,12 +170,12 @@ function getTableList() {
   if (props.title === "备件更换统计") {
     getPageSparePart(params).then((res) => {
       tableList.value = res.result.data;
-      total.value = res.result.total;
+      total.value = res.result.totalNum;
     });
   } else if (props.title === "故障分析") {
     getPageFaultAnalysisInfo(params).then((res) => {
       tableList.value = res.result.data;
-      total.value = res.result.total;
+      total.value = res.result.totalNum;
     });
   } else if (props.title === "维修统计") {
     params.isMaintain = isMaintain.value;

src/components/equipmentManagement/deviceInfo.vue

@@ -135,7 +135,7 @@ const tableList = ref([]);
 const deviceListParams = reactive({
   name: "",
   code: "",
-  size:8,
+  size:10,
   index:1
 });
 const total = ref(0)

src/components/equipmentManagement/equipmentAnalysis.vue

@@ -325,7 +325,7 @@ function close() {
 const deviceListParams = reactive({
   deviceName: "",
   deviceCode: "",
-  size:8,
+  size:10,
   index:1
 });
 const total = ref(0)

src/components/equipmentManagement/maintenance.vue

@@ -497,7 +497,7 @@ function completedMaintenancePlan() {
 
 const planParams = reactive({
   pageIndex: 1,
-  pageSize: 3,
+  pageSize: 5,
   facName: "",
 });
 const total = ref(0);

src/components/operation/explosion.vue

@@ -55,7 +55,8 @@ const closeShow= ref(false);
 const emit = defineEmits(['closeExplosion'])
 const changeName = ref("穿梭车");
 function toggleHandle(index,item) {
-    console.log("item",item)
+  openShow.value = false
+  closeShow.value = false
   changeName.value = item
   liIndex.value = index;
   if(item==="穿梭车"){

src/components/operation/guidance.vue

@@ -9,14 +9,11 @@
       <div class="box-content">
         <div class="box-content-left-title">
           <span>文件列表</span>
-          </div>
           <!-- 选择框 -->
-          <div class="box-content-right-select">
+
           <el-select
             @clear="clearHandle"
-              @change="
+            @change="GetPageGuideDocsData(params1.code)"
-                GetPageGuideDocsData(params1.code);
-              "
             clearable
             v-model="params1.code"
             placeholder="请选择"
@@ -28,8 +25,8 @@
               :value="item.realCode"
             />
           </el-select>
-         
         </div>
+
         <ul>
           <li v-for="(item, index) in fileList" :key="'file' + index">
             <span>
@@ -38,241 +35,88 @@
             <span>
               <!-- <span class="preview">预览</span>
               <span class="download">下载</span> -->
-              <el-button
+              <el-button type="text" class="preview" @click="previewFile(item)"
-                  type="text"
-                  class="preview"
-                  @click="previewFile(item.filePath)"
                 >预览</el-button
               >
-                <el-button
+              <el-button type="text" class="download" @click="download(item)"
-                  type="text"
-                   class="download"
-                  @click="down(item.filePath)"
                 >下载</el-button
               >
             </span>
           </li>
         </ul>
-      </div>
+        <div style="float: right">
-    </div>
+            <el-pagination
-    <!-- <el-dialog
+              v-model:current-page="params1.pageIndex"
-                  :visible.sync="dialogVisible4"
+              :page-size="params1.pageSize"
-                  title="PDF预览"
+              :size="params1.pageSize"
-                  width="70%"
+              :pager-count='5'
-                  append-to-body
+              layout="total, prev, pager, next"
-                  top
+              :total="total"
+              prev-text="上一页"
+              next-text="下一页"
+              @current-change="GetPageGuideDocsData"
             >
-                  <div id="container">
+            </el-pagination>
-                    <div class="right-btn">
-                      <div @click="changePage('first')" class="turn">首页</div>
-                      <div style="width: 100%">
-                        <el-button
-                          plain
-                          icon="el-icon-plus"
-                          circle
-                          @click="zoomPDF('plus')"
-                        ></el-button>
-                        <el-button
-                          plain
-                          icon="el-icon-minus"
-                          circle
-                          @click="zoomPDF('minus')"
-                        ></el-button>
-                        <el-button
-                          plain
-                          icon="el-icon-refresh-right"
-                          circle
-                          @click="clock()"
-                        ></el-button>
-                        <el-button
-                          plain
-                          icon="el-icon-refresh-left"
-                          circle
-                          @click="counterClock()"
-                        ></el-button>
-                      </div>
-                      <div style="width: 100%">
-                        <el-button size="mini" @click="changePage(0)" round
-                          >上一页</el-button
-                        >
-                        <el-button size="mini" @click="changePage(1)" round
-                          >下一页</el-button
-                        >
-                      </div>
-
-                    
-                      <div class="pageNum">
-                        <input
-                          v-model.number="currentPage"
-                          type="number"
-                          class="inputNumber"
-                          @input="inputEvent()"
-                        />
-                        / {{ pageCount }}
-                      </div>
-
-          
-
-                      <div @click="changePage('last')" class="turn">尾页</div>
-                    </div>
-                    <div
-                      class="pdfArea"
-                      :style="{
-                        width: pdfWidth + '%',
-                        marginLeft: pdfLeft + '%',
-                        marginTop: pdfTop + '%',
-                        marginBottom: pdfBottom + '%',
-                      }"
-                      style="transition: all 0.3s"
-                    >
-                      <pdf
-                        :src="src"
-                        ref="pdf"
-                        v-show="loadedRatio === 1"
-                        :page="currentPage"
-                        @loaded="loadPdf"
-                        @num-pages="pageCount = $event"
-                        @progress="loadedRatio = $event"
-                        @page-loaded="currentPage = $event"
-                        @link-clicked="currentPage = $event"
-                        style="display: inline-block; width: 100%"
-                        id="pdfID"
-                        :rotate="pageRotate"
-                      ></pdf>
-                      <div class="progress" v-if="loadedRatio != 1">
-                        <el-progress
-                          type="circle"
-                          :width="70"
-                          color="#53a7ff"
-                          :percentage="
-                            Math.floor(loadedRatio * 100)
-                              ? Math.floor(loadedRatio * 100)
-                              : 0
-                          "
-                        ></el-progress>
-                        <br />
-           
-                        <span>{{ remindShow }}</span>
           </div>
       </div>
     </div>
-                </el-dialog> -->
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
 import {
-    getDocsIdentity,GetPageGuideDocs
+  getDocsIdentity,
+  GetPageGuideDocs,
+  
 } from "@/api/equipmentManagement/index";
+import {downloadPdf} from "@/api/operation/index"
 import { onMounted } from "vue";
 const emit = defineEmits(["closeGuidance"]);
 const allName = ref([]);
 const fileList = ref([]);
 //获取指导文件下拉数据
 function getDocsIdentityData() {
-  
+  getDocsIdentity().then((res) => {
-    getDocsIdentity().then(res=>{
+    allName.value = res.result;
-        allName.value = res.result
+  });
-  })
 }
-const equipmentCode = ref('') 
+const equipmentCode = ref("");
 const params1 = {
-    code:'',
+  code: "",
   pageIndex: 1,
-  pageSize:4
+  pageSize: 10,
+};
+
+//下载
+async function download(item) {
+  const response = await downloadPdf(item.filePath);
+  const url = window.URL.createObjectURL(new Blob([response]));
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", "file.pdf");
+  document.body.appendChild(link);
+  link.click();
 }
-function zoomPDF(method) {
+function previewFile(item) {
-      const _this = this;
+  window.open(import.meta.env.VITE_APP_BASE_API + item.filePath);
-      if (method === "plus") {
-        if (pdfWidth === 150) {
-        //   $message({
-        //     showClose: true,
-        //     message: "已放大至：100%",
-        //     type: "info",
-        //   });
-        } else {
-          pdfWidth = pdfWidth + 10;
-          pdfLeft = (100 - pdfWidth) / 2;
-        }
-      }
-      if (method === "minus") {
-        if (pdfWidth === 10) {
-        //   $message({
-        //     showClose: true,
-        //     message: "已缩小至：10%，不可再缩小。",
-        //     type: "info",
-        //   });
-        } else {
-          pdfWidth = pdfWidth - 10;
-          pdfLeft = (100 - pdfWidth) / 2;
-        }
-      }
-    }
-    // 顺时针
-    function clock() {
-      pageRotate += 90;
-    }
-    // 逆时针
-    function  counterClock() {
-      pageRotate -= 90;
-    }
-    function  down(url) {
-      window.open(url);
-    }
-    // 翻页
-    function changePage(val) {
-      if (val === 0 && currentPage > 1) {
-        currentPage--;
-      }
-      if (val === 1 && currentPage < pageCount) {
-        currentPage++;
-      } else if (val === "first") {
-        currentPage = 1;
-        toTop();
-      } else if (val === "last" && currentPage < pageCount) {
-        currentPage = pageCount;
-        toTop();
-      }
-    }
-    // pdf加载时
-    function loadPdf() {
-      currentPage = 1; // 加载的时候先加载第一页
-      loadedRatio = 1;
-    }
-    // 输入页码时校验
-    function inputEvent() {
-      if (currentPage > pageCount) {
-        // 1. 大于max
-        currentPage = pageCount;
-      } else if (currentPage < 1) {
-        // 2. 小于min
-        currentPage = 1;
-      }
-    }
-    function toTop() {
-      document.getElementById("container").scrollTop = 0;
 }
+
+
+
+const total = ref(0)
 // 获取指导文件数据
 function GetPageGuideDocsData(item) {
-    // console.log("item",item)
+  GetPageGuideDocs(params1).then((res) => {
-    // if(item){
+    total.value = res.result.totalNum
-    //     // params1.code = item.showName
+    fileList.value = res.result.data;
-    // }
+  });
-    GetPageGuideDocs(params1).then(res=>{
-        fileList.value = res.result.data
-        for (var i = 0; i < fileList.value.length; i++) {
-            fileList.value[i].filePath =
-            `http://192.168.55.13:5002` + fileList.value[i].filePath;
-        }
-   
-  })
 }
 function close() {
   emit("closeGuidance", -1);
 }
 onMounted(() => {
-    getDocsIdentityData()
+  getDocsIdentityData();
-    GetPageGuideDocsData()
+  GetPageGuideDocsData();
   //   getPageDamageEquipList()
 });
 </script>
@@ -328,8 +172,8 @@ onMounted(() => {
     //   border-radius: 8px; /* 滑块的圆角 */
   }
   &-content {
-    overflow: scroll;
+    // overflow: scroll;
-    overflow-x: hidden;
+    // overflow-x: hidden;
     height: vh(636 - 60);
     width: vw(1088);
     padding: vh(20) vw(20);
@@ -339,6 +183,8 @@ onMounted(() => {
       box-sizing: border-box;
       height: 100%;
       border: 1px solid;
+      display: flex;
+      justify-content: space-between;
       border-image: linear-gradient(
           180deg,
           rgba(144, 218, 255, 0.5),
@@ -346,14 +192,18 @@ onMounted(() => {
         )
         1 1;
       &-title {
-        width: 65%;
+        width: 100%;
         height: vh(36);
         padding-left: vw(32);
         line-height: vh(36);
         box-sizing: border-box;
         background-size: 100% 100%;
-        background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
+        background-image: url("@/assets/images/dialog/deviceInfo-title2.png");
         display: inline-block;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: vh(12);
         span {
           font-size: 1.375rem;
           font-family: "pangmen";
@@ -371,8 +221,12 @@ onMounted(() => {
         height: vh(440);
       }
     }
+    ul::-webkit-scrollbar{
+      display: none;
+    }
     ul {
-      
+      height: vh(460);
+      overflow-y: scroll;
       li {
         padding: 0 vw(40);
         display: block;
@@ -396,4 +250,8 @@ onMounted(() => {
     }
   }
 }
+:deep(.el-input) {
+  width: vw(160);
+  height: vh(28);
+}
 </style>

src/components/operation/knowledgeBase.vue

@@ -13,9 +13,7 @@
             </el-select> -->
             <el-select
               @clear="clearHandle"
-              @change="
+              @change="getPageGuideVideosData(params1.code)"
-                GetPageGuideDocsData(params1.code);
-              "
               clearable
               v-model="params1.code"
               placeholder="请选择"
@@ -39,103 +37,127 @@
               <el-table-column prop="deviceName" label="名称" />
             </el-table>
           </div>
+          <div style="float: right">
+            <el-pagination
+              v-model:current-page="params1.pageIndex"
+              :page-size="params1.pageSize"
+              :size="params1.pageSize"
+              :pager-count='5'
+              layout="total, prev, pager, next"
+              :total="total"
+              prev-text="上一页"
+              next-text="下一页"
+              @current-change="getPageGuideVideosData"
+            >
+            </el-pagination>
+          </div>
         </div>
         <div class="box-content-right">
           <div class="bg">
-            <video-player
+            <videoPlay
-              class="video-player vjs-custom-skin"
+              width="100%"
-               style="height: 500px; width: 500px"
+              height="100%"
-              ref="VideoPlayer1"
+              title="视频播放"
-              :playsinline="true"
+              :src="options.src"
-              :options="playerOptions"
+              :poster="options.poster"
-            >
+              @play="onPlay"
-            </video-player>
+              @pause="onPause"
+              @timeupdate="onTimeupdate"
+              @canplay="onCanplay"
+            />
           </div>
-         
         </div>
       </div>
     </div>
   </div>
 </template>
-<script setup name="knowledgeBase">
+<script setup>
-import VideoPlayer from 'vue-video-player';
+import { ref, reactive } from "vue";
-import 'video.js/dist/video-js.css';
-import 'vue-video-player/src/custom-theme.css';
-import { ref } from "vue";
 import {
-    GetVideosIdentity,GetPageGuideVideos
+  GetVideosIdentity,
+  GetPageGuideVideos,
 } from "@/api/equipmentManagement/index";
-
+import { videoPlay } from "vue3-video-play/lib/index";
+import "vue3-video-play/dist/style.css";
 import { onMounted } from "vue";
-const value = ref('')
+const value = ref("");
 const emit = defineEmits(["closeKnowledgeBase"]);
 function close() {
   emit("closeKnowledgeBase", -1);
 }
-const VideoPlayer1 = ref()
+const VideoPlayer1 = ref();
-const tableList = ref([
+const tableList = ref([]);
-
-])
 // const videoUrl = ref("")
-// 视频控制设置
+const options = reactive({
-const playerOptions=  {
+  width: document.documentElement.clientWidth,
-        height: 500,
+  autoplay: true,
-        width: 500,
+  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
-        playbackRates: [0.5, 1.0, 1.5, 2, 3], // 可选的播放速度
+  src: "", //视频源
-        autoplay: false, // 如果为true,浏览器准备好时开始回放。
+  poster:
-        muted: false, // 默认情况下将会消除任何音频。
+    "https://pics0.baidu.com/feed/d833c895d143ad4b28bdb4ea587008a1a50f068e.jpeg?token=ecd7d8fd2fd5c08092bfd91627691f7d", //封面
-        loop: false, // 是否视频一结束就重新开始。
+});
-        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+const onPlay = (ev) => {
-        language: "zh-CN",
+  console.log("播放");
-        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+};
-        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+const onPause = (ev) => {
-        sources: [
+  console.log(ev, "暂停");
-          {
+};
-            type: "video/mp4", // 类型
+
-            src: "", // url地址
+const onTimeupdate = (ev) => {
-          },
+  // console.log(ev, "时间更新");
-        ],
+};
-        poster: "", // 封面地址
+const onCanplay = (ev) => {
-        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+  // console.log(ev, "可以播放");
-        controlBar: {
+};
-          timeDivider: true, // 当前时间和持续时间的分隔符
+
-          durationDisplay: true, // 显示持续时间
-          remainingTimeDisplay: true, // 是否显示剩余时间功能
-          fullscreenToggle: true, // 是否显示全屏按钮
-        },
-      }
 const allName = ref([]);
 //获取知识库下拉数据
 function getVideosIdentityData() {
-  
+  GetVideosIdentity().then((res) => {
-    GetVideosIdentity().then(res=>{
+    allName.value = res.result;
-      allName.value = res.result
+  });
-})
 }
+const tableRowIndex = ref(0);
+const getRowClassName = ({ row, rowIndex }) => {
+  row.index = rowIndex;
+  if (tableRowIndex.value == rowIndex) {
+    return "highlight-row";
+  }
+  return "";
+};
 function rowClick(row) {
-    console.log("rowClick",row)
+  tableRowIndex.value = row.index;
-    //  playerOptions.sources[0].src =
+  options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[row.index].videoPath
-    //     // "http://220.163.114.158:5001/" + row.path.substring(1);
+  console.log(options.src);
-    //     "http://192.168.55.13:5002/" + row.path.substring(1);
 }
-const equipmentCode = ref('') 
+const equipmentCode = ref("");
 const params1 = {
-  code:'',
+  code: "",
   pageIndex: 1,
-pageSize:4
+  pageSize: 10,
-}
+};
+// total 总数
+const total = ref(0)
 // 获取知识库数据
 function getPageGuideVideosData(item) {
-  GetPageGuideVideos(params1).then(res=>{
+  GetPageGuideVideos(params1).then((res) => {
-    tableList.value = res.result.data
+    tableList.value = res.result.data;
-})
+    total.value = res.result.totalNum
+    options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[0].videoPath
+  });
 }
 onMounted(() => {
-    getVideosIdentityData()
+  getVideosIdentityData();
-    getPageGuideVideosData()
+  getPageGuideVideosData();
 });
 </script>
 <style scoped lang="scss">
+:deep(.el-pagination__total){
+  left: vw(40) !important;
+}
+:deep(.highlight-row) {
+  background-color: rgba(174, 211, 255, 0.2) !important;
+}
 .box {
   width: vw(1380);
   height: vh(716);
@@ -173,6 +195,9 @@ onMounted(() => {
     justify-content: space-between;
     padding: vh(20) vw(20);
     box-sizing: border-box;
+    &-table{
+      height: vh(500);
+    }
     &-select {
       margin-bottom: vh(16);
     }

src/components/productionInformation/inOutMachine.vue

@@ -9,6 +9,18 @@
       <div class="box-content">
         <div class="box-content-title">
           <span> {{ props.title }} </span>
+          <div>
+            <span style="font-size: 0.875rem; margin-right: 0.8rem"
+              >时间筛选</span
+            >
+            <el-date-picker
+              v-model="date"
+              type="daterange"
+              @change="getCountData"
+              start-placeholder="请选择开始时间"
+              end-placeholder="请选择结束时间"
+            />
+          </div>
         </div>
         <div style="display: flex">
           <div class="box-content-plate1">
@@ -30,7 +42,6 @@
           </div>
           <div class="box-content-plate2">
             <div id="chart1"></div>
-            <div id="chart2"></div>
           </div>
         </div>
       </div>
@@ -38,8 +49,10 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, onMounted ,nextTick} from "vue";
+import { ref, defineProps, onMounted, nextTick, reactive } from "vue";
 import * as echarts from "echarts";
+import moment from "moment";
+import { getWeightBetweenTime } from "@/api/productionInformation";
 const emit = defineEmits(["closeMachine"]);
 const deviceList = ref([
   {
@@ -48,20 +61,34 @@ const deviceList = ref([
     total: "222699.28",
     avgPro: "27897.41",
   },
-  {
+  // {
-    name: "2号翻箱机",
+  //   name: "2号翻箱机",
-    total: "222699.28",
+  //   total: "222699.28",
-    avgPro: "27897.41",
+  //   avgPro: "27897.41",
-    id: 2,
+  //   id: 2,
-  },
+  // },
 ]);
+// 时间区间
+const date = ref([
+  moment().subtract(1, "days").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
 const props = defineProps({
   title: String,
 });
 function close() {
   emit("closeMachine", -1);
 }
-function drawChart1() {
+
+// 头部的轮播图
+function drawChart1(res) {
+  let xData = [];
+  let yData = [];
+  for (let key in res) {
+    xData.push(key.split(" ")[0]);
+    yData.push(res[key]);
+  }
   let dom = document.querySelector("#chart1");
   dom.removeAttribute("_echarts_instance_");
   let myChart;
@@ -70,13 +97,29 @@ function drawChart1() {
     tooltip: {},
     grid: {
       top: "15%",
-      left: "1%",
+      left: "3%",
-      right: "1%",
+      right: "5%",
       bottom: "0%",
       containLabel: true,
     },
+    // dataZoom: [
+    //   {
+    //     type: "slider", // 设置为滑动条型式
+    //     show: true, // 显示dataZoom组件
+    //     start: 0, // 默认显示的起始位置为0
+    //     end: 49, // 默认显示的结束位置为100
+    //     handleSize: 8, // 滑动条的手柄大小
+    //     handleStyle: {
+    //       color: "#DCE2E8", // 滑动条的手柄颜色
+    //     },
+    //     xAxisIndex: [0], // 表示控制第一个x轴
+    //     filterMode: "filter", // 设置为filter模式，即数据超过范围时会被过滤掉
+    //   },
+    // ],
+
     xAxis: [
       {
+        interval: 0,
         type: "category",
         boundaryGap: false,
         axisLine: {
@@ -87,26 +130,29 @@ function drawChart1() {
           },
         },
         axisLabel: {
+          interval: 0,
+          // align:'left',
+          // rotate:180,
           //坐标轴刻度标签的相关设置
           textStyle: {
             color: "#fff",
-            fontSize:'0.875rem',
+            fontSize: "0.875rem",
             // margin: 15,
           },
         },
         axisTick: { show: false },
-        data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
+        data: xData,
       },
     ],
     yAxis: [
       {
         type: "value",
-        name:'单位:kg',
+        name: "单位:kg",
         nameTextStyle: {
-          color:'#fff',
+          color: "#fff",
-          fontSize:'0.875rem',
+          fontSize: "0.875rem",
         },
-        splitNumber: 5,
+        // splitNumber: 5,
         splitLine: {
           show: true,
           lineStyle: {
@@ -117,7 +163,7 @@ function drawChart1() {
         axisLabel: {
           textStyle: {
             color: "#fff",
-            fontSize:'0.875rem',
+            fontSize: "0.875rem",
           },
         },
         axisTick: { show: false },
@@ -156,7 +202,7 @@ function drawChart1() {
             shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
           },
         },
-        data: [5, 6, 7, 8, 9, 7, 5, 4, 2, 7, 8, 4],
+        data: yData,
       },
     ],
   };
@@ -168,6 +214,7 @@ function drawChart1() {
     myChart.resize();
   });
 }
+// 底部的折线图
 function drawChart2() {
   let dom = document.querySelector("#chart2");
   dom.removeAttribute("_echarts_instance_");
@@ -197,20 +244,29 @@ function drawChart2() {
           //坐标轴刻度标签的相关设置
           textStyle: {
             color: "#fff",
-            fontSize:'0.875rem',
+            fontSize: "0.875rem",
           },
         },
         axisTick: { show: false },
-        data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
+        data: [
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+          "2023-03-03",
+        ],
       },
     ],
     yAxis: [
       {
         type: "value",
-        name:'单位:kg',
+        name: "单位:kg",
         nameTextStyle: {
-          color:'#fff',
+          color: "#fff",
-          fontSize:'0.875rem',
+          fontSize: "0.875rem",
         },
         splitNumber: 5,
         splitLine: {
@@ -223,7 +279,7 @@ function drawChart2() {
         axisLabel: {
           textStyle: {
             color: "#fff",
-            fontSize:'0.875rem',
+            fontSize: "0.875rem",
           },
         },
         axisTick: { show: false },
@@ -274,9 +330,42 @@ function drawChart2() {
     myChart.resize();
   });
 }
+// 筛选的时间参数
+const params = reactive({
+  startTimeYear: "",
+  startTimeMonth: "",
+  startTimeDay: "",
+  endTimeYear: "",
+  endTimeMonth: "",
+  endTimeDay: "",
+});
+
+// const
+// 获取统计数据
+function getCountData(val) {
+  if (val) {
+    date.value[0] = moment(date.value[0]).format("YYYY-MM-DD");
+    date.value[1] = moment(date.value[1]).format("YYYY-MM-DD");
+  }
+
+  let startList = date.value[0].split("-");
+  let endList = date.value[1].split("-");
+  params.startTimeYear = startList[0];
+  params.startTimeMonth = startList[1];
+  params.startTimeDay = startList[2];
+  params.endTimeYear = endList[0];
+  params.endTimeMonth = endList[1];
+  params.endTimeDay = endList[2];
+  getWeightBetweenTime(params).then((res) => {
+    deviceList.value[0].total = res.result.totalNum;
+    deviceList.value[0].avgPro = res.result.percentNum;
+    drawChart1(res.result.dictionary);
+  });
+}
 onMounted(() => {
-  drawChart1()
+  getCountData();
-  drawChart2()
+  // drawChart1();
+  // drawChart2();
 });
 </script>
 <style scoped lang="scss">
@@ -323,11 +412,13 @@ onMounted(() => {
       box-sizing: border-box;
       background-size: 100% 100%;
       background-image: url("@/assets/images/dialog/inoutbound.png");
-      span {
+      display: flex;
+      justify-content: space-between;
+    }
+    &-title > span {
       font-size: 1.375rem;
       font-family: "pangmen";
     }
-    }
     &-plate1 {
       float: left;
       width: vw(224);
@@ -338,8 +429,10 @@ onMounted(() => {
         padding-top: vh(20);
         box-sizing: border-box;
         &-name {
+          // width: vw(48);
+          // height: vh(230);
           width: vw(48);
-          height: vh(230);
+          height: vh(480);
           background-image: url("@/assets/images/dialog/chassis.png");
           background-size: 100% 100%;
           writing-mode: vertical-rl; /* 文字从上到下，从右到左 */
@@ -359,8 +452,10 @@ onMounted(() => {
           }
           section {
             text-align: center;
+            // width: vw(160);
+            // height: vh(104);
             width: vw(160);
-            height: vh(104);
+            height: vh(229);
             background-size: 100% 100%;
             background-image: url("@/assets/images/dialog/pro-bg.png");
             span {
@@ -369,16 +464,17 @@ onMounted(() => {
             span:nth-child(1) {
               font-size: 0.875rem;
               // margin-top: vh(16);
-              line-height: vh(31);
+              line-height: vh(38);
             }
             span:nth-child(2) {
               font-size: 1.375rem;
-              margin-top: vh(9);
+              margin-top: vh(68);
               color: rgba(234, 255, 254, 1);
               // line-height: vh(32);
             }
             span:nth-child(3) {
               font-size: 0.8rem;
+              margin-top: vh(26);
               color: rgba(113, 133, 149, 1);
               // line-height: vh(32);
             }
@@ -391,9 +487,24 @@ onMounted(() => {
       #chart2 {
         margin-top: vh(20);
         width: vw(800);
-        height: vh(228);
+        // height: vh(228);
+        height: vh(456);
       }
     }
   }
 }
+:deep(.el-date-editor) {
+  width: vw(350) !important;
+  border: 1px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
+      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.7)
+    )
+    1 1;
+  height: vh(28);
+}
+:deep(.el-range-input) {
+  color: #fff !important;
+}
 </style>

src/components/productionInformation/inOutboundMsg.vue

@@ -9,13 +9,15 @@
         <div class="box-content-chart">
           <div class="pre" @click="prvePage"></div>
           <div class="swiper">
-            <div
+            <transition
-              class="swiper-box"
+              :name="btnName"
-              :style="`transform:translateX(${transform})`"
+              v-for="(item, index) in Math.ceil(chartList.length / 8)"
+              :key="item.id"
             >
+              <div v-if="index == chartIndex" style="display: flex">
                 <div
                   class="box-content-chart-item"
-                v-for="item in chartList"
+                  v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
                   :key="item.id"
                 >
                   <div class="chart">
@@ -24,6 +26,7 @@
                   <div class="line"></div>
                 </div>
               </div>
+            </transition>
           </div>
 
           <div class="next" @click="nextPage"></div>
@@ -32,28 +35,52 @@
           <div class="box-content-inBound-title">
             <span> 入库信息统计 </span>
             <div>
-              <ul>
+              <ul v-if="storeList">
                 <li><span>单位：</span><span>kg</span></li>
-                <li><span>总量：</span><span>3047457</span></li>
+                <li>
-                <li><span>品牌总量：</span><span>1632057</span></li>
+                  <span>总量：</span><span>{{ storeList.totalWeight }}</span>
-                <li><span>批次数量：</span><span>176</span></li>
+                </li>
+                <li>
+                  <span>品牌总量：</span><span>{{ storeList.brandNum }}</span>
+                </li>
+                <li>
+                  <span>批次数量：</span><span>{{ storeList.batchNum }}</span>
+                </li>
               </ul>
               <section class="one">
                 <el-date-picker
                   class="picker"
-                  v-model="value2"
+                  v-model="params.year"
                   type="year"
                   placeholder="请选择年份"
-                  @change="maintenancePlan"
+                  @change="
+                    getAllBrandName(true);
+                  "
                 />
               </section>
               <section>
-                <el-date-picker
+                <!-- <el-date-picker
-                  v-model="value2"
+                  v-model="params.month"
-                  type="year"
+                  type="month"
-                  placeholder="请选择年份"
+                  placeholder="请选择月份"
-                  @change="maintenancePlan"
+                  @change="
+                    getAllBrandName();
+                  "
+                /> -->
+                <el-select
+                  v-model="params.month"
+                  class="m-2"
+                  placeholder="请选择月份"
+                  clearable
+                  @change="getAllBrandName()"
+                >
+                  <el-option
+                    v-for="(item,index) in options"
+                    :key="'key' + index"
+                    :label="item"
+                    :value="item"
                   />
+                </el-select>
               </section>
             </div>
           </div>
@@ -82,16 +109,28 @@
   </div>
 </template>
 <script setup>
+import {
+  getBrandPercent,
+  getRepoDetails,
+  getBrandNames,
+  getBrandTimeCount,
+  getOutBrandPercent,
+  getOutRepoDetails,
+  getOutBrandNames,
+  getOutBrandTimeCount,
+} from "@/api/productionInformation/index";
 import pieChart from "@/components/echarts/pie";
-import { ref, defineProps, onMounted } from "vue";
+import { ref, defineProps, onMounted, reactive } from "vue";
 import * as echarts from "echarts";
 const props = defineProps({
   title: String,
 });
+
+const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
 const activeNames = ref(["1"]);
 const emit = defineEmits(["closeBoundMsg"]);
-const index = ref(0);
+const chartIndex = ref(0);
-const transform = ref(0);
+const btnName = ref("left");
 const chartList = ref([
   {
     id: 11,
@@ -141,6 +180,7 @@ const chartList = ref([
     type: "(硬珍品)烟丝",
     value: 20,
   },
+
   {
     id: 19,
     name: "利群",
@@ -154,18 +194,100 @@ const chartList = ref([
     value: 20,
   },
 ]);
+// 获取占比图列表
+function getChartList() {
+  if (props.title === "入库信息") {
+    getBrandPercent().then((res) => {
+      chartList.value = res.result.columnDatas.map((ele) => {
+        return {
+          type: ele.name,
+          value: ele.percentage * 100,
+        };
+      });
+    });
+  } else {
+    getOutBrandPercent().then((res) => {
+      chartList.value = res.result.columnDatas.map((ele) => {
+        return {
+          type: ele.name,
+          value: ele.percentage * 100,
+        };
+      });
+    });
+  }
+}
+
+const storeList = ref(null);
+// 获取仓库细节
+function getStoreDetail() {
+  if (props.title === "入库信息") {
+    getRepoDetails().then((res) => {
+      storeList.value = res.result;
+    });
+  } else {
+    getOutRepoDetails().then((res) => {
+      storeList.value = res.result;
+    });
+  }
+}
+
+// 参数
+const params = reactive({
+  year: new Date(),
+  month: "",
+  brandName: "",
+});
+// 获取所有的品牌名称
+function getAllBrandName(boolean) {
+  if (boolean) {
+    params.year = params.year.getFullYear().toString();
+  } else{
+    console.log(params.month.slice(0,-2));
+    // params.month = params.month.slice(-2)
+  }
+  if (props.title === "入库信息") {
+    getBrandNames(params).then((res) => {
+      brandList.value = res.result;
+      params.brandName = brandList.value[0];
+      getBrandChart();
+    });
+  } else {
+    getOutBrandNames(params).then((res) => {
+      brandList.value = res.result;
+      params.brandName = brandList.value[0];
+      getBrandChart();
+    });
+  }
+}
+// 根据品牌名称获取chart图
+function getBrandChart() {
+  if (props.title === "入库信息") {
+    getBrandTimeCount(params).then((res) => {
+      drawBarChart(res.result);
+    });
+  } else {
+    getOutBrandTimeCount(params).then((res) => {
+      drawBarChart(res.result);
+    });
+  }
+}
 // 下一页
 function nextPage() {
-  if (index.value === parseInt((chartList.value.length + 1) / 8)) return;
+  btnName.value = "right";
-  index.value++;
+  if (chartIndex.value == Math.ceil(chartList.value.length / 8) - 1) {
-  transform.value = -1 * index.value * 100 + "%";
+    chartIndex.value = 0;
+  } else {
+    chartIndex.value++;
+  }
 }
 // 上一页
 function prvePage() {
-  if (index.value === 0) return;
+  btnName.value = "left";
-  index.value--;
+  if (chartIndex.value == 0) {
-
+    chartIndex.value = Math.ceil(chartList.value.length / 8) - 1;
-  transform.value = 1 * index.value * 100 + "%";
+  } else {
+    chartIndex.value--;
+  }
 }
 
 function close() {
@@ -183,28 +305,22 @@ const brandList = ref([
   "利群(长嘴)烟丝",
   "兰州(硬吉祥)烟丝",
 ]);
-function drawBarChart() {
+function drawBarChart(res) {
   let dom = document.querySelector("#barChart");
   dom.removeAttribute("_echarts_instance_");
   let myChart;
   myChart = echarts.init(dom);
   let option = {
     grid: {
-      left:'5%',
+      left: "5%",
-      bottom:'8%',
+      bottom: "8%",
-      right:'2%',
+      right: "2%",
-      top:'15%'
+      top: "15%",
     },
     xAxis: {
-      data: [
+      data: res.map((ele, index) => {
-        1,
+        return index + 1;
-        2,
+      }),
-        3,
-        4,
-        5,
-        6,
-        7,
-      ],
       axisLine: {
         lineStyle: {
           color: "rgba(56, 72, 89, 1)",
@@ -219,8 +335,8 @@ function drawBarChart() {
       name: "单位:kg",
       nameTextStyle: {
         color: "#fff",
-        fontSize: '1rem',
+        fontSize: "1rem",
-        padding:[0,35,10,0]
+        padding: [0, 35, 10, 0],
       },
       axisLine: {
         lineStyle: {
@@ -229,16 +345,15 @@ function drawBarChart() {
       },
       axisLabel: {
         color: "#fff",
-        fontSize: '0.875rem',
+        fontSize: "0.875rem",
       },
       splitLine: {
         show: true,
         lineStyle: {
-          type:'dashed',
+          type: "dashed",
           color: "rgba(255, 255, 255, 0.20)",
         },
       },
-
     },
     series: [
       {
@@ -247,7 +362,7 @@ function drawBarChart() {
 
         itemStyle: {
           normal: {
-            borderColor: 'rgba(28, 238, 251, 1)',
+            borderColor: "rgba(28, 238, 251, 1)",
             borderWidth: 1,
             color: new echarts.graphic.LinearGradient(
               0,
@@ -268,7 +383,9 @@ function drawBarChart() {
             ),
           },
         },
-        data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
+        data: res.map((ele, index) => {
+          return ele;
+        }),
       },
     ],
   };
@@ -278,16 +395,20 @@ function drawBarChart() {
   });
 }
 onMounted(() => {
- drawBarChart()
+  getChartList();
-
+  getStoreDetail();
-})
+  // 获取所有品牌的种类
+  getAllBrandName(true);
+});
 </script>
 <style scoped lang="scss">
 .swiper {
+  display: flex;
   overflow: hidden;
+  transition: all linear 0.2s;
   &-box {
     display: flex;
-    // transition: all linear .2s;
+
     // transform: translateX(-100%);
   }
 }
@@ -357,12 +478,15 @@ onMounted(()=>{
           rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
         )
         1 1;
+      .swiper-box {
+        transition: all 0.5s ease-in-out;
+      }
       &-item {
         margin-right: vw(52);
         // width: vw(100);
         // height: vh(170);
         .chart {
-          width: vw(100);
+          width: vw(110);
           height: vh(170);
         }
       }

src/main.js

@@ -6,4 +6,6 @@ import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import router from "./router/router.js"
 
+
+
 createApp(App).use(ElementPlus,{locale:zhCn}).use(router).mount('#app')

src/style.scss

@@ -25,4 +25,37 @@ body {
     width: vw(52);
     height: vh(24);
 }
+.left-enter-from {
+    transform: translateX(-100%);
+    opacity: 0;
+}
+.right-enter-from{
+    transform: translateX(100%);
+    opacity: 0;
+}
  
+.left-enter-active,
+.left-leave-active,
+.right-enter-active,
+.right-leave-active{
+    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
+}
+ 
+.left-enter-to,.right-enter-to {
+    transform: translateX(0);
+    opacity: 1;
+}
+ 
+.left-leave-from,.right-leave-from{
+    transform: translateX(0);
+    opacity: 1;
+}
+ 
+.left-leave-to {
+    transform: translateX(100%);
+    opacity: 0;
+}
+.right-leave-to {
+    transform: translateX(-100%);
+    opacity: 0;
+}

src/utils/request.js

@@ -5,7 +5,6 @@ const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
   timeout: 5000 // 请求超时时间
 });
- console.log(import.meta.env.VITE_APP_BASE_API,'xxxx');
 // 请求拦截器
 service.interceptors.request.use(
   config => {

src/views/home/components/aside/devData.vue

@@ -25,13 +25,14 @@
   <inOutboundMsg :title="title" v-if="listIndex===0||listIndex===1" @closeBoundMsg="closeSecondDialog"/>
   <!-- 出入库批次耗时 -->
   <!-- <inOutBoundBacth :title="title" v-if="listIndex===2 || listIndex===3" @closeBatch='closeSecondDialog'/> -->
-  <!-- 库存消息 -->
+  <!-- 各品牌库存情况 -->
-  <inventoryNews v-if="listIndex===2" @close='closeSecondDialog' />
+  <brand v-if="listIndex===2" @closeBrand='closeSecondDialog' />
+
   <!-- 喂丝机 装箱机弹窗 -->
   <inOutMachine :title="title" v-if="listIndex===3 || listIndex===4" @closeMachine="closeSecondDialog" />
 </template>
 <script setup>
-import inventoryNews from '@/views/home/components/homeDialog/inventoryNews'
+import brand from '@/views/home/components/homeDialog/brand'
 import inOutboundMsg from '@/components/productionInformation/inOutboundMsg'
 import inOutBoundBacth from '@/components/productionInformation/inOutBoundBacth'
 import inOutMachine from '@/components/productionInformation/inOutMachine'
@@ -66,7 +67,7 @@ const list = ref([
   {
     default: getPath.dev5,
     select: getPath.dev5Select,
-    title:'库存信息'
+    title:'各品牌库存情况'
   },
   {
     default: getPath.dev6,

src/views/home/components/homeDialog/brand.vue

@@ -28,24 +28,38 @@
         <div class="box-content-search">
           <div>
             <el-input
-              v-model="searchData"
+              v-model="tableParams.name"
+              @change="getTableList"
               class="w-50 m-2"
               placeholder="请输入搜索内容"
               :prefix-icon="Search"
             />
+            <el-select
+             style="margin-left:1rem"
+              v-model="tableParams.orderByLoc"
+              class="m-2"
+              placeholder="是否排序"
+              @change="getTableList()"
+            >
+              <el-option label="是" :value="true" />
+              <el-option label="否" :value="false" />
+            </el-select>
           </div>
           <div>
             <ul>
               <li>
-                <span>A区空箱：</span><span>{{ areaNum.AareaNo }}</span>
+                <span>货位：</span><span>{{ areaNum.storeNum }}</span>
               </li>
               <li>
-                <span>A区实箱：</span><span>{{ areaNum.AareaHas }}</span>
+                <span>实箱：</span><span>{{ areaNum.hasBox }}</span>
               </li>
               <li>
-                <span>A区批次数量：</span><span>{{ areaNum.ABatch }}</span>
+                <span>空箱：</span><span>{{ areaNum.noBox }}</span>
               </li>
               <li>
+                <span>批次数量：</span><span>{{ areaNum.batchNo }}</span>
+              </li>
+              <!-- <li>
                 <span>B区空箱：</span><span>{{ areaNum.BareaNo }}</span>
               </li>
               <li>
@@ -53,35 +67,37 @@
               </li>
               <li>
                 <span>B区批次数量：</span><span>{{ areaNum.BareaNo }}</span>
-              </li>
+              </li> -->
             </ul>
           </div>
         </div>
         <div class="box-content-table">
-          <el-table :data="tableList" style="width: 100%" @row-click="rowClick">
+          <el-table :data="tableList" style="width: 100%">
-            <el-table-column prop="id" label="序号" width="180" />
+            <el-table-column
-            <el-table-column prop="trayNumber" label="托盘号" width="180" />
+              type="index"
-            <el-table-column prop="address" label="当前存放位置" />
+              label="序号"
-            <el-table-column prop="dsc" label="物料描述" />
+              width="50"
-            <el-table-column prop="batch" label="批次" />
+              :index="indexMethod"
-            <el-table-column prop="inDate" label="入库时间" />
+            />
-            <el-table-column prop="number" label="编号" />
+            <el-table-column prop="palletNum" label="托盘号" />
+            <el-table-column prop="storeLoc" label="当前存放位置" />
+            <el-table-column prop="itemDesc" label="物料描述" />
+            <el-table-column prop="batchNum" label="批次" />
+            <el-table-column prop="inputTime" label="入库时间" width="200" />
+            <!-- <el-table-column prop="number" label="编号" /> -->
             <el-table-column prop="upWeight" label="上箱重量" />
             <el-table-column prop="downWeight" label="下箱重量" />
           </el-table>
           <div style="float: right">
             <el-pagination
-              v-model:current-page="currentPage1"
+              v-model:current-page="tableParams.index"
-              :page-size="100"
+              :page-size="tableParams.size"
-              :size="size"
+              :size="tableParams.size"
-              :disabled="disabled"
-              :background="background"
               layout="total, prev, pager, next"
-              :total="1000"
+              :total="tableTotal"
               prev-text="上一页"
               next-text="下一页"
-              @size-change="handleSizeChange"
+              @current-change="getTableList"
-              @current-change="handleCurrentChange"
             >
             </el-pagination>
           </div>
@@ -91,56 +107,55 @@
   </div>
 </template>
 <script setup>
-import { ref } from "vue";
+import { getBrandBox, getBrandTable, getStoreMsg } from "@/api/home";
+import { onMounted, reactive, ref } from "vue";
 import { Search } from "@element-plus/icons-vue";
 import echart from "@/components/echarts/pie";
-const emit = defineEmits(['closeBrand'])
+const emit = defineEmits(["closeBrand"]);
 const list = ref([
-  {
+  // {
-    id: 1,
+  //   id: 1,
-    name: "利群",
+  //   name: "利群",
-    type: "黑中支",
+  //   type: "黑中支",
-    kg: "1148.23kg",
+  //   kg: "1148.23kg",
-    value: 20,
+  //   value: 20,
-  },
+  // },
-  {
+  // {
-    id: 2,
+  //   id: 2,
-    name: "利群",
+  //   name: "利群",
-    type: "黑中支",
+  //   type: "黑中支",
-    kg: "1148.23kg",
+  //   kg: "1148.23kg",
-    value: 40,
+  //   value: 40,
-  },
+  // },
-  {
+  // {
-    id: 3,
+  //   id: 3,
-    name: "利群",
+  //   name: "利群",
-    type: "黑中支",
+  //   type: "黑中支",
-    kg: "1148.23kg",
+  //   kg: "1148.23kg",
-    value: 40,
+  //   value: 40,
-  },
+  // },
-  {
+  // {
-    id: 4,
+  //   id: 4,
-    name: "利群",
+  //   name: "利群",
-    type: "黑中支",
+  //   type: "黑中支",
-    kg: "1148.23kg",
+  //   kg: "1148.23kg",
-    value: 40,
+  //   value: 40,
-  },
+  // },
-  {
+  // {
-    id: 5,
+  //   id: 5,
-    name: "利群",
+  //   name: "利群",
-    type: "黑中支",
+  //   type: "黑中支",
-    kg: "1148.23kg",
+  //   kg: "1148.23kg",
-    value: 40,
+  //   value: 40,
-  },
+  // },
 ]);
 
 // 区域数量
-const areaNum = ref({
+const areaNum = reactive({
-  AareaNo: 10,
+  storeNum: 10,
-  AareaHas: 868,
+  hasBox: 10,
-  Abatch: 17,
+  noBox: 5,
-  BareaNo: 48,
+  batchNo: 5,
-  BareaHas: 736,
-  Bbatch: 15,
 });
 // table数据
 const tableList = ref([
@@ -190,8 +205,62 @@ const tableList = ref([
   },
 ]);
 function close() {
-    emit('closeBrand',false)
+  emit("closeBrand", false);
 }
+// table参数
+const tableTotal = ref(0);
+const tableParams = reactive({
+  index: 1,
+  size: 4,
+  name: "",
+  orderByLoc: false,
+});
+function getTableList() {
+  getBrandTable(tableParams).then((res) => {
+    tableList.value = res.result.data;
+
+    tableTotal.value = res.result.totalNum;
+  });
+}
+// 计算序号
+function indexMethod(index) {
+  return index + 1 + (tableParams.index - 1) * tableParams.size;
+}
+const id = ref(0);
+function getChartData() {
+  getStoreMsg().then((res) => {
+    for (let key in res.result[1]) {
+      list.value.push({
+        name: key,
+        kg: res.result[1][key] * res.result[0] + "kg",
+        id: id.value++,
+        value: res.result[1][key] * 100,
+      });
+    }
+    console.log(list.value);
+  });
+}
+onMounted(() => {
+  //获取即时库存信息情况
+  getChartData();
+  // 获取货位 批次数据
+  getBrandBox().then((res) => {
+    for (let key in res.result) {
+      console.log(res.result, key);
+      if (key === "货位") {
+        areaNum.storeNum = res.result[key];
+      } else if (key === "实箱") {
+        areaNum.hasBox = res.result[key];
+      } else if (key === "空箱") {
+        areaNum.noBox = res.result[key];
+      } else {
+        areaNum.batchNo = res.result[key];
+      }
+    }
+  });
+  // 获取即时库存table数据
+  getTableList();
+});
 </script>
 <style scoped lang="scss">
 .pre,
@@ -201,6 +270,7 @@ function close(){
   position: absolute;
   top: 40%;
   background-size: 100% 100%;
+  cursor: pointer;
 }
 .pre {
   left: 0;
@@ -250,6 +320,9 @@ function close(){
         font-family: "pangmen";
       }
     }
+    &-table {
+      height: vh(245);
+    }
     &-chart {
       padding: 0 vw(79);
       display: flex;

src/views/home/components/homeDialog/inventoryNews.vue

@@ -7,102 +7,41 @@
       </div>
       <div class="box-content">
         <el-table :data="list" style="width: 100%">
-          <el-table-column prop="batchNo" label="批次号" width="180" />
+          <el-table-column prop="batchNum" label="批次号" width="180" />
-          <el-table-column prop="brand" label="品牌" width="180" />
+          <el-table-column prop="itemDesc" label="品牌" width="180" />
-          <el-table-column prop="date" label="入库时间" />
+          <el-table-column prop="inTime" label="入库时间" />
           <el-table-column prop="weight" label="重量(kg)" />
-          <el-table-column prop="Cases" label="箱数" />
+          <el-table-column prop="boxCount" label="箱数" />
         </el-table>
       </div>
     </div>
   </div>
 </template>
     <script setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import {getInventoryMessage} from '@/api/home'
 import getPath from "@/utils/getPath";
 const emit = defineEmits(["close"]);
 const list = ref([
   {
-    batchNo: "YXZZP2303001",
+    batchNum: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
+    itemDesc: "利群(新版)烟丝",
-    date: "2023-04-08",
+    inTime: "2023-04-08",
     weight: "2767.52",
-    Cases: "66",
+    boxCount: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
-  },
-  {
-    batchNo: "YXZZP2303001",
-    brand: "利群(新版)烟丝",
-    date: "2023-04-08",
-    weight: "2767.52",
-    Cases: "66",
   },
 ]);
 function close() {
   emit("close", false);
 }
+onMounted(()=>{
+  getInventoryMessage().then(res=>{
+    console.log(res,'xxxxxxxx');
+    if(res.code==200){
+      list.value = res.result
+    }
+  })
+})
 </script>
     <style scoped lang="scss">
 .box {

src/views/home/index.vue

@@ -204,6 +204,7 @@ import {
   getInOrder,
   getOutOrder,
   getLocInfo,
+  
 } from "@/api/home";
 // 设备状态列表
 const deviceList = ref([