submit

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+trans_bigScreen_dist/
 
 # local env files
 .env.local

src/components/HkwsVideo/iframe.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="divPluginIframe">
+    <div class="divPluginIframe">
         <a :href="iframeSrc" target="_blank" v-if="state">若监控无法播放请点击此处</a> 
         <iframe :src="iframeSrc" frameborder="0" @load="iframeLoaded"></iframe>
     </div>
@@ -35,17 +35,18 @@
             szPort= "",            // protocol port
             szUsername= "",     // device username
             szPassword= "", // device password  
+            state=true
         }){
-            this.state=true
+            this.state=state
             this.iframeSrc=`${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
         }
     }
  }
 </script>
 <style lang="scss" scoped>
-#divPluginIframe {
+.divPluginIframe {
     width: 100%;
-    height: 100%;
+    height: 65%;
     box-sizing: border-box;
     border: 0;
     position: relative;

src/views/goafCameraAlarm/index.vue

@@ -1,158 +1,215 @@
 <template>
-    <div class="goafCameraAlarm">
-        <div class="back" @click="back"></div>  
-        <div class="table-head" >
-            <div class="tab">
-                <el-button class="tab-item" :type="tabType===0?'primary':''" @click="tabClick(0)">正常</el-button>
-                <el-button class="tab-item"  :type="tabType===1?'danger':''" @click="tabClick(1)">识别异常</el-button>              
-            </div>  
+  <div class="goafCameraAlarm">
+    <div class="back" @click="back" />
+    <div class="table-head">
+      <div class="tab">
+        <el-button class="tab-item" :type="tabType===0?'primary':''" @click="tabClick(0)">正常</el-button>
+        <el-button class="tab-item" :type="tabType===1?'danger':''" @click="tabClick(1)">识别异常</el-button>
+      </div>
+      <div class="search-block">
+        <div class="block">
+          <span class="lable">装货开始时间</span>
+          <el-date-picker
+            v-model="conditions.startLoadTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择装货开始始时间"
+            style="width:200px;"
+          />
         </div>
-        <template v-if="tabType===0">
-            <el-table
-                ref="multipleTableRef"
-                :data="dataList"
-                style="width:100%"
-                row-class-name="CustomRowClassName"
-            >
-                <el-table-column type="index" width="55" label="序号"  />
-                <el-table-column property="date" label="日期" min-width="120">
-                    <template #default="scope">{{ parseTime(scope.row.transLoadTime,'{y}-{m}-{d}') }}</template>
-                </el-table-column>
-                <el-table-column property="transLicense" label="车牌" min-width="140"></el-table-column>
-                <el-table-column property="transLoadTime" label="装货时间"  min-width="180">
-                    <template #default="scope">
-                        <p>{{scope.row.transLoadTime}}</p>
-                        <div class="snap-image__preview" v-if="scope.row.transLoadTime">
-                            <el-image
-                                style="width: 30px; height: 30px"
-                                :src="scope.row.transLoadPicurl"
-                                :preview-src-list="[scope.row.transLoadPicurl]"
-                                preview-teleported
-                                fit="cover"
-                            />
-                        </div> 
-                        <span v-else>没有装货图片</span>                   
-                    </template>           
-                </el-table-column>
-                <el-table-column property="transUnloadTime" label="卸货时间"  min-width="180">
-                    <template #default="scope">
-                        <p>{{scope.row.transUnloadTime}}</p>
-                        <div class="snap-image__preview" v-if="scope.row.transUnloadPicurl">
-                            <el-image
-                                style="width: 30px; height: 30px"
-                                :src="scope.row.transUnloadPicurl"
-                                :preview-src-list="[scope.row.transUnloadPicurl]"
-                                preview-teleported
-                                fit="cover"
-                            />
-                        </div>   
-                        <span v-else>没有卸货图片</span>                 
-                    </template>           
-                </el-table-column>
-                <el-table-column property="transTimeInterval" label="时差（分钟）"></el-table-column>
-                <el-table-column property="transLoadWeight" label="载货重量（分钟）" ></el-table-column>
-                <el-table-column property="transUnloadWeight" label="卸货重量（吨）"></el-table-column>
-                <el-table-column property="transWeightDifference" label="载物差（吨）"></el-table-column>
-                <el-table-column property="transEvaluate" label="结论" width="100" />
-            </el-table>        
-        </template>
-        <template v-if="tabType===1">
-            <el-table
-                :data="dataList"
-                style="width:100%"
-                row-class-name="CustomRowClassName"
-            >
-                <el-table-column type="index" width="55" label="序号"  />
-                <el-table-column property="transAbnormarlLicense" label="车牌" min-width="140"></el-table-column>
-                <el-table-column property="transLoadTime" label="抓拍图片"  min-width="180">
-                    <template #default="scope">
-                        <div class="snap-image__preview" v-if="scope.row.transAbnormarlPicurl">
-                            <el-image
-                                style="width: 30px; height: 30px"
-                                :src="scope.row.transAbnormarlPicurl"
-                                :preview-src-list="[scope.row.transAbnormarlPicurl]"
-                                preview-teleported
-                                fit="cover"
-                            />
-                        </div> 
-                        <span v-else>没有图片</span>                   
-                    </template>           
-                </el-table-column>
-                <el-table-column property="transAbnormarlTime" label="运输异常时间" min-width="120">
-                    <template #default="scope">{{ parseTime(scope.row.transAbnormarlTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</template>
-                </el-table-column>
-                <el-table-column property="transAbnormarlTime" label="运输类型" min-width="120">
-                    <template #default="scope">{{ scope.row.transAbnormarType===0?'装货':"卸货" }}</template>
-                </el-table-column>
-            </el-table>        
-        </template>
-        <div class="el-pagination-wrap">
-            <el-pagination small layout="prev, pager, next" 
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange" />
-        </div>    
+        <div class="block">
+          <span class="lable">装货结束时间</span>
+          <el-date-picker
+            v-model="conditions.endLoadTime"
+            type="datetime"
+            style="width:200px;"
+            placeholder="选择装货结束时间"
+          />
+        </div>
+        <div class="block">
+          <span class="lable">车牌</span>
+          <el-input v-if="tabType===0" v-model.trim="conditions.transLicense" placeholder="请输入内容车牌" style="width:150px;" />
+          <el-input v-if="tabType===1" v-model.trim="conditions.transAbnormarlLicense" placeholder="请输入内容车牌" style="width:150px;" />
+        </div>
+        <div class="block"><el-button type="primary" @click="getData">查询</el-button></div>
+      </div>
+    </div>
+    <template v-if="tabType===0">
+      <el-table
+        ref="multipleTableRef"
+        :data="dataList"
+        style="width:100%"
+        row-class-name="CustomRowClassName"
+      >
+        <el-table-column type="index" width="55" label="序号" />
+        <el-table-column property="date" label="日期" min-width="120">
+          <template #default="scope">{{ parseTime(scope.row.transLoadTime,'{y}-{m}-{d}') }}</template>
+        </el-table-column>
+        <el-table-column property="transLicense" label="车牌" min-width="140" />
+        <el-table-column property="transLoadTime" label="装货时间" min-width="160" />
+        <el-table-column property="transLoadPicurl" label="装货抓拍图片" width="100">
+          <template #default="scope">
+            <div v-if="scope.row.transLoadPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transLoadPicurl"
+                :preview-src-list="[scope.row.transLoadPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有装货图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transUnloadTime" label="卸货时间" min-width="160" />
+        <el-table-column property="transUnloadPicurl" label="卸货抓拍图片" width="100">
+          <template #default="scope">
+            <div v-if="scope.row.transUnloadPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transUnloadPicurl"
+                :preview-src-list="[scope.row.transUnloadPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有卸货图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transTimeInterval" label="时差（分钟）" />
+        <el-table-column property="transLoadWeight" label="载货重量（分钟）" />
+        <el-table-column property="transUnloadWeight" label="卸货重量（吨）" />
+        <el-table-column property="transWeightDifference" label="载物差（吨）" />
+        <el-table-column property="transEvaluate" label="结论" width="100" />
+      </el-table>
+    </template>
+    <template v-if="tabType===1">
+      <el-table
+        :data="dataList"
+        style="width:100%"
+        row-class-name="CustomRowClassName"
+      >
+        <el-table-column type="index" width="55" label="序号" />
+        <el-table-column prop="transAbnormarlTime" label="车牌" min-width="140">
+          <template #default="scope">{{ scope.row.transAbnormarlLicense }}</template>
+        </el-table-column>
+        <el-table-column property="transLoadTime" label="抓拍图片" min-width="180">
+          <template #default="scope">
+            <div v-if="scope.row.transAbnormarlPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transAbnormarlPicurl"
+                :preview-src-list="[scope.row.transAbnormarlPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transAbnormarlTime" label="运输异常时间" min-width="120">
+          <template #default="scope">{{ parseTime(scope.row.transAbnormarlTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</template>
+        </el-table-column>
+        <el-table-column property="transAbnormarlTime" label="运输类型" min-width="120">
+          <template #default="scope">{{ scope.row.transAbnormarType===0?'装货':"卸货" }}</template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <div class="el-pagination-wrap">
+      <el-pagination
+        small
+        layout="prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
+  </div>
 </template>
 <script>
-import { parseTime} from '@/utils'
-import {getAllinfoByPage,getAbnormarlinfoByPage} from '@/api/trans'
-    export default {
-        name:"goafCameraAlarm",
-        data(){
-            return{
-                tabType:0,
-                conditions: {
-                    page: 1,
-                    limit: 10,
-                },  
-                dataList:[],
-                total:0,
-            }
-        },
-        created(){
-            this.getData()
-        },
-        methods:{
-            parseTime,
-            back(){
-                this.$router.push('/')
-            },
-            getData(){
-                if(this.tabType===0){
-                    this.getAllinfoData()
-                }else{
-                    this.getAnomalyData()
-                }
-            },
-            getAllinfoData(){
-                getAllinfoByPage(this.conditions).then((resp)=>{
-                    const {data,total}=resp
-                    this.total=total
-                    this.dataList=data
-                }) 
-            },
-            getAnomalyData(){
-                getAbnormarlinfoByPage(this.conditions).then((resp)=>{
-                    const {data,total}=resp
-                    this.total=total
-                    this.dataList=data
-                })
-            },
-            tabClick(type){
-                this.tabType=type
-                this.getData()
-            },            
-            handleSizeChange(limit){
-                this.conditions.limit=limit
-                this.getData()
-            },
-            handleCurrentChange(pageNumber){
-                this.conditions.page=pageNumber
-                this.getData()
-            }     
+import { parseTime } from '@/utils'
+import { getAllinfoByPage, getAbnormarlinfoByPage } from '@/api/trans'
+export default {
+  name: 'GoafCameraAlarm',
+  data() {
+    return {
+      tabType: 0,
+      conditions: {
+        page: 1,
+        limit: 10,
+        startLoadTime: '',
+        endLoadTime: '',
+        transLicense: '',
+        transAbnormarlLicense: ''
+      },
+      dataList: [],
+      total: 0
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    parseTime,
+    back() {
+      this.$router.push('/bigScreen/index')
+    },
+    getData() {
+      for (const key in this.conditions) {
+        if (this.isNull(this.conditions[key])) {
+          delete this.conditions[key]
         }
+      }
+      if (this.tabType === 0) {
+        delete this.conditions.transAbnormarlLicense
+        this.getAllinfoData()
+      } else {
+        delete this.conditions.transLicense
+        this.getAnomalyData()
+      }
+    },
+    getAllinfoData() {
+      getAllinfoByPage(this.conditions).then((resp) => {
+        const { data, total } = resp
+        this.total = total
+        this.dataList = data
+      })
+    },
+    getAnomalyData() {
+      getAbnormarlinfoByPage(this.conditions).then((resp) => {
+        const { data, total } = resp
+        this.total = total
+        this.dataList = data
+      })
+    },
+    isNull(val) {
+      if (val !== undefined && val !== 'undefined' && val !== null && val !== '' && val !== ' ') {
+        return false
+      }
+      return true
+    },
+    tabClick(type) {
+      this.tabType = type
+      this.conditions = {
+        page: 1,
+        limit: 10,
+        startLoadTime: '',
+        endLoadTime: '',
+        transLicense: '',
+        transAbnormarlLicense: ''
+      }
+      this.getData()
+    },
+    handleSizeChange(limit) {
+      this.conditions.limit = limit
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.conditions.page = pageNumber
+      this.getData()
     }
+  }
+}
 </script>
 <style>
 .el-table .CustomRowClassName {
@@ -170,7 +227,7 @@ import {getAllinfoByPage,getAbnormarlinfoByPage} from '@/api/trans'
                 background-color: #00539F;
                 margin-left: 10px;
                 color: rgba(255, 255, 255, 0.75);
-                &.is-active{
+                &.is-active,&.active{
                     background-color: rgba(0, 131, 207, 1);
                 }
             }
@@ -178,31 +235,44 @@ import {getAllinfoByPage,getAbnormarlinfoByPage} from '@/api/trans'
     }
 }
 .back{
-        width: 85px;
-        height: 4vh;
-        position: absolute;
-        right: 0;
-        top: 0;
-        background-image: url('@/assets/images/back.png');
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        cursor: pointer;
-    }
+    width: 85px;
+    height: 4vh;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("@/assets/images/back.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
 .table-head{
         display: flex;
         justify-content:space-between;
         align-items: center;
-        background-color: #fff;
         padding:10px;
-        border-bottom: 1px solid #f7f0f0;
         .tab{
             .tab-item{
                 margin: 0;
                 border-radius: 0;
             }
         }
+        .search-block{
+          display: flex;
+          justify-content:flex-end;
+          align-items: center;
+          flex-wrap: wrap;
+          flex: 1;
+          .block{
+            margin-left: 10px;
+            .lable{
+              color: #fff;
+              font-size: 14px;
+              padding-right:10px;
+            }
+          }
+        }
     }
 .snap-image__preview{
     padding-top: 8px;
 }
-</style>
+</style>

vue.config.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 module.exports = defineConfig({
   publicPath: './',
-  outputDir: 'dist',
+  outputDir: 'trans_bigScreen',
   assetsDir: 'static',
   transpileDependencies: true,
   productionSourceMap: false,