311 lines
8.1 KiB
Vue
311 lines
8.1 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header class="panel_title">
|
||
<div class="left-panel">
|
||
厂内运输车辆台账
|
||
</div>
|
||
<div class="right-panel">
|
||
<el-button type="primary" @click="backtoMap">返回地图</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header class="searchWrap">
|
||
<div class="left-panel">
|
||
<div style="font-size: 1.8vh;">
|
||
进出厂运输车辆总数：<span class="totalNumber">{{ count }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="right-panel">
|
||
<el-select v-model="query.level" placeholder="排口等级" style="width:10vw" clearable
|
||
@change="handleQuery">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-header>
|
||
<el-main>
|
||
<scTable ref="table" :apiObj="apiObj" :params="params" size="large" style="" @row-click="rowClick"
|
||
:query="query" @dataChange="updateCount">
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column prop="number" label="车牌号码/登记号码"></el-table-column>
|
||
<el-table-column prop="name" label="车辆识别代码(VIN)"></el-table-column>
|
||
<el-table-column prop="level" label="生产日期"></el-table-column>
|
||
<el-table-column prop="color" label="车牌颜色"></el-table-column>
|
||
<el-table-column prop="eqpment" label="注册登记日期"></el-table-column>
|
||
<el-table-column prop="eqpment" label="车辆品牌型号"></el-table-column>
|
||
<el-table-column prop="eqpment" label="发动机号码"></el-table-column>
|
||
<el-table-column prop="eqpment" label="燃料类型"></el-table-column>
|
||
<el-table-column prop="eqpment" label="排放阶段"></el-table-column>
|
||
<el-table-column prop="eqpment" label="联网状态"></el-table-column>
|
||
<el-table-column prop="eqpment" label="随车清单"></el-table-column>
|
||
<el-table-column prop="eqpment" label="行驶证"></el-table-column>
|
||
<el-table-column prop="eqpment" label="车辆所有人(单位)"></el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
props: {
|
||
directDetail: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return false;
|
||
},
|
||
},
|
||
eqId: {
|
||
type: String,
|
||
default: () => {
|
||
return '';
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
count: 0,
|
||
apiObj: this.$API.enp.drain.list,
|
||
params: { type: 10 },
|
||
query: {
|
||
search: ''
|
||
},
|
||
searchInputStyle: {
|
||
color: '#fff',
|
||
},
|
||
tableData: [],
|
||
detailItem: {},
|
||
detailForm: {
|
||
day: 18,
|
||
year: 2024,
|
||
month: 1
|
||
},
|
||
biquery: {
|
||
end_time: '2024-02-01',
|
||
start_time: '2024-01-29',
|
||
time_bucket: "1 minute",
|
||
equipment_id: "3491356310052896768",
|
||
},
|
||
showEqInfo:true,
|
||
resizeTimeout:null,
|
||
}
|
||
},
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
hiddenChange(){
|
||
let that = this;
|
||
that.showEqInfo = !that.showEqInfo;
|
||
that.addListener();
|
||
},
|
||
handleQuery() {
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
updateCount(res, tableData) {
|
||
this.count = res.count
|
||
},
|
||
initTimeNow() {
|
||
var now = new Date();
|
||
let year = now.getFullYear(); // 年份
|
||
let month = now.getMonth() + 1; // 月份
|
||
let day = now.getDate(); // 日期
|
||
this.detailForm.year = year;
|
||
this.detailForm.month = month;
|
||
this.detailForm.day = day;
|
||
},
|
||
backtoMap() {
|
||
this.$emit('close')
|
||
},
|
||
getEquipments(ids) {
|
||
let that = this;
|
||
let reqs = [];
|
||
ids.forEach(id => {
|
||
reqs.push(that.$API.em.equipment.item.req(id).then(res => {
|
||
if (res.type == 10) {
|
||
that.eqs = res;
|
||
} else if (res.type == 40) {
|
||
that.eqc = res;
|
||
} else if (res.type == 30) {
|
||
that.eqz = res;
|
||
}
|
||
}))
|
||
});
|
||
const promise = Promise.all(reqs);
|
||
promise.then(() => {
|
||
// this.getDetailData()
|
||
})
|
||
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.tableBg {
|
||
width: 100%;
|
||
height: 88vh;
|
||
background-image: url('/public/img/enp_blue/bigtableBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.leftCard {
|
||
height: 80vh;
|
||
flex: 1;
|
||
color: #ffffff;
|
||
font-size: 0.75vw;
|
||
background-image: url('/public/img/enp_blue/smallTableBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-right: 1vw;
|
||
}
|
||
|
||
.rightCard {
|
||
flex: 2;
|
||
height: 80vh;
|
||
color: #ffffff;
|
||
background-image: url('/public/img/enp_blue/tableBg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
|
||
|
||
.totalWrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #ffffff;
|
||
font-size: 1.6vh;
|
||
padding: 0 0.5vw;
|
||
height: 3vh;
|
||
line-height: 3vh;
|
||
}
|
||
|
||
.totalNumber {
|
||
color: #64D2FF;
|
||
font-size: 2vh;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.searchBtn {
|
||
width: 4.7vw;
|
||
height: 3vh;
|
||
background-size: 100% 100%;
|
||
background-image: url('/public/img/enp_blue/search.png');
|
||
}
|
||
|
||
.backMap {
|
||
height: 25px;
|
||
line-height: 25px;
|
||
position: absolute;
|
||
right: 1vw;
|
||
top: 15px;
|
||
font-size: 1vh;
|
||
width: -moz-fit-content;
|
||
width: fit-content;
|
||
color: #ffffff;
|
||
padding: 0 0.5vw;
|
||
background-image: url('/public/img/enp_blue/back.png');
|
||
}
|
||
|
||
.pageTitle {
|
||
height: 5vh;
|
||
line-height: 5vh;
|
||
color: #ffffff;
|
||
font-size: 1.2vw;
|
||
padding-left: 1vw;
|
||
}
|
||
|
||
/* */
|
||
.headerTitle {
|
||
color: #ffffff;
|
||
height: 4vh;
|
||
line-height: 4vh;
|
||
font-size: 2vh;
|
||
position: relative
|
||
}
|
||
|
||
.backBtn {
|
||
font-size: 1vh;
|
||
position: absolute;
|
||
top: 1vh;
|
||
right: 1vh;
|
||
line-height: 2vh
|
||
}
|
||
|
||
.greenBlock {
|
||
width: 1vh;
|
||
height: 1vh;
|
||
background-image: url('/public/img/enp_blue/greenBlock.png');
|
||
background-size: 100% 100%;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 0.5vw;
|
||
}
|
||
|
||
.circles {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background: #aaaaaa;
|
||
display: inline-block;
|
||
margin: auto 0.5vw auto 0;
|
||
}
|
||
|
||
.circles_1 {
|
||
background: #0ed877;
|
||
}
|
||
|
||
.circles_2 {
|
||
background: orange;
|
||
}
|
||
|
||
.linesWrap {
|
||
padding: 1vh 0.5vw;
|
||
height: 93%;
|
||
overflow: scroll;
|
||
font-weight: bold;
|
||
line-height: 3.5vh;
|
||
}
|
||
|
||
.typeLine {
|
||
height: 3.5vh;
|
||
line-height: 4vh;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.infoLine {
|
||
line-height: 3vh;
|
||
padding-left: 0.5vw;
|
||
display: flex
|
||
}
|
||
|
||
.infotitle {
|
||
font-weight: normal;
|
||
color: #dddddd;
|
||
}
|
||
|
||
.hiddenIcon{
|
||
top:45%;
|
||
left:-25px;
|
||
width:50px;
|
||
height:50px;
|
||
z-index: 100;
|
||
position: absolute;
|
||
border-radius: 25px;
|
||
border: 1px solid rgba(254,254,254,.3);
|
||
box-shadow: 0 0 7px 2px rgba(254,254,254,.5);
|
||
background: rgba(255,255,255,.5);
|
||
}
|
||
.hiddenIcon_hidden{
|
||
left:0;
|
||
}
|
||
.hiddenImg{
|
||
font-size:40px;
|
||
margin:4px;
|
||
}
|
||
</style> |