Skip to content

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

styleFix

parent 9679f44d
Show whitespace changes
Inline Side-by-side
Showing with 229 additions and 190 deletions
.env.development
View file @ e679940b
NODE_ENV = "development" NODE_ENV = "development"
Mock: true Mock: true
VUE_APP_API_URL = "http://www.ythplat.com:8002/" VUE_APP_API_URL = "http://qjwl.ythplan.com/"
dist.zip 0 → 100644
View file @ e679940b
File added
src/api/index.js
View file @ e679940b
...@@ -112,6 +112,13 @@ export function getVideoLiveAddressUrl(cameraId) { ...@@ -112,6 +112,13 @@ export function getVideoLiveAddressUrl(cameraId) {
method: 'get', method: 'get',
}) })
} }
export function getAllVideoUrl(params) {
return request({
url: `/pweb/s/camera/liveurls`,
method: 'get',
params
})
}
......
src/components/Index.vue
View file @ e679940b
...@@ -2,9 +2,20 @@ ...@@ -2,9 +2,20 @@
<div :style="{ zoom: zoom }"> <div :style="{ zoom: zoom }">
<div class="nav-header"> <div class="nav-header">
<div class="left-nav"> <div class="left-nav">
<span style="font-size: 14px; cursor: pointer" @click="jumpBack" <div class="weather">
>工程项目后台管理系统</span <img
> class="weather-img"
:src="screenDetail.weather_code_url"
alt=""
/>
<div class="weather-text">
<div class="temperature">
{{ screenDetail.temperature }}
<span style="font-size: 14px">℃</span>
</div>
<div class="condition">{{ screenDetail.weather_condition }}</div>
</div>
</div>
<router-link <router-link
v-for="(router, index) in leftNav" v-for="(router, index) in leftNav"
:key="index" :key="index"
...@@ -254,4 +265,21 @@ a { ...@@ -254,4 +265,21 @@ a {
white-space: nowrap; white-space: nowrap;
padding: 0 30px; padding: 0 30px;
} }
.weather {
display: inline-block;
line-height: 24px;
vertical-align: top;
margin-right: 20px;
margin-top: 8px;
.weather-text {
color: #fff;
font-size: 18px;
display: inline-block;
}
.weather-img {
vertical-align: top;
width: 50px;
margin-right: 6px;
}
}
</style> </style>
\ No newline at end of file
src/components/construction/Index.vue
View file @ e679940b
...@@ -4,13 +4,8 @@ ...@@ -4,13 +4,8 @@
<Title text="项目概况"></Title> <Title text="项目概况"></Title>
<ShadowContainer> <ShadowContainer>
<div class="construction-status"> <div class="construction-status">
<div class="divider">
<div class="divider-line"></div>
<div class="divider-text">·工程名称·</div>
<div class="divider-line"></div>
</div>
<div class="construction-name">{{ screenDetail.project_name }}</div>
<div class="construction-details"> <div class="construction-details">
<img src="@/assets/icon-short-bg.png" alt="" />
<div class="construction-detail"> <div class="construction-detail">
<div class="data">{{ screenDetail.project_cost }}</div> <div class="data">{{ screenDetail.project_cost }}</div>
<div class="text">工程造价(万元)</div> <div class="text">工程造价(万元)</div>
...@@ -38,74 +33,71 @@ ...@@ -38,74 +33,71 @@
</div> </div>
<div class="divider"> <div class="divider">
<div class="divider-line"></div> <div class="divider-line"></div>
<div class="divider-text">·建造单位·</div> <div class="divider-text">·参建单位·</div>
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="unit-scroll">
<div class="unit"> <div class="table-scroll">
<div> <table>
<div class="dot"></div> <tr>
<span class="unit-text">建设单位：</span> <td width="60">
</div> <div class="table-label">建设单位</div>
<div> </td>
<td>
<div <div
v-for="(unit, index) in screenDetail.unitList.jsList" v-for="(unit, index) in screenDetail.unitList.jsList"
:key="index" :key="index"
style="margin-bottom: 12px" class="table-unit"
> >
<div class="unit-name">{{ unit.company_name }}</div> <div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact"> <div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }}) {{ unit.contact_person }}({{ unit.contact_mobile }})
</div> </div>
</div> </div>
</div> </td>
</div> </tr>
<div class="unit"> <tr>
<div> <td>
<div class="dot"></div> <div class="table-label">施工单位</div>
<span class="unit-text">施工单位：</span> </td>
</div> <td>
<div>
<div <div
v-for="(unit, index) in screenDetail.unitList.sgList" v-for="(unit, index) in screenDetail.unitList.sgList"
:key="index" :key="index"
style="margin-bottom: 12px" class="table-unit"
> >
<div class="unit-name">{{ unit.company_name }}</div> <div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact"> <div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }}) {{ unit.contact_person }}({{ unit.contact_mobile }})
</div> </div>
</div> </div>
</div> </td>
</div> </tr>
<div class="unit"> <tr>
<div> <td><div class="table-label">监理单位</div></td>
<div class="dot"></div> <td>
<span class="unit-text">监理单位：</span>
</div>
<div>
<div <div
v-for="(unit, index) in screenDetail.unitList.jlList" v-for="(unit, index) in screenDetail.unitList.jlList"
:key="index" :key="index"
style="margin-bottom: 12px" class="table-unit"
> >
<div class="unit-name">{{ unit.company_name }}</div> <div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact"> <div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }}) {{ unit.contact_person }}({{ unit.contact_mobile }})
</div> </div>
</div> </div>
</div> </td>
</div> </tr>
<div class="unit"> <tr>
<div> <td>
<div class="dot"></div> <div class="table-label">设计单位</div>
<span class="unit-text">设计单位：</span> </td>
</div> <td>
<div> <div>
<div <div
v-for="(unit, index) in screenDetail.unitList.sjList" v-for="(unit, index) in screenDetail.unitList.sjList"
:key="index" :key="index"
style="margin-bottom: 12px" class="table-unit"
> >
<div class="unit-name">{{ unit.company_name }}</div> <div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact"> <div class="unit-contact">
...@@ -113,15 +105,35 @@ ...@@ -113,15 +105,35 @@
</div> </div>
</div> </div>
</div> </div>
</div> </td>
</tr>
<tr>
<td>
<div class="table-label">勘察单位</div>
</td>
<td></td>
</tr>
</table>
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
<Title text="项目人员"></Title> <Title text="今日考勤率"></Title>
<ShadowContainer> <ShadowContainer>
<div class="chart-container"> <div class="check-in">
<img class="custom-chart" src="@/assets/chart.png" /> <div class="checks">
<div ref="securityChart" id="security-chart"></div> <div class="title">管理人员/考勤率</div>
<div class="count" style="color: rgba(254, 186, 1, 1)">
98.2 <span>%</span>
</div>
<img src="@/assets/icon-person.png" alt="" />
</div>
<div class="checks">
<div class="title">普通工人/考勤率</div>
<div class="count" style="color: rgba(24, 215, 185, 1)">
98.2 <span>%</span>
</div>
<img src="@/assets/icon-person.png" alt="" />
</div>
</div> </div>
</ShadowContainer> </ShadowContainer>
</div> </div>
...@@ -147,7 +159,7 @@ ...@@ -147,7 +159,7 @@
<ShadowContainer> <ShadowContainer>
<div class="progress-contains"> <div class="progress-contains">
<div class="progress"> <div class="progress">
<img src="@/assets/progress.png" alt="" /> <img src="@/assets/icon-long-bg.png" alt="" />
<div class="progress-container"> <div class="progress-container">
<div class="progress-day"> <div class="progress-day">
<div class="progress-count">{{ progressDetail.zgq_num }}</div> <div class="progress-count">{{ progressDetail.zgq_num }}</div>
...@@ -159,6 +171,12 @@ ...@@ -159,6 +171,12 @@
</div> </div>
<div class="progress-text">已施工(天)</div> <div class="progress-text">已施工(天)</div>
</div> </div>
<div class="progress-day">
<div class="progress-count" style="color: #ff5151">
{{ progressDetail.sg_num }}
</div>
<div class="progress-text">距离当前工期结束(天)</div>
</div>
</div> </div>
</div> </div>
<div class="steps"> <div class="steps">
...@@ -166,6 +184,7 @@ ...@@ -166,6 +184,7 @@
<el-step <el-step
v-for="(progress, index) in progressDetail.progress_data" v-for="(progress, index) in progressDetail.progress_data"
:key="index" :key="index"
status="error"
> >
<template #title> <template #title>
<div class="step-title"> <div class="step-title">
...@@ -217,7 +236,6 @@ ...@@ -217,7 +236,6 @@
<script> <script>
import { import {
getBaseData, getBaseData,
getPersonData,
getDeviceStatus, getDeviceStatus,
getProgressDetail, getProgressDetail,
getAIWarningData, getAIWarningData,
...@@ -322,102 +340,6 @@ export default { ...@@ -322,102 +340,6 @@ export default {
}; };
}, },
methods: { methods: {
renderPersonChart() {
const chartData = [...this.personData];
const chart = this.$echarts.init(this.$refs.securityChart);
let total = 0;
chartData.map((item) => {
total += item.value;
});
const option = {
title: {
x: "49%", //X坐标
y: "30%",
text: total,
subtext: "项目人员",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
bottom: "5%",
left: "center",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 16,
verticalAlign: "top",
align: "left",
padding: [22, 0, 0, 5],
},
b: {
fontSize: 18,
align: "left",
lineHeight: 25,
padding: [0, 0, 0, 7],
},
},
},
formatter: (name) => {
let data = chartData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}}`];
return arr.join("\n");
},
},
series: [
{
type: "pie",
radius: ["58%", "70%"],
center: ["50%", "40%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
borderWidth: 4,
},
label: {
show: false,
position: "center",
},
data: chartData,
},
],
};
chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("security-chart"));
});
},
renderQualityChart() { renderQualityChart() {
let total = 0; let total = 0;
this.aiwarningData.map((item) => { this.aiwarningData.map((item) => {
...@@ -519,12 +441,7 @@ export default { ...@@ -519,12 +441,7 @@ export default {
this.screenDetail = res.data; this.screenDetail = res.data;
} }
}); });
getPersonData().then((res) => {
if (res.status == 200) {
this.personData = res.data;
this.renderPersonChart();
}
});
getDeviceStatus().then((res) => { getDeviceStatus().then((res) => {
if (res.status == 200) { if (res.status == 200) {
this.deviceStatus = res.data; this.deviceStatus = res.data;
...@@ -593,6 +510,16 @@ export default { ...@@ -593,6 +510,16 @@ export default {
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
margin-bottom: 28px; margin-bottom: 28px;
position: relative;
padding-top: 20px;
img {
position: absolute;
width: 100%;
vertical-align: top;
left: 0;
top: 0;
z-index: -1;
}
.construction-detail { .construction-detail {
width: calc(100% / 3); width: calc(100% / 3);
} }
...@@ -635,6 +562,16 @@ export default { ...@@ -635,6 +562,16 @@ export default {
vertical-align: top; vertical-align: top;
transform: translateY(2px); transform: translateY(2px);
} }
}
table {
width: 100%;
border: 1px solid #097ca7;
border-collapse: collapse;
th,
td {
border: 1px solid #097ca7;
padding: 20px;
}
.unit-text { .unit-text {
font-size: 14px; font-size: 14px;
...@@ -714,7 +651,7 @@ export default { ...@@ -714,7 +651,7 @@ export default {
} }
.progress { .progress {
position: relative; position: relative;
width: 280px; width: 100%;
img { img {
width: 100%; width: 100%;
} }
...@@ -817,4 +754,46 @@ export default { ...@@ -817,4 +754,46 @@ export default {
.construction-status { .construction-status {
min-height: 380px; min-height: 380px;
} }
.table-label {
font-size: 14px;
color: #22c3ed;
}
.table-unit {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
.table-scroll {
max-height: 360px;
overflow-y: auto;
}
.check-in {
width: 100%;
display: flex;
justify-content: space-between;
.checks {
width: 50%;
text-align: center;
&:first-child {
border-right: 1px solid rgba(9, 124, 167, 0.5);
}
img {
width: 80%;
margin: 0 auto;
vertical-align: top;
}
.title {
font-size: 12px;
color: rgba(225, 239, 255, 0.7);
margin-bottom: 20px;
}
.count {
font-size: 40px;
span {
font-size: 14px;
}
}
}
}
</style> </style>
\ No newline at end of file
src/components/supervisory/Index.vue
View file @ e679940b
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
>九分屏</el-button >九分屏</el-button
> >
<el-button @click="closeAll">全部关闭</el-button> <el-button @click="closeAll">全部关闭</el-button>
<el-button @click="viewAll">全部预览</el-button>
</div> </div>
<div class="video-area"> <div class="video-area">
<div <div
...@@ -73,7 +74,11 @@ ...@@ -73,7 +74,11 @@
</div> </div>
</template> </template>
<script> <script>
import { getVideoTreeData, getVideoLiveAddressUrl } from "@/api/index"; import {
getVideoTreeData,
getVideoLiveAddressUrl,
getAllVideoUrl,
} from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css"); require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js"; import videojs from "video.js";
import "videojs-contrib-hls"; import "videojs-contrib-hls";
...@@ -240,6 +245,25 @@ export default { ...@@ -240,6 +245,25 @@ export default {
this.cameraList[index].id = ""; this.cameraList[index].id = "";
this.$forceUpdate(); this.$forceUpdate();
}, },
viewAll() {
this.cameraList.map((item) => {
item.player.dispose();
item.player = null;
item.id = "";
item.live_address_url = "";
});
const allVideoIdArray = this.treeData
.map((item) => {
return item.children.map((child) => {
return child.id;
});
})
.flat();
getAllVideoUrl({ ids: allVideoIdArray.join(",") }).then((res) => {
console.log(res);
});
},
}, },
watch: { watch: {
filterText(val) { filterText(val) {
......
src/components/tower/deviceDialog.vue
View file @ e679940b
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
title="设备详情" title="设备详情"
append-to-body append-to-body
@opened="openedEvents" @opened="openedEvents"
width="1100px"
> >
<div> <div>
<div class="title-label"> <div class="title-label">
......
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