ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

5.29 修改车辆

Browse Source
master
zhy521521 4 months ago
parent 03b5b549bf
commit 6881aa3a19
7 changed files with 964 additions and 589 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -22,6 +22,7 @@
"js-cookie": "^3.0.1",
"less": "3.9.0",
"less-loader": "7",
"moment": "^2.30.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"swiper": "4.5.1",

3
public/static/config.js
Unescape View File

@ -14,6 +14,9 @@ window.$mapCfg = {
window.$SYSTEMCONFIG = {
SYS_NAME: "镇海平安企业（园区）", //"镇海平安企业（园区）", //系统名称
};
window.$TOKEN = {
SYS_TOKENS: "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE2ZDdkNTg5LTkxN2MtNDlkMS1iODhjLTMxN2E3Zjc4NzcwMyJ9.tEZrwiMSSNSkKVaP2TlOoQtvqgpV-0Vstqy8b9RqQOgSavblX2zRn_8a_6EZsLOtiRTaURvnlJ4HwPRotENhHQ", //"镇海平安企业（园区）", //系统名称
};
window.$SERVICE = {
BASEURL:"http://121.41.91.94:8080/zhapi"

9
src/api/archives/index.js
Unescape View File

@ -1,4 +1,5 @@
import request from '@/utils/request'
import request1 from '@/utils/request1'
//基本信息
export function baseInfo(params) {
return request({
@ -32,6 +33,14 @@ export function realTimePassageFlowFace(params) {
params
})
}
// 车辆3.0
export function list(params) {
return request1({
url: '/user/record/list',
method: 'post',
params
})
}
//实时车辆卡口流量
export function realTimePassageFlowVehicle(params) {
return request({

10
src/utils/request.js
Unescape View File

@ -8,9 +8,11 @@ const request = axios.create({
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建
//baseURL: 'http://192.168.0.188:8888/zhapi',
//baseURL: 'http://121.41.91.94:12002/zhapi',
//baseURL: `http://${window.location.host}/zhapi`,
baseURL: window.$SERVICE.BASEURL,
// baseURL: 'http://121.41.91.94:12002/zhapi',
// baseURL: 'http://172.18.113.50:8080/zhapi',
// baseURL: 'http://172.18.113.50:8080/zhapi', // 刘建
baseURL: `http://${window.location.host}/zhapi`,
// baseURL: window.$SERVICE.BASEURL,
timeout: 50000,
headers: { "content-type": "application/json" },
});
@ -23,7 +25,7 @@ request.interceptors.request.use(
// 是否需要防止数据重复提交
if (getToken() && !isToken) {
config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修z
//console.log(config)
}
//防止重复提交

98
src/utils/request1.js
Unescape View File

@ -0,0 +1,98 @@
import axios from "axios";
//import Vue from 'vue'
import vm from "../main";
import { getToken } from "@/utils/auth";
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
const request = axios.create({
//baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建
//baseURL: 'http://192.168.0.188:8888/zhapi',
// baseURL: 'http://121.41.91.94:12002/zhapi',
// baseURL: "http://218.92.207.242:20118/hjapi",
baseURL: "http://41.204.233.90:8118/hjapi",
//baseURL: `http://${window.location.host}/zhapi`,
// baseURL: window.$SERVICE.BASEURL,
timeout: 50000,
headers: { "content-type": "application/json" },
});
//const vm = Vue.prototype
// request拦截器
request.interceptors.request.use(
(config) => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false;
// 是否需要防止数据重复提交
if (getToken() && !isToken) {
console.log(777, window.$TOKEN.SYS_TOKENS);
config.headers["Authorization"] = "Bearer " + window.$TOKEN.SYS_TOKENS; // 让每个请求携带自定义token 请根据实际情况自行修z
//console.log(config)
}
//防止重复提交
return config;
},
(error) => {
console.log(error);
Promise.reject(error);
}
);
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
(response) => {
if (response.data) {
switch (response.data.code) {
case 200:
// 如果是返回的文件
if (response.config.responseType === "blob") {
return response.data;
}
// 兼容服务端返回的字符串数据
if (typeof response.data === "string") {
response.data = response.data
? JSON.parse(response.data)
: response.data;
}
return response.data;
case 401:
if (vm.$route.name !== "login") {
vm.$message.warning({
content: "身份认证信息已失效，请重新登录。",
duration: 2,
onClose: () => {
// vm.$router.push({ name: "login" });
},
});
} else {
return Promise.reject();
}
break;
case 403:
vm.$message.warning({
content: response.data.msg,
duration: 3,
});
break;
case 500:
// 如果是返回的文件
vm.$message.warning({
content: response.data.msg,
duration: 3,
});
return response.data;
}
}
},
(error) => {
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
export default request;

549
src/views/archives/kakou.vue
Unescape View File

@ -2,39 +2,88 @@
<div class="mainBox scroll-target">
<div class="topZS"></div>
<div class="title">
人车流量（<span>{{ total }}</span>）
人车流量（<span>{{ total }}</span
>）
</div>
<el-form :model="formInline" class="search">
<el-form-item label="时间：" class="formItem" style="width:500px">
<el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" @change="GetchangeTime"
:picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
<el-form-item label="时间：" class="formItem" style="width: 500px">
<el-date-picker
v-model="chooseTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
@change="GetchangeTime"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="身份证号：" class="formItem" v-if="activeName == 'first'">
<el-input v-model.trim="formInline.idcard" clearable class="formIpt" @change="clearPage()"></el-input>
<el-form-item
label="身份证号："
class="formItem"
v-if="activeName == 'first'"
>
<el-input
v-model.trim="formInline.idcard"
clearable
class="formIpt"
@change="clearPage()"
></el-input>
</el-form-item>
<el-form-item label="姓名：" class="formItem" v-if="activeName == 'first'" @change="clearPage()">
<el-input v-model.trim="formInline.userName" clearable class="formIpt"></el-input>
<el-form-item
label="姓名："
class="formItem"
v-if="activeName == 'first'"
@change="clearPage()"
>
<el-input
v-model.trim="formInline.userName"
clearable
class="formIpt"
></el-input>
</el-form-item>
<el-form-item label="车牌号：" class="formItem" v-if="activeName == 'second'" @change="clearPage()">
<el-input v-model.trim="formInline.plateNo" clearable class="formIpt"></el-input>
<el-form-item
label="车牌号："
class="formItem"
v-if="activeName == 'second'"
@change="clearPage()"
>
<el-input
v-model.trim="formInline.plateNo"
clearable
class="formIpt"
></el-input>
</el-form-item>
<el-button type="primary" @click="getList()">搜索</el-button>
</el-form>
<el-tabs v-model="activeName" type="card" @tab-click="getList(1)">
<el-tab-pane name="first">
<div slot="label" class="tabdv">人脸 </div>
<div style="width: 100%; height: 622px; display: flex; justify-content: space-between;"
v-if="activeName == 'first'">
<div slot="label" class="tabdv">人脸</div>
<div
style="
width: 100%;
height: 622px;
display: flex;
justify-content: space-between;
background-color: none;
"
v-if="activeName == 'first'"
>
<div class="imgList">
<div class="imgListItem" v-for="item in tableData" :key="item.id" @click="showDetail(item, $event)">
<div
class="imgListItem"
v-for="item in tableData"
:key="item.id"
@click="showDetail(item, $event)"
>
<div class="detailImg">
<img :src="item.globalPic">
<img :src="item.globalPic" />
</div>
<div class="ListItem">
<div class="detailText">
抓拍时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
抓拍时间&nbsp;&nbsp;<span>{{ item.passTimeCn }}</span>
</div>
<div class="detailText">
经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
@ -44,17 +93,19 @@
</div>
<div class="imgDetail" v-if="total">
<div class="detailImg">
<img :src="imgDetailList.personPic">
<img :src="imgDetailList.personPic" />
</div>
<div class="detailImg">
<img :src="imgDetailList.globalPic">
<img :src="imgDetailList.globalPic" />
</div>
<div>
<div class="detailText">
抓拍时间&nbsp;&nbsp;<span>{{ imgDetailList.partitionField }}</span>
抓拍时间&nbsp;&nbsp;<span>{{ imgDetailList.passTimeCn }}</span>
</div>
<div class="detailText">
经过位置&nbsp;&nbsp;<span>{{ imgDetailList.deviceAddress }}</span>
经过位置&nbsp;&nbsp;<span>{{
imgDetailList.deviceAddress
}}</span>
</div>
<div class="detailText">
设备IP&nbsp;&nbsp;<span>{{ imgDetailList.cameraIp }}</span>
@ -77,17 +128,76 @@
</el-tab-pane>
<el-tab-pane name="second">
<div slot="label" class="tabdv">车辆</div>
<div style="width: 100%; height: 622px; display: flex; justify-content: space-between;"
v-if="activeName == 'second'">
<div class="imgList">
<div class="imgListItem" v-for="item in vechileList" :key="item.id"
@click="showVechileDetail(item, $event)">
<div
style="width: 100%; background-color: none !important"
v-if="activeName == 'second'"
>
<el-table
:cell-style="{ background: 'revert' }"
:data="vechileList"
class="table"
style="
width: calc(100% - 40px);
margin: 20px;
background-color: none;
"
:row-style="tableRowStyle"
:header-row-style="tableHeaderColor"
:header-cell-style="tableHeaderCellColor"
>
<el-table-column type="index" width="50" label="序号">
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="plateNo"
label="车牌号码"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="ownerName"
label="车主姓名"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="idcard"
label="身份证号"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="partitionField"
label="过车时间"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="deviceAddress"
label="经过位置"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="directionCn"
label="进出方向"
>
</el-table-column>
</el-table>
<!-- <div class="imgList">
<div
class="imgListItem"
v-for="item in vechileList"
:key="item.id"
@click="showVechileDetail(item, $event)"
>
<div class="detailImg">
<img :src="item.globalPic">
<img :src="item.globalPic" />
</div>
<div class="ListItem">
<div class="detailText">
过车时间&nbsp;&nbsp;<span>{{ item.partitionField }}</span>
过车时间&nbsp;&nbsp;<span>{{ item.passTimeCn }}</span>
</div>
<div class="detailText">
经过位置&nbsp;&nbsp;<span>{{ item.deviceAddress }}</span>
@ -97,17 +207,21 @@
</div>
<div class="imgDetail" v-if="total">
<div class="detailImg">
<img :src="vechileDetailList.platePic">
<img :src="vechileDetailList.platePic" />
</div>
<div class="detailImg">
<img :src="vechileDetailList.globalPic">
<img :src="vechileDetailList.globalPic" />
</div>
<div>
<div class="detailText">
过车时间&nbsp;&nbsp;<span>{{ vechileDetailList.partitionField }}</span>
过车时间&nbsp;&nbsp;<span>{{
vechileDetailList.passTimeCn
}}</span>
</div>
<div class="detailText">
经过位置&nbsp;&nbsp;<span>{{ vechileDetailList.deviceAddress }}</span>
经过位置&nbsp;&nbsp;<span>{{
vechileDetailList.deviceAddress
}}</span>
</div>
<div class="detailText">
设备IP&nbsp;&nbsp;<span>{{ vechileDetailList.cameraIp }}</span>
@ -116,7 +230,9 @@
车牌号码&nbsp;&nbsp;<span>{{ vechileDetailList.plateNo }}</span>
</div>
<div class="detailText">
车主姓名&nbsp;&nbsp;<span>{{ vechileDetailList.ownerName }}</span>
车主姓名&nbsp;&nbsp;<span>{{
vechileDetailList.ownerName
}}</span>
</div>
<div class="detailText">
身份证号&nbsp;&nbsp;<span>{{ vechileDetailList.idcard }}</span>
@ -125,17 +241,27 @@
联系方式&nbsp;&nbsp;<span>{{ vechileDetailList.phone }}</span>
</div>
<div class="detailText">
进出方向&nbsp;&nbsp;<span>{{ vechileDetailList.directionCn }}</span>
</div>
进出方向&nbsp;&nbsp;<span>{{
vechileDetailList.directionCn
}}</span>
</div>
</div>
</div> -->
</div>
</el-tab-pane>
</el-tabs>
<div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
:page-sizes="[8]" layout="total, sizes, prev, pager, next, jumper" :total="total">
<el-pagination
style="float: right; margin: 5px"
class="msg-pagination-container"
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[8]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
<div class="bottomZS"></div>
@ -143,158 +269,235 @@
</template>
<script>
import { realTimePassageFlowFace, realTimePassageFlowVehicle } from '@/api/archives'
import {
realTimePassageFlowFace,
realTimePassageFlowVehicle,
list,
} from "@/api/archives";
import axios from "axios";
import { getToken } from "@/utils/auth";
import moment from "moment";
export default {
props: ['companyID'],
props: ["companyID"],
data() {
return {
imgBsseUrl: "http://218.92.207.242:20118/",
formInline: {},
pageSize: 8,
pageNum: 1,
activeName: 'first',
activeName: "first",
total: 0,
tableData: [],
// loading:true,
vechileList: [],
chooseTime: '',
chooseTime: "",
imgDetailList: {},
vechileDetailList: {},
pickerOptions: {
shortcuts: [{
text: '近一周',
shortcuts: [
{
text: "近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
picker.$emit("pick", [start, end]);
},
},
{
text: '近一个月',
text: "近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
picker.$emit("pick", [start, end]);
},
},
{
text: '近三个月',
text: "近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
picker.$emit("pick", [start, end]);
},
}
},
],
},
};
},
computed: {
timeDefault() {
const date = new Date();
let s1 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
let s1 =
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
return s1;
}
},
},
created() {
this.formInline.startTime = this.timeDefault + ' 00:00:00';
this.formInline.endTime = this.timeDefault + ' 23:59:59';
this.getList()
this.formInline.startTime = this.timeDefault + " 00:00:00";
this.formInline.endTime = this.timeDefault + " 23:59:59";
this.getList();
},
mounted() {
this.$nextTick(() => {
this.chooseTime = [this.timeDefault + ' 00:00:00', this.timeDefault + ' 23:59:59']
})
this.chooseTime = [
this.timeDefault + " 00:00:00",
this.timeDefault + " 23:59:59",
];
});
},
methods: {
tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) {
return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
} else {
return {
background: "rgba(61, 85, 102, 0.16)",
border: "0",
color: "#fff",
};
}
},
tableHeaderColor() {
return {
background:
"linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
};
// return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
},
tableHeaderCellColor() {
return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
},
getList(val) {
console.log(111, val);
if (val) {
this.pageNum = val
this.pageNum = val;
}
if (this.activeName == 'first') {
this.formInline.plateNo = null
realTimePassageFlowFace({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
this.tableData = res.data
this.imgDetailList = res.data[0] || {}
this.total = res.total
// if (!res.data.length) {
// this.$message.warning('没有匹配数据')
if (this.activeName == "first") {
this.formInline.plateNo = null;
console.log(2222222);
// axios
// .post(
// "http://218.92.207.242:20118/hjapi/user/record/list",
// // {
// // pageSize: this.pageSize,
// // pageNum: this.pageNum,
// // },
// {
// headers: {
// Authorization: `
// Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjE3NTBjNTk5LTg4NDQtNDY4Yy05Njg5LTQ3ZWMzMmY0NjY5YSJ9.r8n2EG5nQTkn9pbIewTCq-f6LAy_VAmIY2GnWSUXZsZdpIqic8iWrlYvVaI86O1qPYTZ-1BeVdkGLzsgiJoobQ}`,
// },
// }
// )
// .then(function (response) {
// console.log(response);
// })
// .catch(function (error) {
// console.log(error);
// });
// this.loading = true
console.log(3);
list({
pageSize: this.pageSize,
pageNum: this.pageNum,
...this.formInline,
isAsc: "desc",
orderByColumn: "passTime",
}).then((res) => {
console.log(4);
// this.loading = false
this.tableData = res.rows;
this.tableData.forEach((item) => {
item.partitionField =
item.partitionField &&
moment(item.partitionField).format("YYYY-MM-DD HH:mm:ss");
// item.globalPic = this.imgBsseUrl + item.globalPic
// item.personPic = this.imgBsseUrl + item.personPic
});
this.imgDetailList = res.rows[0] || {};
this.total = res.total;
// if (!res.rows.length) {
// this.$message.warning("没有匹配数据");
// }
})
});
} else {
this.formInline.idcard = null
this.formInline.userName = null
realTimePassageFlowVehicle({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline, companyId: this.companyID }).then(res => {
this.vechileList = res.data
this.total = res.total
this.vechileDetailList = res.data[0] || {}
this.formInline.idcard = null;
this.formInline.userName = null;
realTimePassageFlowVehicle({
pageSize: this.pageSize,
pageNum: this.pageNum,
...this.formInline,
companyId: this.companyID,
}).then((res) => {
this.vechileList = res.data;
this.total = res.total;
this.vechileDetailList = res.data[0] || {};
// if (!res.data.length) {
// this.$message.warning('没有匹配数据')
// }
})
});
}
},
GetchangeTime() {
console.log(this.chooseTime);
if (this.chooseTime != null && this.chooseTime.length > 1) {
this.formInline.startTime = this.chooseTime[0]
this.formInline.endTime = this.chooseTime[1]
this.formInline.startTime = this.chooseTime[0];
this.formInline.endTime = this.chooseTime[1];
} else {
this.formInline.startTime = null
this.formInline.endTime = null
this.formInline.startTime = null;
this.formInline.endTime = null;
}
this.pageNum = 1;
},
showDetail(item) {
this.imgDetailList = item
let imgs = document.querySelectorAll('.imgListItem')
this.imgDetailList = item;
let imgs = document.querySelectorAll(".imgListItem");
let index = this.tableData.findIndex((i) => {
return i.globalPic == item.globalPic
})
imgs.forEach(a => {
a.className = 'imgListItem'
})
imgs[index].className = 'imgListItem imgListItemFocus'
return i.globalPic == item.globalPic;
});
imgs.forEach((a) => {
a.className = "imgListItem";
});
imgs[index].className = "imgListItem imgListItemFocus";
},
showVechileDetail(item) {
this.vechileDetailList = item
let imgs = document.querySelectorAll('.imgListItem')
this.vechileDetailList = item;
let imgs = document.querySelectorAll(".imgListItem");
let index = this.vechileList.findIndex((i) => {
return i.globalPic == item.globalPic
})
imgs.forEach(a => {
a.className = 'imgListItem'
})
imgs[index].className = 'imgListItem imgListItemFocus'
return i.globalPic == item.globalPic;
});
imgs.forEach((a) => {
a.className = "imgListItem";
});
imgs[index].className = "imgListItem imgListItemFocus";
},
clearPage() {
console.log('clearPage');
console.log("clearPage");
this.pageNum = 1;
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageNum = 1;
this.pageSize = val;
this.getList()
this.getList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.getList()
this.getList();
},
},
}
};
</script>
<style lang="less" scoped>
.mainBox {
width: 100%;
height: 812px;
background: url('~@/assets/companyFile/背景22136.png') no-repeat;
background: url("~@/assets/companyFile/背景22136.png") no-repeat;
background-size: 100% 100%;
padding: 70px 20px 60px;
box-sizing: border-box;
@ -312,7 +515,7 @@ export default {
.monitorItem {
height: 100%;
width: calc(20% - 40px);
background: url('~@/assets/companyFile/实时监控背景.png') no-repeat;
background: url("~@/assets/companyFile/实时监控背景.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
@ -324,14 +527,14 @@ export default {
width: 100%;
margin-top: 10px;
margin-bottom: 4px;
color: #4CF993;
color: #4cf993;
line-height: 20px;
display: flex;
align-items: center;
justify-content: space-around;
.left {
color: #EAF6FF;
color: #eaf6ff;
}
.dian {
@ -340,7 +543,7 @@ export default {
height: 10px;
width: 6px;
height: 6px;
background: #4CF993;
background: #4cf993;
border-radius: 3px;
margin: 0 5px;
}
@ -358,7 +561,7 @@ export default {
justify-content: space-around;
.left {
color: #EAF6FF;
color: #eaf6ff;
}
.dian {
@ -390,14 +593,13 @@ export default {
align-items: center;
justify-content: center;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
i {
font-size: 16px;
}
}
img {
@ -410,19 +612,18 @@ export default {
height: 20px;
width: 100%;
font-size: 12px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 1.75px;
padding-left: 10px;
.online1 {
color: #4CF993;
color: #4cf993;
}
.outline1 {
color: #ccc;
}
}
}
}
@ -432,7 +633,6 @@ export default {
right: 20px;
top: 20px;
display: flex;
}
/deep/.el-button--primary {
@ -445,10 +645,10 @@ export default {
text-align: center;
background: rgba(0, 0, 0, 0);
border: 0;
background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url("~@/assets/companyFile/2121.png") no-repeat;
background-size: 100% 100%;
font-size: 14px;
color: #F8FBFF;
color: #f8fbff;
letter-spacing: 0.89px;
font-weight: 500;
}
@ -458,34 +658,33 @@ export default {
margin-left: 20px;
.el-form-item__label {
color: #EAF6FF;
color: #eaf6ff;
letter-spacing: 1px;
text-align: center;
font-weight: 400;
}
}
/deep/.el-tabs--card>.el-tabs__header {
/deep/.el-tabs--card > .el-tabs__header {
border: 0;
.el-tabs__nav {
border: 0;
}
.el-tabs__nav {
opacity: 0.7;
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
background-image: linear-gradient(
180deg,
rgba(234, 241, 248, 0.1) 0%,
rgba(208, 222, 238, 0.1) 100%
);
border: 1px solid rgba(91, 116, 140, 1);
}
.el-tabs__item {
font-size: 14px;
color: #EAF6FF;
color: #eaf6ff;
letter-spacing: 1px;
border: 0;
}
@ -497,7 +696,7 @@ export default {
.el-tabs__item.is-active {
border: 0;
font-size: 14px;
color: #4BFFAD;
color: #4bffad;
letter-spacing: 1px;
background: rgba(129, 255, 204, 0.26);
}
@ -505,12 +704,10 @@ export default {
/deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/back003.png') no-repeat;
background: url("~@/assets/companyFile/back003.png") no-repeat;
background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7);
;
.el-range-separator {
color: #ccc;
}
@ -529,7 +726,79 @@ export default {
height: calc(100% - 60px);
}
}
/deep/.el-input {
.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url("~@/assets/companyFile/back003.png") no-repeat;
background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7);
}
}
/deep/.el-table {
background: rgba(0, 0, 0, 0);
td.el-table__cell {
border: 0;
}
.xiangqing {
background: rgba(0, 0, 0, 0);
border: 0;
color: rgba(48, 196, 255, 0.7);
cursor: pointer;
}
.alarmType {
width: 72px;
height: 32px;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 1px;
font-weight: 400;
.red {
width: 100%;
height: 100%;
background: rgba(152, 7, 7, 0.21);
border: 1px solid rgba(214, 38, 38, 1);
display: flex;
justify-content: center;
align-items: center;
}
.yellow {
width: 100%;
height: 100%;
background: rgba(152, 95, 7, 0.21);
border: 1px solid rgba(255, 169, 38, 1);
display: flex;
justify-content: center;
align-items: center;
}
.blue {
width: 100%;
height: 100%;
background: rgba(6, 89, 197, 0.21);
border: 1px solid rgb(11, 108, 205);
display: flex;
justify-content: center;
align-items: center;
}
.green {
width: 100%;
height: 100%;
background: rgba(6, 184, 27, 0.21);
border: 1px solid rgb(1, 170, 43);
display: flex;
justify-content: center;
align-items: center;
}
}
}
.imgList {
box-sizing: border-box;
width: calc(100% - 314px);
@ -559,13 +828,11 @@ export default {
margin: 0 auto;
width: 96%;
height: calc(100% - 90px);
;
background: #D8D8D8;
background: #d8d8d8;
img {
width: 100%;
height: 100%;
;
}
}
@ -622,7 +889,6 @@ export default {
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(234, 246, 255, 0.86);
;
letter-spacing: 1.52px;
span {
@ -639,18 +905,15 @@ export default {
height: 36px;
line-height: 36;
font-size: 16px;
color: #EBFFF4;
color: #ebfff4;
letter-spacing: 2px;
line-height: 36px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
font-weight: 400;
span {
color: #FF9191;
color: #ff9191;
}
}
}
</style>

3
src/views/archives/monitor.vue
Unescape View File

@ -32,7 +32,7 @@
<div class="right"><i class="dian"></i><span>离线</span></div>
</div>
<div class="videoImg">
<div class="boxshadow" v-if="isShow[index].show" @mouseleave="closeShadow(index)"
<div class="boxshadow" @mouseleave="closeShadow(index)"
@click="showDia(item)">
<div><i class="el-icon-video-play"></i>&nbsp;&nbsp;查看实时监控</div>
</div>
@ -44,7 +44,6 @@
<playVideo :video="{ url: item.wsFlv, index: index }" :control="true" v-if="diaVisible"></playVideo>
</el-dialog>
</div>
</div>
<div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"

Write Preview
Loading…
Cancel
Save