|
|
@@ -14,7 +14,7 @@
|
|
|
<div class="dialog-tab">
|
|
|
<div :class="{'disabled': !tab_usable.vedio, 'highlight': currentTab==='vedio'}" @click="changeTab('vedio')"><span>企业实时视频</span></div>
|
|
|
<div :class="{'disabled': !tab_usable.goods, 'highlight': currentTab==='goods'}" @click="changeTab('goods')"><span>货物装卸信息</span></div>
|
|
|
- <div :class="{'disabled': !tab_usable.overGrade, 'highlight': currentTab==='overGrade'}" @click="changeTab('overGrade')"><span>超等级靠泊预警</span></div>
|
|
|
+ <div :class="{'disabled': !tab_usable.overGrade, 'highlight': currentTab==='overGrade'}" @click="changeTab('overGrade')"><span>运营动态</span></div>
|
|
|
</div>
|
|
|
<div class="tab-content" v-if="isExpand">
|
|
|
<div class="tab-video table-carousel" v-if="currentTab==='vedio'">
|
|
|
@@ -62,6 +62,40 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="tab-overGrade table-carousel" v-if="currentTab==='overGrade'">
|
|
|
+ <di class="tab-table" v-if="tableData_yun.value.length>0">
|
|
|
+ <el-table :data="tableData_yun.value" class="table-default_UnitYunYing" >
|
|
|
+ <el-table-column label="序号" type="index" :dataformatas="indexCreate" />
|
|
|
+ <el-table-column label="船舶动态" prop="type" min-width="90" />
|
|
|
+ <el-table-column label="图像抓取时间" min-width="80" >
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.time.slice(5,16) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button class="buttonForChakan" @click="showImages(scope.row.url)">查看</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ class="pagi-default"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="total"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </di>
|
|
|
+ <div v-else class="no-data">
|
|
|
+ <span>无数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <PicViewerForOine v-if="imageShow" :picImg="imagesUrl" @closePicViewerOne="closePicViewerOne"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -77,6 +111,11 @@ export default {
|
|
|
import {GetQysb } from '@/apis/yyjg'
|
|
|
import { ElCarousel, ElCarouselItem, ElTooltip,ElPagination} from 'element-plus'
|
|
|
import 'element-plus/es/components/pagination/style/css'
|
|
|
+ import { ElTable, ElTableColumn } from 'element-plus'
|
|
|
+ import 'element-plus/es/components/table/style/css'
|
|
|
+ import 'element-plus/es/components/table-column/style/css'
|
|
|
+ import 'element-plus/es/components/pagination/style/css'
|
|
|
+ import PicViewerForOine from "@/views/home/cpns/PicViewerForOine";
|
|
|
|
|
|
import { ueCallOpenUnitVideo } from '@/utils/UIInteractions'
|
|
|
|
|
|
@@ -92,6 +131,22 @@ export default {
|
|
|
overGrade: false
|
|
|
})
|
|
|
|
|
|
+ const imageShow = ref(false)
|
|
|
+
|
|
|
+ const imagesUrl=ref({url:"#"})
|
|
|
+
|
|
|
+ // 关闭图片
|
|
|
+ function closePicViewerOne() {
|
|
|
+ imagesUrl.value.url="#"
|
|
|
+ imageShow.value=false
|
|
|
+ }
|
|
|
+ function showImages(url)
|
|
|
+ {
|
|
|
+ imageShow.value=true
|
|
|
+ imagesUrl.value.url=url
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
const currentTab = ref(null)
|
|
|
|
|
|
const entInfo = reactive({
|
|
|
@@ -116,6 +171,7 @@ export default {
|
|
|
//
|
|
|
// })
|
|
|
tab_usable.vedio=true
|
|
|
+ tab_usable.overGrade=true
|
|
|
} else {
|
|
|
for(let key in entInfo) {
|
|
|
entInfo[key] = '无数据'
|
|
|
@@ -142,7 +198,7 @@ export default {
|
|
|
// getQysb()
|
|
|
}
|
|
|
if(name==='vedio') {
|
|
|
- // openVideo(entInfo.cameraId)
|
|
|
+ openVideo(entInfo.cameraId)
|
|
|
// emit('onVideoShow')
|
|
|
// getQysb()
|
|
|
}
|
|
|
@@ -173,6 +229,9 @@ export default {
|
|
|
[{name:"主厂区视频",id:"123123123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"}]})
|
|
|
const tableData_goods = reactive({value: []})
|
|
|
|
|
|
+ const tableData_yun = reactive({value:
|
|
|
+ [{type:"主厂区视频",time:"123123123",url:"http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg"},{type:"主厂区视频",time:"123"},{type:"主厂区视频",time:"123"},{type:"主厂区视频",time:"123"},{type:"主厂区视频",time:"123"}]})
|
|
|
+
|
|
|
watch(tableData_video, (val) => {
|
|
|
// getData(val, pageSize.value, 1)
|
|
|
},{immediate:true})
|
|
|
@@ -181,12 +240,7 @@ export default {
|
|
|
return Math.ceil(tableData_goods.value.length/3)
|
|
|
})
|
|
|
|
|
|
- const currentPage = ref(1)
|
|
|
- const pageSize = ref(10)
|
|
|
- const total = ref(0)
|
|
|
- function clickVideo(id) {
|
|
|
- console.log(id);
|
|
|
- }
|
|
|
+
|
|
|
function handlePageChange(val) {
|
|
|
currentPage.value = val
|
|
|
// getData(tableData_video.value, pageSize.value, val)
|
|
|
@@ -196,6 +250,31 @@ export default {
|
|
|
// alert("openVideo")
|
|
|
ueCallOpenUnitVideo(code)
|
|
|
}
|
|
|
+
|
|
|
+ // 分页信息end
|
|
|
+ const currentPage = ref(1)
|
|
|
+ const pageSize = ref(10)
|
|
|
+ const total = ref(0)
|
|
|
+ // 点击查看视频
|
|
|
+ function clickVideo(id) {
|
|
|
+ console.log(id);
|
|
|
+ }
|
|
|
+ // 解析index
|
|
|
+ function indexCreate(row, column, cellValue, index) {
|
|
|
+ return index + 1 + pageSize.value*(currentPage.value - 1)
|
|
|
+ }
|
|
|
+ function handleSizeChange(val) {
|
|
|
+ // debugger
|
|
|
+ pageSize.value = val
|
|
|
+ currentPage.value = 1
|
|
|
+ // getList({"certType":typeForName.filter(i=>i.value==warningType.unitWarningType.type)[0].id,"pageSize":pageSize.value,"index":currentPage.value})
|
|
|
+
|
|
|
+ }
|
|
|
+ // 内部调用切换数据
|
|
|
+ function handleCurrentChange(val) {
|
|
|
+ currentPage.value = val
|
|
|
+ // getList({"certType":typeForName.filter(i=>i.value==warningType.unitWarningType.type)[0].id,"pageSize":pageSize.value,"index":currentPage.value})
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -341,20 +420,57 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #FFFFFF;
|
|
|
display: inline-block;
|
|
|
- line-height: 35px;
|
|
|
+ line-height: 34px;
|
|
|
float: right;
|
|
|
height: 80%;
|
|
|
font-style: oblique;
|
|
|
width:15%;
|
|
|
text-align:center;
|
|
|
- background: #1A5482;
|
|
|
- background-size: 100%;
|
|
|
+ background: url('@/assets/imgs/page_yyjg/chakanTu.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ opacity: 0.6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+ .tab-overGrade{
|
|
|
+ .table-default_UnitYunYing{
|
|
|
+ height: 100%;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .el-th{ text-align: center}
|
|
|
+ .el-table__body, .el-table__footer, .el-table__header {
|
|
|
+ -webkit-border-vertical-spacing: 5px !important;
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
+ .el-table__body-wrapper{
|
|
|
+ width: 95%;
|
|
|
+ }
|
|
|
+ .el-scrollbar{
|
|
|
+ width: 95%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overscroll-behavior-x: none;
|
|
|
+ overscroll-behavior-y: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .pagi-default{
|
|
|
+ position: absolute;
|
|
|
+ bottom:5%;
|
|
|
+ left: 38%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttonForChakan{
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ background: url('@/assets/imgs/page_yyjg/chakanTu.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
zk
