历史数据接口联调，slot插槽两种用法详见roadwayManage/index和historyMonitoring/index中的slot

src/api/importExcel.js

@@ -1 +1,3 @@
 export const importExcelUrl = process.env.VUE_APP_API_URL + "/camera/config/import";
+export const imgUrl = process.env.VUE_APP_API_URL + "/pic/";
+export const videoUrl = process.env.VUE_APP_API_URL + "/mp4/";

src/views/checkManage/index.vue

@@ -22,7 +22,7 @@
                     <div class="roadway-box">
                         <div class="line" v-for="item in 20" :key="item">
                             <a-tag
-                                :color="[i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf']"
+                                :color="i+'-'+item == '4-14'|| i+'-'+item=='8-18'?'#d81e06':'#bfbfbf'"
                                 style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
                                 :key="i">{{i}}-{{item}}
                             </a-tag>
@@ -49,12 +49,12 @@
                     3号巷道
                 </a-select-option>
             </a-select>
-            <div class="roadway-top">
+            <div class="roadway-buttom">
                 <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
                     <div class="roadway-box">
                         <div class="line" v-for="item in 20" :key="item">
                             <a-tag
-                                :color="[i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf']"
+                                :color="i+'-'+item == '5-16'|| i+'-'+item=='9-17'||i+'-'+item=='11-15'?'#1afa29':'#bfbfbf'"
                                 style="width:46px;height:25px;margin: 1px 2px;" v-for="i in 60"
                                 :key="i">{{i}}-{{item}}
                             </a-tag>
@@ -133,5 +133,25 @@ export default {
             }
 
         }
+
+        .roadway-buttom {
+            padding: 20px 0;
+            width: 1000px;
+
+            .scroll-box {
+                height: 270px;
+
+                .roadway-box {
+                    transform: rotateX(180deg);
+                    padding: 10px 10px 0 0;
+
+                    .line {
+                        display: flex;
+                        transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
+                    }
+                }
+            }
+
+        }
     }
 </style>

src/views/historyMonitoring/index.vue

@@ -5,7 +5,7 @@
                 <a-row :gutter="12">
                     <a-col :span="8" style="text-align: left">
                         <a-form-item label="工单号">
-                            <a-input v-model="queryParam.con_code" placeholder="请输入" />
+                            <a-input v-model="queryParam.orderNum" placeholder="请输入"/>
                         </a-form-item>
                     </a-col>
                     <a-col :span="8">
@@ -29,11 +29,46 @@
             :pagination="pagination"
             @change="handleGetHistoryList"
         >
+            <span slot="pic" slot-scope="text">
+            <template>
+                <span v-if="text.putPath || text.goodsPath ||text.outputPath">
+<!--                    {{text.putPath}} {{text.goodsPath}} {{text.outputPath}}-->
+                    <img class="historyImg" :src="imgUrl+text.putPath" alt="">
+                    <img class="historyImg" :src="imgUrl+text.goodsPath" alt="">
+                    <img class="historyImg" :src="imgUrl+text.outputPath" alt="">
+                </span>
+                <span v-else>
+                    暂无图片
+                </span>
+            </template>
+          </span>
+            <span slot="status" slot-scope="text">
+              <span :style="text.status == 1 ?' color:red': ''">
+                 {{ text.status == null ? '-' : text.status == 0 ? '正常' : '告警' }}
+              </span>
+          </span>
+            <span slot="videoPath1" slot-scope="text">
+              <a-button type="link" v-if="text.videoPath1">
+                  查看视频
+              </a-button>
+              <span v-else>
+
+              </span>
+          </span>
+            <span slot="videoPath2" slot-scope="text">
+              <a-button type="link" v-if="text.videoPath2">
+                  查看视频
+              </a-button>
+              <span v-else>
+
+              </span>
+          </span>
         </a-table>
     </div>
 </template>
 
 <script>
+    import {imgUrl, videoUrl} from "@/api/importExcel";
 export default {
     name: "historyMonitoring",
     components: {
@@ -41,21 +76,22 @@ export default {
     },
     data() {
         return {
-            labelCol: { span: 6 },
+            labelCol: {span: 6},
-            wrapperCol: { span: 18 },
+            wrapperCol: {span: 18},
             queryParam: {},
-            pageNum:1,
+            pageNum: 1,
-            pageSize:10,
+            pageSize: 10,
             data: [],
-            pagination:{
+            pagination: {
-                total:0,
+                total: 0,
-                defaultPageSize:10, // 默认每页显示数量
+                defaultPageSize: 10, // 默认每页显示数量
                 showTotal: total => `共 ${total} 条数据`, // 显示总数
-                showSizeChanger:true, // 显示可改变每页数量
+                showSizeChanger: true, // 显示可改变每页数量
                 pageSizeOptions: ['10', '20', '30'],
-                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize // 改变每页数量时更新显示
             },
             loading: false,
+            imgUrl: imgUrl,
             columns: [
                 {
                     title: "工单号",
@@ -76,15 +112,17 @@ export default {
                 },
                 {
                     title: "时间",
-                    dataIndex: "time",
+                    dataIndex: "startTime",
                 },
                 {
                     title: "照片（入库 货位 出库）",
-                    dataIndex: "pic",
+                    // dataIndex: "pic",
+                    scopedSlots: {customRender: 'pic'}
                 },
                 {
                     title: "视频状态",
-                    dataIndex: "status",
+                    // dataIndex: "status",
+                    scopedSlots: {customRender: 'status'}
                 },
                 {
                     title: "视频时长",
@@ -92,11 +130,13 @@ export default {
                 },
                 {
                     title: "球机1",
-                    dataIndex: "camera1",
+                    // dataIndex: "videoPath1",
+                    scopedSlots: {customRender: 'videoPath1'}
                 },
                 {
                     title: "球机2",
-                    dataIndex: "camera2",
+                    // dataIndex: "videoPath2",
+                    scopedSlots: {customRender: 'videoPath2'}
                 },
             ],
         };
@@ -125,28 +165,29 @@ export default {
             this.request();
         },
         request() {
-            // this.$api.httpApi.queryList({
+            this.$api.httpApi.queryList({
-            //     data: {
+                data: {
-            //         pageNum:this.pageNum,
+                    pageNum: this.pageNum,
-            //         pageSize:this.pageSize,
+                    pageSize: this.pageSize,
-            //         ...this.queryParam
+                    ...this.queryParam
-            //     }
+                }
-            // }).then(res => {
+            }).then(res => {
-            //     console.log(res)
+                console.log(res)
-            // }).catch(err => {
+                this.data = res.data
-            //
+            }).catch(err => {
-            // });
+
+            });
         },
         onTimeChange(date, dateString) {
             console.log(date)
             console.log(date[0].format('X'))
-            this.queryParam.start_time = date[0].format('X')
+            this.queryParam.startTimestamp = date[0].format('X')
-            this.queryParam.end_time = date[1].format('X')
+            this.queryParam.endTimestamp = date[1].format('X')
         },
         handleReset() {
-            this.queryParam.start_time=""
+            this.queryParam.startTimestamp = ""
-            this.queryParam.end_time=""
+            this.queryParam.endTimestamp = ""
-            this.time=""
+            this.time = ""
         },
     },
 };
@@ -159,11 +200,18 @@ export default {
 .ant-drawer-content-wrapper {
     height: auto !important;
 }
+
 .ant-drawer-body {
     text-align: center;
 }
+
 .ant-advanced-search-form .ant-form-item {
     display: flex;
     width: 100%;
 }
+
+.historyImg {
+    width: 80px;
+    margin: 5px;
+}
 </style>

src/views/roadwayManage/index.vue

@@ -67,8 +67,8 @@ const columns = [
     },
     {
         title: '右货架类型',
-        dataIndex: 'rightType',
+        dataIndex: 'rightType',//若这里保留，slot插槽的text即代表rightType，否则text.rightType才代表rightType本身
-        scopedSlots: { customRender: 'rightType' }
+        scopedSlots: {customRender: 'rightType'}
     },
     {
         title: '对应球机',