Skip to content

D
digital-construction
Commit 94ef9805 authored by 张牧越's avatar 张牧越
Browse files
Options

商混检测页面编写

parent f371f505
Show whitespace changes
Inline Side-by-side
Showing with 1492 additions and 323 deletions
dist.zip deleted 100644 → 0
View file @ f371f505
File deleted
package-lock.json
View file @ 94ef9805
......@@ -10124,6 +10124,11 @@
"csstype": "^3.1.0"
}
},
"vue-calendar-component": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz",
"integrity": "sha512-BJh7xOBzM7QVcapcN4EbPQ1eZ8Pii1/oy+dzqjZTilRSIDD7SRPdFpnUJwZvs8lCrhtBAyJbYFsdm2SogXWHVQ=="
},
"vue-cli-plugin-style-resources-loader": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz",
......
src/assets/common/element.less 0 → 100644
View file @ 94ef9805
::v-deep .el-dialog__header {
text-align: center;
padding: 20px;
background: #2268bf;
.el-dialog__title {
color: #fff !important;
}
.el-dialog__headerbtn {
font-size: 24px;
right: 20px;
top: 20px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}
}
::v-deep .el-dialog__body {
background: #164b8e;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background: rgba(14, 60, 117, 0.2);
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
background-color: transparent;
}
::v-deep .el-table tr {
background: transparent;
}
::v-deep .el-table th.el-table__cell {
background: #0e3c75;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
border-color: transparent;
}
::v-deep .el-table__empty-text {
color: #fff;
}
::v-deep .el-table thead {
color: #fff;
}
::v-deep .el-table {
color: #fff;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background: rgba(39, 172, 251, 0.2) !important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: rgba(14, 60, 117, 0.4);
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-pagination {
text-align: right;
background: rgba(14, 60, 117, 0.99);
padding: 12px;
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}
.el-input__inner {
color: #fff;
}
button {
background: transparent !important;
}
.el-pagination button:disabled {
background: transparent !important;
}
.el-pager li {
background: transparent;
color: #fff;
}
.el-pager li.active {
color: #409eff;
}
.btn-next,
.btn-prev {
color: #fff !important;
}
button:disabled {
color: #c0c4cc !important;
}
}
::v-deep .el-form-item__label {
color: #fff;
}
::v-deep .el-range-input {
background: transparent;
}
::v-deep .el-date-editor .el-range-input {
color: #fff;
}
::v-deep .el-range-separator {
color: #fff !important;
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
color: #fff;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-tree {
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .el-tree-node:focus>.el-tree-node__content {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .el-tree-node__content {
height: 40px;
}
::v-deep .el-step__icon-inner {
display: none !important;
}
::v-deep .el-step__head.is-success {
::v-deep .el-step__icon {
border-width: 4px !important;
border-color: #67c23a !important;
}
}
::v-deep .el-step__icon.is-text {
border-width: 4px !important;
border-color: #22c2ec;
}
::v-deep .el-step__head.is-success {
.el-step__icon {
border-color: #67c23a !important;
}
}
::v-deep .el-divider {
background: #5f7890;
opacity: 0.5;
}
\ No newline at end of file
src/components/Index.vue
View file @ 94ef9805
......@@ -34,7 +34,7 @@
<div class="overflowed">{{ screenDetail.short_name }}</div>
</el-tooltip>
</div>
<div class="right-nav" style="padding-left: 40px">
<div class="right-nav">
<router-link
v-for="(router, index) in rightNav"
:key="index"
......
src/components/construction/Index.vue
View file @ 94ef9805
......@@ -488,6 +488,7 @@ export default {
};
</script>
<style scoped lang="less">
@import "@/assets/common/element.less";
#construction {
padding: 12px 20px;
display: flex;
......@@ -651,25 +652,7 @@ table {
font-size: 14px;
color: #fff;
}
::v-deep .el-step__icon-inner {
display: none !important;
}
::v-deep .el-step__head.is-success {
::v-deep .el-step__icon {
border-width: 4px !important;
border-color: #67c23a !important;
}
}
::v-deep .el-step__icon.is-text {
border-width: 4px !important;
border-color: #22c2ec;
}
::v-deep .el-step__head.is-success {
.el-step__icon {
border-color: #67c23a !important;
}
}
.progress-contains {
padding: 8px 0;
}
......
src/components/management/Index.vue 0 → 100644
View file @ 94ef9805
<template>
<div id="management">
<div class="side-area">
<Title text="混凝土方量统计"></Title>
<ShadowContainer>
<div class="detail-status">
<div class="count-details">
<img src="@/assets/icon-short-bg.png" alt="" />
<div class="count-detail">
<div class="data">288.69</div>
<div class="text">本月供应量/m³</div>
</div>
<div class="count-detail">
<div class="data">288.69</div>
<div class="text">今日计划量/m³</div>
</div>
<div class="count-detail">
<div class="data">885.69</div>
<div class="text">今日供应量/m³</div>
</div>
</div>
<div class="divider">
<div class="divider-line"></div>
<div class="divider-text">今日任务单</div>
<div class="divider-line"></div>
</div>
</div>
<div class="quest-list">
<div class="quest">
<div class="quest-title">
<img src="@/assets/management/quest.png" alt="" />
PT20220824340320
<span class="right">
<i class="el-icon-caret-bottom"></i>
</span>
</div>
<div class="quest-infos">
<div class="quest-info">
<div class="quest-count">1827.01</div>
<div class="quest-text">计划供应</div>
</div>
<div class="quest-info">
<div class="quest-count">946.72</div>
<div class="quest-text">已供应</div>
</div>
<div class="quest-info">
<div class="quest-count">6</div>
<div class="quest-text">累计车次</div>
</div>
</div>
<div class="quest-des">
<div>任务需求：</div>
<div>工程部位：</div>
</div>
<div class="car-list">
<div class="car">
<img src="@/assets/management/icon-car.png" alt="" />
<div>
<div>浙A283747 / 第37车 / 王一 / 92m³</div>
<div>发车时间：未发车</div>
</div>
</div>
<div class="car">
<img src="@/assets/management/icon-car.png" alt="" />
<div>
<div>浙A283747 / 第37车 / 王一 / 92m³</div>
<div>发车时间：未发车</div>
</div>
</div>
<div class="car">
<img src="@/assets/management/icon-car.png" alt="" />
<div>
<div>浙A283747 / 第37车 / 王一 / 92m³</div>
<div>发车时间：未发车</div>
</div>
</div>
<div class="car">
<img src="@/assets/management/icon-car.png" alt="" />
<div>
<div>浙A283747 / 第37车 / 王一 / 92m³</div>
<div>发车时间：未发车</div>
</div>
</div>
</div>
</div>
</div>
</ShadowContainer>
</div>
<div class="mid-area">
<div class="status-container">
<div class="rect">
<div class="rect-count">
1837.28
<span>m³</span>
</div>
<div class="rect-text">累计使用方量</div>
</div>
<div class="rect" style="cursor: pointer" @click="preComVisible = true">
<div class="rect-count">
803.83
<span>m³</span>
</div>
<div class="rect-text">未来三天预订单</div>
</div>
<div class="rect">
<div class="rect-count">
0
<span>m³</span>
</div>
<div class="rect-text">今日预订单</div>
</div>
<pre-com-dialog
:visible="preComVisible"
@changeVisible="(val) => (preComVisible = val)"
></pre-com-dialog>
</div>
<div style="position: relative">
<div class="carwindow" v-if="carVisible">
<div class="car-description">
<img src="@/assets/management/icon-car2.png" alt="" />
浙A283747 / 第37车
<span class="online">运输中</span>
</div>
<div class="car-info">
<div>驾驶员：</div>
<div>部位：</div>
<div>标号/泵送方式：</div>
<div>出厂时间：</div>
</div>
</div>
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<div id="amap-container"></div>
</div>
</div>
</div>
<div class="side-area">
<Title text="见证取样"></Title>
<ShadowContainer>
<div class="detail-status">
<div class="count-details">
<img src="@/assets/icon-short-bg.png" alt="" />
<div class="count-detail">
<div class="data">231</div>
<div class="text">取样总量</div>
</div>
<div class="count-detail">
<div class="data">288.69</div>
<div class="text">已取样</div>
</div>
<div class="count-detail">
<div class="data">0</div>
<div class="text">未取样</div>
</div>
</div>
<div class="divider flex">
<div
:class="['tab-divider', active == 1 ? 'active' : '']"
@click="changeActive(1)"
>
<div class="divider-line"></div>
<div class="divider-text">未取样</div>
<div class="divider-line"></div>
</div>
<div
:class="['tab-divider', active == 2 ? 'active' : '']"
@click="changeActive(2)"
>
<div class="divider-line"></div>
<div class="divider-text">已取样</div>
<div class="divider-line"></div>
</div>
</div>
</div>
<div class="sample-list">
<div class="sample">
<div class="sample-title">
<img src="@/assets/management/sample.png" alt="" />
PT20220824340320
</div>
<div class="sample-info">
<div>养护条件：</div>
<div>强度等级：</div>
<div>结构部位：</div>
<div>供应日期：</div>
</div>
</div>
</div>
</ShadowContainer>
<sample-dialog
:visible="sampleVisible"
@changeVisible="(val) => (sampleVisible = val)"
></sample-dialog>
</div>
</div>
</template>
<script>
import sampleDialog from "./sampleDialog";
import preComDialog from "./preComDialog";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getBaseInfo } from "@/api/index";
export default {
name: "Management",
components: { sampleDialog, preComDialog },
data() {
return {
active: 1,
AMap: null,
map: null,
mapCenter: [],
carVisible: false,
sampleVisible: false,
preComVisible: false,
};
},
methods: {
changeActive(index) {
this.active = index;
},
initMap() {
AMapLoader.load({
key: "fc00c5b70f67a8414344682f217d4b6e",
version: "1.4.15",
plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
})
.then((AMap) => {
// 初始化地图
this.AMap = AMap;
this.map = new AMap.Map("amap-container", {
viewMode: "2D",
zoom: 19,
center: this.mapCenter,
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
this.map.on("click", () => {});
})
.catch((e) => {
console.log(e);
});
},
setMarker() {
this.monitors.map((marker) => {
const mapMarkers = new this.AMap.Marker({
// icon: marker.is_online == 1 ? onlineIcon : offlineIcon,
position: [marker.longitude, marker.latitude],
offset: new this.AMap.Pixel(-25, -25),
extData: {
markerData: marker,
},
});
mapMarkers.setMap(this.map);
mapMarkers.on("click", (e) => {
const markData = e.target.getExtData().markerData;
this.map.setCenter([markData.longitude, markData.latitude]);
this.windowData = markData;
this.$nextTick(() => {
this.towerWindowVisible = true;
});
});
});
},
},
mounted() {
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
},
};
</script>
<style scoped lang="less">
#management {
padding: 12px 20px;
display: flex;
justify-content: space-between;
}
.side-area {
width: 25%;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
.status-container {
display: flex;
justify-content: space-between;
.rect {
width: 250px;
height: 104px;
background: url("@/assets/management/stat-bg.png") no-repeat;
background-size: 100% 100%;
padding: 34px 20px;
text-align: center;
.rect-count {
font-size: 44px;
color: rgba(198, 234, 249, 1);
span {
font-size: 14px;
}
}
.rect-text {
font-size: 22px;
color: #27acfb;
}
}
}
}
.divider {
display: flex;
justify-content: center;
align-items: stretch;
margin-bottom: 12px;
.divider-line {
width: calc(50% - 166px);
border-top: 1px solid #f2af58;
transform: translateY(50%);
}
.divider-text {
text-align: center;
width: 100px;
font-size: 16px;
padding: 0 8px;
font-weight: 400;
color: #27acfb;
}
}
.construction-name {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
font-style: italic;
color: #ffffff;
text-align: center;
margin: 20px 0;
margin-top: 0;
}
.count-details {
display: flex;
justify-content: space-between;
text-align: center;
margin-bottom: 28px;
position: relative;
padding-top: 20px;
img {
position: absolute;
width: 100%;
vertical-align: top;
left: 0;
top: 0;
z-index: -1;
}
.count-detail {
width: calc(100% / 3);
}
.data {
font-size: 24px;
font-weight: bold;
color: #ffaf51;
line-height: 24px;
margin-bottom: 12px;
&.unrecord {
opacity: 0.2;
}
&.small {
font-size: 12px;
line-height: 12px;
}
}
.text {
font-size: 14px;
font-weight: 400;
color: #27acfb;
}
}
.divider.flex {
display: flex;
justify-content: space-between;
}
.tab-divider {
width: 45%;
display: flex;
justify-content: center;
cursor: pointer;
.divider-text {
width: 50px;
color: #c6def9;
}
.divider-line {
width: calc(50% - 60px);
border-top: 1px solid #c6def9;
transform: translateY(50%);
}
}
.tab-divider.active {
.divider-text {
color: #27acfb;
}
.divider-line {
border-color: #f2af58;
}
}
.sample-list {
height: 720px;
.sample {
img {
width: 20px;
vertical-align: middle;
margin-right: 6px;
}
font-size: 14px;
color: #c6def9;
.sample-title {
background: rgba(44, 96, 162, 0.2);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
line-height: 40px;
padding: 0 12px;
}
.sample-info {
background: rgba(44, 96, 162, 0.1);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
& > div {
width: calc(50% - 48px);
padding: 6px 12px;
}
}
&:hover {
color: #27acfb;
.sample-title,
.sample-info {
background: rgba(44, 96, 162, 0.4);
}
}
}
}
.swagger-container {
position: relative;
margin-top: 20px;
height: 770px;
.lt,
.lb,
.rb,
.rt {
position: absolute;
width: 20px;
height: 20px;
}
.lt {
top: -2px;
left: -2px;
}
.lb {
left: -2px;
bottom: -2px;
}
.rb {
right: -2px;
bottom: -2px;
}
.rt {
right: -2px;
top: -2px;
}
}
.quest-list {
.quest {
color: #c6def9;
background: rgba(44, 96, 162, 0.2);
.quest-title {
font-size: 14px;
color: #c6def9;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
img {
width: 20px;
vertical-align: middle;
}
.right {
float: right;
}
}
.quest-infos {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
.quest-info {
width: calc(100% / 3);
border-right: 1px solid rgba(122, 143, 173, 0.4);
padding: 8px;
text-align: center;
&:last-child {
border-right: none;
}
.quest-text {
margin-top: 10px;
}
}
}
.quest-des {
display: flex;
justify-content: space-between;
line-height: 44px;
padding: 0 10px;
& > div {
width: 50%;
}
}
.car-list {
border-top: 1px solid rgba(122, 143, 173, 0.4);
.car {
display: flex;
justify-content: flex-start;
padding: 10px;
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
&:last-child {
border-bottom: none;
}
&:hover {
background: rgba(44, 96, 162, 0.5);
color: #27acfb;
}
img {
width: 20px;
margin-right: 10px;
}
}
}
}
}
#amap-container {
width: 100%;
height: 100%;
}
.carwindow {
width: 460px;
height: 180px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-120%);
background: url("@/assets/safecap/cap-window-bg.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
z-index: 1000;
}
.car-info {
font-size: 16px;
color: #c6def9;
line-height: 30px;
margin-top: 12px;
}
.car-description {
line-height: 32px;
font-size: 18px;
color: #c6def9;
padding-bottom: 16px;
border-bottom: 1px solid #7a8fad;
img {
width: 32px;
vertical-align: top;
}
.online {
color: rgba(62, 236, 111, 1);
float: right;
}
}
</style>
\ No newline at end of file
src/components/management/preComDialog.vue 0 → 100644
View file @ 94ef9805
<template>
<el-dialog
:visible.sync="dialogVisible"
title="近三日预委托记录"
width="80vw"
top="10vh"
>
<div>
<el-table :data="tableData" height="550px" stripe>
<el-table-column
label="订单编号"
prop=""
align="center"
></el-table-column>
<el-table-column
label="现场联系"
prop=""
align="center"
></el-table-column>
<el-table-column
label="供应日期"
prop=""
align="center"
></el-table-column>
<el-table-column
label="供应量"
prop=""
align="center"
></el-table-column>
<el-table-column label="状态" prop="" align="center"></el-table-column>
<el-table-column
label="下单时间"
prop=""
align="center"
></el-table-column>
</el-table>
</div>
</el-dialog>
</template>
<script>
export default {
name: "PreComDialog",
props: {
visible: {
type: Boolean,
default: false,
},
},
data() {
return {
tableData: [],
};
},
methods: {},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("changeVisible", val);
},
},
},
watch: {},
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
</style>
\ No newline at end of file
src/components/management/sampleDialog.vue 0 → 100644
View file @ 94ef9805
<template>
<el-dialog
:visible.sync="dialogVisible"
title="取样详情"
width="80vw"
top="10vh"
>
<div id="sample-container">
<div id="sample-map-container"></div>
<div class="sample-info">
<div class="sample-title">取样信息</div>
<div class="sample-description">
<div>拍摄人：</div>
<div>样品编号：</div>
<div>检测项目：</div>
<div>检测单位：</div>
<div>施工单位：</div>
<div>工程部位：</div>
</div>
<div class="sample-imgs">
<div class="sample-img">
<img src="" alt="" />
<div class="img-des">自拍照</div>
</div>
<div class="sample-img">
<img src="" alt="" />
<div class="img-des">自拍照</div>
</div>
<div class="sample-img">
<img src="" alt="" />
<div class="img-des">自拍照</div>
</div>
<div class="sample-img">
<img src="" alt="" />
<div class="img-des">自拍照</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import { getBaseInfo } from "@/api/index";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: "MapDialog",
props: {
visible: {
type: Boolean,
default: false,
},
sampleId: {
type: [String, Number],
default: "",
},
},
data() {
return {
date: "",
map: null,
Amap: null, //高德地图amap方法实例
mapCenter: [],
hour: "",
};
},
methods: {
init() {
getBaseInfo().then((res) => {
this.mapCenter = [res.data.longitude, res.data.latitude];
this.$nextTick(() => {
this.initMap();
});
});
},
initMap() {
AMapLoader.load({
key: "fc00c5b70f67a8414344682f217d4b6e",
version: "1.4.15",
plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
}).then((AMap) => {
// 初始化地图
this.AMap = AMap;
this.map = new AMap.Map("sample-map-container", {
viewMode: "2D",
zoom: 20,
center: this.mapCenter,
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
});
});
},
search() {
this.map.clearMap();
// getSafeCapRoute({
// bind_id: this.userId,
// start_time: `${this.date} ${this.hour}:00:00`,
// }).then((res) => {
// const paths = res.data.line.map((point) => {
// return [point.longitude, point.latitude];
// });
// new this.AMap.Polyline({
// path: paths,
// map: this.map,
// showDir: true,
// strokeColor: "#3366bb",
// strokeWeight: 8,
// });
// });
},
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("changeVisible", val);
},
},
},
watch: {
dialogVisible(val) {
if (val) {
this.$nextTick(() => {
this.init();
});
}
},
},
mounted() {
this.init();
},
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#sample-container {
display: flex;
justify-content: space-between;
}
#sample-map-container {
width: 70%;
height: 700px;
}
.sample-info {
width: 29%;
.sample-title {
line-height: 40px;
color: #fff;
text-align: center;
background: #02306a;
}
.sample-description {
padding: 20px;
line-height: 24px;
font-size: 14px;
color: #c6def9;
background: #0e3c75;
}
.sample-imgs {
background: #0e3c75;
padding: 10px;
margin-top: 10px;
height: 446px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.sample-img {
width: 48%;
margin-right: 2%;
position: relative;
img {
vertical-align: top;
width: 100%;
}
.img-des {
position: absolute;
background: rgba(0, 0, 0, 0.7);
line-height: 30px;
height: 30px;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
color: #fff;
}
}
}
</style>
\ No newline at end of file
src/components/safecap/Index.vue
View file @ 94ef9805
......@@ -395,6 +395,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#safecap {
padding: 12px 20px;
display: flex;
......@@ -406,13 +407,6 @@ export default {
width: calc(80% - 20px);
}
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.swagger-container {
position: relative;
......@@ -567,116 +561,7 @@ export default {
color: rgba(62, 236, 111, 1);
}
}
::v-deep .el-pagination {
text-align: right;
background: rgba(14, 60, 117, 0.99);
padding: 12px;
.el-pagination__total,
.el-pagination__jump {
color: #fff;
}
.el-input__inner {
color: #fff;
}
button {
background: transparent !important;
}
.el-pagination button:disabled {
background: transparent !important;
}
.el-pager li {
background: transparent;
color: #fff;
}
.el-pager li.active {
color: #409eff;
}
.btn-next,
.btn-prev {
color: #fff !important;
}
button:disabled {
color: #c0c4cc !important;
}
}
::v-deep .el-dialog__header {
text-align: center;
padding: 20px;
background: #2268bf;
.el-dialog__title {
color: #fff !important;
}
.el-dialog__headerbtn {
font-size: 24px;
right: 20px;
top: 20px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}
}
::v-deep .el-dialog__body {
background: #164b8e;
}
::v-deep .el-form-item__label {
color: #fff;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background: rgba(14, 60, 117, 0.2);
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
background-color: transparent;
}
::v-deep .el-table tr {
background: transparent;
}
::v-deep .el-table th.el-table__cell {
background: #0e3c75;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
border-color: transparent;
}
::v-deep .el-table__empty-text {
color: #fff;
}
::v-deep .el-table thead {
color: #fff;
}
::v-deep .el-table {
color: #fff;
}
::v-deep
.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
background: rgba(39, 172, 251, 0.2) !important;
}
::v-deep
.el-table--striped
.el-table__body
tr.el-table__row--striped
td.el-table__cell {
background: rgba(14, 60, 117, 0.4);
}
::v-deep .el-range-input {
background: transparent;
}
::v-deep .el-date-editor .el-range-input {
color: #fff;
}
::v-deep .el-range-separator {
color: #fff !important;
}
::v-deep .el-input__inner {
color: #fff;
}
.device-user {
display: flex;
justify-content: space-between;
......
src/components/supervisory/Index.vue
View file @ 94ef9805
......@@ -307,6 +307,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#supervisory {
padding: 12px 20px;
display: flex;
......@@ -315,25 +316,6 @@ export default {
width: 20%;
}
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-tree {
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .custom-tree-node {
flex: 1;
......@@ -352,9 +334,7 @@ export default {
vertical-align: top;
}
}
::v-deep .el-tree-node__content {
height: 40px;
}
.tree-container {
height: 860px;
overflow-y: scroll;
......@@ -440,26 +420,6 @@ export default {
}
}
::v-deep .el-dialog__header {
text-align: center;
padding: 20px;
background: #2268bf;
.el-dialog__title {
color: #fff !important;
}
.el-dialog__headerbtn {
font-size: 24px;
right: 20px;
top: 20px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}
}
::v-deep .el-dialog__body {
background: #164b8e;
}
.vueVideoPlayer {
& .video-js {
& .vjs-big-play-button {
......
src/components/tower/Index.vue
View file @ 94ef9805
......@@ -17,13 +17,7 @@
<div id="dip-chart" ref="dipChart"></div>
</ShadowContainer>
</div>
<div class="mid-area">
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<div id="amap-container"></div>
<div id="mid-area">
<div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description">
<img
......@@ -53,13 +47,13 @@
</div>
<div class="recent-open">最近使用:{{ windowData.log_time }}</div>
</div>
<div class="swagger-container" id="container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<div id="amap-container"></div>
</div>
<device-dialog
:deviceId="windowData.id"
:deviceData="deviceData"
:visible="deviceDialogVisible"
@changeVisible="(val) => (deviceDialogVisible = val)"
></device-dialog>
</div>
<div class="side-area">
<Title text="报警信息"></Title>
......@@ -119,6 +113,13 @@
</div>
</ShadowContainer>
</div>
<device-dialog
:deviceId="windowData.id"
:deviceData="deviceData"
:visible="deviceDialogVisible"
@changeVisible="(val) => (deviceDialogVisible = val)"
></device-dialog>
</div>
</template>
<script>
......@@ -546,8 +547,8 @@ export default {
sinSigma *
(cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
console.log(revAz);
// var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
var lngLatObj = {
lng: lon1 + this.deg(L),
lat: this.deg(lat2),
......@@ -622,9 +623,20 @@ export default {
});
});
},
resetMapSize() {
let screenWidth =
document.body.clientWidth || document.documentElement.clientWidth;
let defWidth = 1920;
let xScale = screenWidth / defWidth;
let mapContent = document.getElementById("container");
mapContent.style.zoom = 1 / xScale;
mapContent.style.height = xScale * 960 + "px";
},
},
mounted() {
this.getTowerData();
this.resetMapSize();
},
beforeDestroy() {
clearInterval(this.timer);
......@@ -632,6 +644,7 @@ export default {
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#tower {
padding: 12px 20px;
display: flex;
......@@ -639,9 +652,10 @@ export default {
.side-area {
width: 25%;
}
.mid-area {
#mid-area {
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
}
}
.swagger-container {
......@@ -726,29 +740,7 @@ export default {
font-size: 14px;
color: #22c3ed;
}
::v-deep .el-step__icon-inner {
display: none !important;
}
::v-deep .el-step__head.is-success {
::v-deep .el-step__icon {
border-width: 4px !important;
border-color: #67c23a !important;
}
}
::v-deep .el-step__icon.is-text {
border-width: 4px !important;
border-color: #22c2ec;
}
::v-deep .el-step__head.is-success {
.el-step__icon {
border-color: #67c23a !important;
}
}
::v-deep .el-divider {
background: #5f7890;
opacity: 0.5;
}
.warn-message {
position: relative;
height: 420px;
......@@ -857,6 +849,7 @@ export default {
background: url("@/assets/safecap/cap-window-bg.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
z-index: 1000;
}
.recent-open {
font-size: 16px;
......@@ -880,25 +873,4 @@ export default {
color: rgba(62, 236, 111, 1);
}
}
::v-deep .el-dialog__header {
text-align: center;
padding: 20px;
background: #2268bf;
.el-dialog__title {
color: #fff !important;
}
.el-dialog__headerbtn {
font-size: 24px;
right: 20px;
top: 20px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
}
}
::v-deep .el-dialog__body {
background: #164b8e;
}
</style>
\ No newline at end of file
src/components/tower/deviceDialog.vue
View file @ 94ef9805
<template>
<el-dialog
:visible.sync="dialogVisible"
title="设备详情"
append-to-body
:title="deviceData.device_sn"
@opened="openedEvents"
width="1100px"
width="1820px"
top="5vh"
>
<div id="device-container">
<div class="left-info">
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
设备信息
</div>
<div class="infos">
<div>产权单位：</div>
<div>备案编号：</div>
<div>备案编号：</div>
<div>制造单位：</div>
<div>设备型号：</div>
<div>出厂日期：</div>
<div>
设备备案表：<span class="file">
<i class="el-icon-paperclip"></i>点击查看文件</span
>
</div>
</div>
</div>
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
{{ deviceData.device_sn }} /
<span :class="[deviceData.is_online == 1 ? 'online' : '']">{{
deviceData.is_online_text
}}</span>
安装信息
</div>
<div class="infos">
<div>安装单位：</div>
<div>联系人：</div>
<div>首次安装高度：</div>
<div>最终使用高度：</div>
<div>预安装时间：</div>
<div>
设备安装表：<span class="file">
<i class="el-icon-paperclip"></i>点击查看文件</span
>
</div>
</div>
</div>
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
使用信息
</div>
<div class="infos">
<div>使用单位：</div>
<div>申请使用时间：</div>
<div>使用单位联系人：</div>
<div>安装验收时间：</div>
<div>确认安装高度：</div>
<div>检测单位：</div>
</div>
</div>
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
维保信息
</div>
<div class="infos">
<div>维保人员：</div>
<div>维保时间：</div>
<div>维保单位：</div>
</div>
</div>
</div>
<div class="mid">
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
设备情况
<div class="right-slot">
<span>数据更新时间：{{ deviceData.log_time }}</span>
</div>
</div>
<div class="base-info">
<div class="status-area">
......@@ -44,41 +111,145 @@
<div class="status-value">{{ deviceData.wind_speed_rate }}</div>
<div class="status-text">风速百分比/%</div>
</div>
<div class="status-window">
<div
class="status-value"
style="line-height: 20px; font-size: 15px"
<div class="status-window" style="opacity: 0"></div>
</div>
</div>
<div class="tower">
<div>
<img src="@/assets/tower/tower-top.png" alt="" />
</div>
<div class="mid-tower" v-for="i in 9" :key="i">
<img src="@/assets/tower/tower-mid.png" alt="" />
<div class="bind-text">
{{ 9 - i + 1 }}节 <span class="status">已绑定</span>
</div>
</div>
<div>
<img src="@/assets/tower/tower-bottom.png" alt="" />
</div>
</div>
</div>
</div>
<div class="right-device">
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
视频监控
<div class="right-slot">
<el-button
type="primary"
size="mini"
@click="historyVisible = true"
>历史抓拍</el-button
>
<el-dialog
:visible.sync="historyVisible"
title="历史抓拍"
custom-class="inner-dialog"
width="900px"
append-to-body
>
<div>
<el-form inline :model="historyForm">
<el-form-item label="监控设备">
<el-select :popper-append-to-body="false">
<el-option></el-option>
</el-select>
</el-form-item>
<el-form-item label="抓拍日期">
<el-date-picker
v-model="searchForm.date"
type="date"
value-format="yyyy-MM-dd"
:append-to-body="false"
>
{{ deviceData.log_time && deviceData.log_time.split(" ")[0] }}
<br />
{{ deviceData.log_time && deviceData.log_time.split(" ")[1] }}
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
<div class="img-container"></div>
</div>
<div class="status-text">数据更新</div>
</el-dialog>
</div>
</div>
<div class="video-area">
<div class="in-video">
<div id="video-container" v-if="deviceData.is_camera == 1"></div>
<div id="video-container-img" v-else>
<img src="@/assets/tower/no_camera.png" alt="" />
<div>暂无监控信息</div>
</div>
</div>
<div class="out-video">
<div
id="video-container-out"
v-if="!deviceData.is_camera == 1"
></div>
<div id="video-container-img" v-else>
<img src="@/assets/tower/no_camera.png" alt="" />
<div>暂无监控信息</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
设备巡查情况
</div>
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
:markDateMore="dateMark"
></Calendar>
<el-dialog
:visible.sync="deviceVisible"
title="设备巡查情况"
custom-class="inner-dialog"
width="900px"
append-to-body
>
<div>
<div class="device-info">
<div class="avatar">
<img class="avatar-portrait" src="" alt="" />
<div class="user-name">李浩</div>
</div>
<div class="device-status">
<div>巡查时间：</div>
<div>巡查记录：</div>
</div>
<div class="device-img"></div>
</div>
</div>
</el-dialog>
</div>
<div class="content-area">
<div class="title-label">
<img src="@/assets/tower/arrow.png" alt="" />
今日载重/高度实时数据
设备今日使用情况
</div>
<div id="current-chart" ref="currentChart"></div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import Calendar from "vue-calendar-component";
import { getDeviceTodayChart, getTowerLiveUrl } from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
name: "DeviceDialog",
components: { Calendar },
props: {
visible: {
type: Boolean,
......@@ -99,6 +270,12 @@ export default {
return {
todayData: [],
player: null,
historyVisible: false,
deviceVisible: false,
searchForm: {
date: new Date(),
},
dateMark: [],
};
},
methods: {
......@@ -217,6 +394,13 @@ export default {
});
}
},
clickDay(data) {
console.log(data); //选中某天
this.deviceVisible = true;
},
changeDate(data) {
console.log(data); //左右点击切换月份
},
},
computed: {
dialogVisible: {
......@@ -234,32 +418,91 @@ export default {
this.player && this.player.dispose();
}
},
historyVisible(val) {
if (val) {
this.$nextTick(() => {
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
var scale = devicewidth / 1920; // 分母——设计稿的尺寸
const dialogs = document.getElementsByClassName("inner-dialog");
for (let i = 0; i < dialogs.length; i++) {
dialogs[i].style.zoom = scale;
}
});
}
},
deviceVisible(val) {
if (val) {
this.$nextTick(() => {
var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
var scale = devicewidth / 1920; // 分母——设计稿的尺寸
const dialogs = document.getElementsByClassName("inner-dialog");
for (let i = 0; i < dialogs.length; i++) {
dialogs[i].style.zoom = scale;
}
});
}
},
},
mounted() {},
};
</script>
<style lang="less" scoped>
@import "@/assets/common/element.less";
#device-container {
display: flex;
justify-content: space-between;
.mid {
width: 600px;
}
.left-info {
width: 370px;
.infos {
color: rgba(198, 222, 249, 1);
line-height: 28px;
.file {
color: rgba(0, 183, 238, 1);
cursor: pointer;
}
}
}
.right-device {
width: 790px;
}
}
.title-label {
border-bottom: 2px solid #00b7ee;
height: 18px;
font-size: 18px;
color: #c6def9;
line-height: 30px;
min-height: 30px;
margin-bottom: 20px;
color: rgba(0, 183, 238, 1);
line-height: 40px;
min-height: 40px;
margin-bottom: 8px;
img {
width: 16px;
}
.right-slot {
float: right;
font-size: 14px;
color: rgba(198, 222, 249, 1);
}
}
.base-info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#video-container {
width: calc(40% - 20px);
width: 100%;
height: 200px;
}
.video-area {
display: flex;
justify-content: space-between;
.in-video,
.out-video {
width: calc(50% - 10px);
}
}
#video-container-img {
width: calc(40% - 50px);
text-align: center;
border: 1px solid #00b7ee;
box-shadow: 0px 21px 24px 0px rgba(42, 78, 169, 0.4);
......@@ -276,7 +519,7 @@ export default {
}
.status-area {
display: flex;
width: 60%;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
......@@ -307,7 +550,7 @@ export default {
}
#current-chart {
width: 100%;
height: 300px;
height: 200px;
}
.online {
color: #3eec6f;
......@@ -316,4 +559,87 @@ export default {
width: 100%;
height: 100%;
}
.content-area {
background: rgba(24, 81, 147, 0.98);
padding: 10px;
margin-bottom: 10px;
}
.tower {
height: 626px;
overflow-y: auto;
img {
max-width: 100%;
vertical-align: top;
display: inline-block;
}
.mid-tower {
img {
width: 58%;
}
display: inline-block;
.bind-text {
display: inline-block;
color: rgba(198, 222, 249, 1);
margin-left: 12px;
line-height: 50px;
.status {
margin-left: 30px;
}
}
}
}
.img-container {
display: flex;
justify-content: flex-start;
img {
width: 20%;
height: 188px;
margin-right: calc(10% / 3);
margin-bottom: 12px;
&:nth-child(4n) {
margin-right: 0;
}
}
}
.wh_container {
width: 100%;
max-width: 100%;
}
::v-deep .wh_content_all {
background: transparent;
}
::v-deep .wh_item_date:hover {
background: #2268bf !important;
}
::v-deep .wh_content_item .wh_isToday {
background: #164b8e;
}
::v-deep .wh_content_item .wh_chose_day {
background: transparent;
}
.date-green {
background: #42d00b;
}
.date-red {
background: #ff4425;
}
.avatar-portrait {
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align: top;
}
.device-info {
color: #c6def9;
display: flex;
justify-content: flex-start;
background: #1f5ca3;
padding: 10px;
}
.user-name {
background: #164b8e;
text-align: center;
margin-top: 10px;
}
</style>
\ No newline at end of file
src/router/index.js
View file @ 94ef9805
......@@ -8,6 +8,7 @@ import Supervisory from "@/components/supervisory/Index"
import Tower from "@/components/tower/Index"
import Noise from "@/components/noise/Index"
import Safecap from "@/components/safecap/Index"
import Management from "@/components/management/Index"
......@@ -25,6 +26,7 @@ const router = new VueRouter({
{ path: 'tower', component: Tower },
{ path: 'noise', component: Noise },
{ path: 'safecap', component: Safecap },
{ path: 'management', component: Management },
]
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment