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"
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) {
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 @@
<div :style="{ zoom: zoom }">
<div class="nav-header">
<div class="left-nav">
<span style="font-size: 14px; cursor: pointer" @click="jumpBack"
>工程项目后台管理系统</span
>
<div class="weather">
<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
v-for="(router, index) in leftNav"
:key="index"
......@@ -254,4 +265,21 @@ a {
white-space: nowrap;
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>
\ No newline at end of file
src/components/construction/Index.vue
View file @ e679940b
......@@ -4,13 +4,8 @@
<Title text="项目概况"></Title>
<ShadowContainer>
<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">
<img src="@/assets/icon-short-bg.png" alt="" />
<div class="construction-detail">
<div class="data">{{ screenDetail.project_cost }}</div>
<div class="text">工程造价(万元)</div>
......@@ -38,74 +33,71 @@
</div>
<div class="divider">
<div class="divider-line"></div>
<div class="divider-text">·建造单位·</div>
<div class="divider-text">·参建单位·</div>
<div class="divider-line"></div>
</div>
<div class="unit-scroll">
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">建设单位：</span>
</div>
<div>
<div class="table-scroll">
<table>
<tr>
<td width="60">
<div class="table-label">建设单位</div>
</td>
<td>
<div
v-for="(unit, index) in screenDetail.unitList.jsList"
:key="index"
style="margin-bottom: 12px"
class="table-unit"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">施工单位：</span>
</div>
<div>
</td>
</tr>
<tr>
<td>
<div class="table-label">施工单位</div>
</td>
<td>
<div
v-for="(unit, index) in screenDetail.unitList.sgList"
:key="index"
style="margin-bottom: 12px"
class="table-unit"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">监理单位：</span>
</div>
<div>
</td>
</tr>
<tr>
<td><div class="table-label">监理单位</div></td>
<td>
<div
v-for="(unit, index) in screenDetail.unitList.jlList"
:key="index"
style="margin-bottom: 12px"
class="table-unit"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
{{ unit.contact_person }}({{ unit.contact_mobile }})
</div>
</div>
</div>
</div>
<div class="unit">
<div>
<div class="dot"></div>
<span class="unit-text">设计单位：</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="table-label">设计单位</div>
</td>
<td>
<div>
<div
v-for="(unit, index) in screenDetail.unitList.sjList"
:key="index"
style="margin-bottom: 12px"
class="table-unit"
>
<div class="unit-name">{{ unit.company_name }}</div>
<div class="unit-contact">
......@@ -113,15 +105,35 @@
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="table-label">勘察单位</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</ShadowContainer>
<Title text="项目人员"></Title>
<Title text="今日考勤率"></Title>
<ShadowContainer>
<div class="chart-container">
<img class="custom-chart" src="@/assets/chart.png" />
<div ref="securityChart" id="security-chart"></div>
<div class="check-in">
<div class="checks">
<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>
</ShadowContainer>
</div>
......@@ -147,7 +159,7 @@
<ShadowContainer>
<div class="progress-contains">
<div class="progress">
<img src="@/assets/progress.png" alt="" />
<img src="@/assets/icon-long-bg.png" alt="" />
<div class="progress-container">
<div class="progress-day">
<div class="progress-count">{{ progressDetail.zgq_num }}</div>
......@@ -159,6 +171,12 @@
</div>
<div class="progress-text">已施工(天)</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 class="steps">
......@@ -166,6 +184,7 @@
<el-step
v-for="(progress, index) in progressDetail.progress_data"
:key="index"
status="error"
>
<template #title>
<div class="step-title">
......@@ -217,7 +236,6 @@
<script>
import {
getBaseData,
getPersonData,
getDeviceStatus,
getProgressDetail,
getAIWarningData,
......@@ -322,102 +340,6 @@ export default {
};
},
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() {
let total = 0;
this.aiwarningData.map((item) => {
......@@ -519,12 +441,7 @@ export default {
this.screenDetail = res.data;
}
});
getPersonData().then((res) => {
if (res.status == 200) {
this.personData = res.data;
this.renderPersonChart();
}
});
getDeviceStatus().then((res) => {
if (res.status == 200) {
this.deviceStatus = res.data;
......@@ -593,6 +510,16 @@ export default {
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;
}
.construction-detail {
width: calc(100% / 3);
}
......@@ -635,6 +562,16 @@ export default {
vertical-align: top;
transform: translateY(2px);
}
}
table {
width: 100%;
border: 1px solid #097ca7;
border-collapse: collapse;
th,
td {
border: 1px solid #097ca7;
padding: 20px;
}
.unit-text {
font-size: 14px;
......@@ -714,7 +651,7 @@ export default {
}
.progress {
position: relative;
width: 280px;
width: 100%;
img {
width: 100%;
}
......@@ -817,4 +754,46 @@ export default {
.construction-status {
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>
\ No newline at end of file
src/components/supervisory/Index.vue
View file @ e679940b
......@@ -43,6 +43,7 @@
>九分屏</el-button
>
<el-button @click="closeAll">全部关闭</el-button>
<el-button @click="viewAll">全部预览</el-button>
</div>
<div class="video-area">
<div
......@@ -73,7 +74,11 @@
</div>
</template>
<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");
import videojs from "video.js";
import "videojs-contrib-hls";
......@@ -240,6 +245,25 @@ export default {
this.cameraList[index].id = "";
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: {
filterText(val) {
......
src/components/tower/deviceDialog.vue
View file @ e679940b
......@@ -4,6 +4,7 @@
title="设备详情"
append-to-body
@opened="openedEvents"
width="1100px"
>
<div>
<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