Skip to content

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

styleFix

parent e5dc7d2e
Hide whitespace changes
Inline Side-by-side
Showing with 1201 additions and 645 deletions
dist.zip
View file @ f76910a0
No preview for this file type
src/assets/nodata.png
View replaced file @ e5dc7d2e View file @ f76910a0
src/assets/nodata.png

84.8 KB | W: | H:

src/assets/nodata.png

25.3 KB | W: | H:

src/assets/nodata.png
src/assets/nodata.png
src/assets/nodata.png
src/assets/nodata.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Index.vue
View file @ f76910a0
......@@ -179,7 +179,7 @@ export default {
// var documentHeight =
// document.getElementsByTagName("html")[0].offsetHeight;
// console.log(windowHeight - documentHeight);
var deviceHeight = window.screen.height;
var deviceHeight = window.innerHeight;
var scale = deviceHeight / 1080;
document.body.style.zoom = scale;
document.body.style.height = (1 / scale) * 100 + "vh";
......@@ -369,6 +369,7 @@ a,
line-height: 24px;
vertical-align: top;
margin-top: 8px;
margin-right: 50px;
.weather-text {
color: #fff;
font-size: 18px;
......@@ -391,7 +392,7 @@ a,
background: none;
a {
margin-right: 0;
width: 80px;
width: 86px;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
......
src/components/construction/Index.vue
View file @ f76910a0
......@@ -35,7 +35,12 @@
<div class="divider-text">·参建单位·</div>
<div class="divider-line"></div>
</div>
<div class="table-scroll" id="table-scroll">
<div
class="table-scroll"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<table>
<tr>
<td width="60">
......@@ -182,43 +187,45 @@
<Title text="工程进度" type="long"></Title>
<ShadowContainer class="short-container">
<div class="progress-contains">
<div class="progress">
<div class="progress-container">
<div class="progress-day">
<div class="progress-count">{{ progressDetail.zgq_num }}</div>
<div class="progress-text">总工期(天)</div>
</div>
<div class="progress-day">
<div class="progress-count" style="color: #ffaf51">
{{ progressDetail.sg_num }}
<div style="width: 100%">
<div class="progress">
<div class="progress-container">
<div class="progress-day">
<div class="progress-count">{{ progressDetail.zgq_num }}</div>
<div class="progress-text">总工期(天)</div>
</div>
<div class="progress-text">已施工(天)</div>
</div>
<div class="progress-day">
<div class="progress-count" style="color: #ff5151">
{{ progressDetail.current_progress_over_day }}
<div class="progress-day">
<div class="progress-count" style="color: #ffaf51">
{{ progressDetail.sg_num }}
</div>
<div class="progress-text">已施工(天)</div>
</div>
<div class="progress-day">
<div class="progress-count" style="color: #ff5151">
{{ progressDetail.current_progress_over_day }}
</div>
<div class="progress-text">距离当前工期结束(天)</div>
</div>
<div class="progress-text">距离当前工期结束(天)</div>
</div>
</div>
</div>
<div id="step-scroll">
<el-steps :active="progressDetail.step" finish-status="success">
<el-step
v-for="(progress, index) in progressDetail.progress_data"
:key="index"
>
<template #title>
<div class="step-title">
{{ progress.over_date }}
<div class="step-status">{{ progress.status_text }}</div>
</div>
</template>
<template #description>
<div class="step-description">{{ progress.name }}</div>
</template>
</el-step>
</el-steps>
<div id="step-scroll">
<el-steps :active="progressDetail.step" finish-status="success">
<el-step
v-for="(progress, index) in progressDetail.progress_data"
:key="index"
>
<template #title>
<div class="step-title">
{{ progress.over_date }}
<div class="step-status">{{ progress.status_text }}</div>
</div>
</template>
<template #description>
<div class="step-description">{{ progress.name }}</div>
</template>
</el-step>
</el-steps>
</div>
</div>
</div>
</ShadowContainer>
......@@ -315,6 +322,7 @@ export default {
},
aiwarningData: [],
AIwarningTotal: 0,
interval1: null,
};
},
methods: {
......@@ -412,11 +420,11 @@ export default {
mouseLeaveEvent() {},
mouseOverEvent() {},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
// element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -428,7 +436,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
stepLength *= -1; // 转换方向
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -437,7 +445,17 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
this.getBaseData();
},
......@@ -634,7 +652,6 @@ table {
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.progress {
......
src/components/earlywarning/Index.vue
View file @ f76910a0
......@@ -47,7 +47,12 @@
<div class="today-warning">
<Title type="long" text="今日预警"></Title>
<ShadowContainer class="long-container">
<div class="warp" id="warning-list">
<div
class="warp"
id="warning-list"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="person-check"
v-for="(warns, index) in warningList"
......@@ -88,9 +93,87 @@
<div class="right-container">
<Title type="long" text="整改统计"></Title>
<ShadowContainer class="short-container">
<div class="total-chart">
<div ref="todayChart" id="today-chart"></div>
<div ref="historyChart" id="history-chart"></div>
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div
style="
display: flex;
width: calc(50% - 2px);
justify-content: center;
border-right: 4px solid #114e70;
"
>
<div class="chart-container">
<div ref="todayChart" id="today-chart"></div>
<div class="title">
<div class="main-title">
{{ todayTotal }}
</div>
<div class="sub-title">今日整改</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in todayPieChartData"
:key="index"
:style="{
color: legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '未处理' ? '#FFAF51' : '#0CDEE3',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
<div
style="
display: flex;
width: calc(50% - 2px);
justify-content: center;
"
>
<div class="chart-container">
<div ref="historyChart" id="history-chart"></div>
<div class="title">
<div class="main-title">
{{ historyTotal }}
</div>
<div class="sub-title">历史整改</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in historyChartData"
:key="index"
:style="{
color: legend.name == '未处理' ? '#FCFF11' : '#2980FF',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '未处理' ? '#FCFF11' : '#2980FF',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer>
<Title type="long" text="本月报警趋势"></Title>
......@@ -121,6 +204,8 @@ export default {
todayPieChartData: [],
historyChartData: [],
intervalTimer: null,
todayTotal: 0,
historyTotal: 0,
};
},
methods: {
......@@ -223,68 +308,15 @@ export default {
chartData.map((item) => {
total += item.value;
});
this.todayTotal = total;
const option = {
title: {
x: "27%", //X坐标
y: "34%",
text: total,
subtext: "今日整改",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
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(" ");
},
},
series: [
{
type: "pie",
radius: ["60%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -323,69 +355,17 @@ export default {
chartData.map((item) => {
total += item.value;
});
this.historyTotal = total;
const chart = this.$echarts.init(this.$refs.historyChart);
const option = {
title: {
x: "27%", //X坐标
y: "34%",
text: total,
subtext: "历史整改",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
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(" ");
},
},
series: [
{
type: "pie",
radius: ["60%", "70%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -466,11 +446,11 @@ export default {
});
},
autoScroll(stepLength, speed, delay, element) {
let interval;
var that = this;
//let step = 1
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -482,7 +462,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -491,6 +471,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("warning-list");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
......@@ -623,16 +612,15 @@ export default {
width: 100%;
height: 100%;
}
.total-chart {
#today-chart,
#history-chart {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
#today-chart,
#history-chart {
width: calc(50% - 20px);
height: 100%;
}
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.no-data {
position: absolute;
......@@ -654,4 +642,48 @@ export default {
.short-container {
height: calc(50% - 106px);
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
white-space: nowrap;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style>
\ No newline at end of file
src/components/elevator/Index.vue
View file @ f76910a0
......@@ -84,6 +84,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -280,6 +282,7 @@ export default {
currentElevatorTower: {},
leftBottom: 0,
rightBottom: 0,
interval1: null,
};
},
methods: {
......@@ -307,11 +310,9 @@ export default {
}
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -323,7 +324,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -332,6 +333,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
getCurrentElevatorStatus(tower) {
this.leftBottom = 0;
this.rightBottom = 0;
......@@ -523,8 +533,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-40px);
margin-bottom: -40px;
transform: translateY(-60px);
margin-bottom: -60px;
img {
width: 80%;
margin: 0 auto;
......
src/components/fallprotection/Index.vue
View file @ f76910a0
......@@ -125,6 +125,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -195,6 +197,7 @@ export default {
buildingWindowVisible: false,
windowData: {},
page: 1,
interval1: null,
};
},
methods: {
......@@ -369,11 +372,11 @@ export default {
}
},
autoScroll(stepLength, speed, delay, element) {
let interval;
var that = this;
//let step = 1
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -385,7 +388,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -394,6 +397,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
getBaseInfo().then((res) => {
......@@ -578,8 +590,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-40px);
margin-bottom: -40px;
transform: translateY(-60px);
margin-bottom: -60px;
img {
width: 80%;
margin: 0 auto;
......@@ -610,6 +622,7 @@ export default {
}
.warning-table-run-time {
width: 40%;
white-space: pre-wrap;
}
.warning-table-device,
.warning-table-info {
......@@ -652,6 +665,7 @@ export default {
width: 50%;
}
.building-description {
margin-bottom: 20px;
line-height: 32px;
font-size: 18px;
color: #c6def9;
......
src/components/noise/Index.vue
View file @ f76910a0
......@@ -17,11 +17,86 @@
</ShadowContainer>
<Title text="设备总览"></Title>
<ShadowContainer class="short-container">
<div ref="deviceChart" id="device-chart"></div>
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="deviceChart" id="device-chart"></div>
<div class="title">
<div class="main-title">
{{ deviceTotal }}
</div>
<div class="sub-title">总数</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in pieChartData"
:key="index"
:style="{
color: legend.name == '在线总数' ? '#18D7B9' : '#FEBA01',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '在线总数' ? '#18D7B9' : '#FEBA01',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer>
<Title text="近30日噪音"></Title>
<ShadowContainer class="short-container">
<div ref="noiseChart" id="noise-chart"></div>
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="noiseChart" id="noise-chart"></div>
<div class="title">
<div class="sub-title">近30日</div>
<div class="sub-title">噪音情况</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in noiseData"
:key="index"
:style="{
color: legend.name == '达标' ? '#18D7B9' : '#FF754C',
}"
>
<span
class="rect"
:style="{
background: legend.name == '达标' ? '#18D7B9' : '#FF754C',
}"
></span>
{{ legend.name }} {{ legend.value }}天
</div>
</div>
</div>
</div>
</ShadowContainer>
</div>
<div class="mid-area">
......@@ -37,40 +112,71 @@
<div class="value" style="color: #ff6151">
{{ currentMonitorStatis.temperature }}
</div>
<img class="smallcontainer" src="@/assets/noise/temp.png" alt="" />
</div>
<div class="humidity">
<div class="text">湿度/℃</div>
<div class="value" style="color: #22c3ed">
{{ currentMonitorStatis.humidity }}
</div>
<img
class="smallcontainer"
src="@/assets/noise/humidity.png"
alt=""
/>
</div>
<div class="windangle">
<div class="text">风向/°</div>
<div class="value" style="color: #cc43b7">
{{ currentMonitorStatis.wind_direction }}
</div>
<img
class="smallcontainer"
src="@/assets/noise/windangle.png"
alt=""
/>
</div>
<div class="windspeed">
<div class="text">风速/m/s</div>
<div class="value" style="color: #ffc74c">
{{ currentMonitorStatis.wind_speed }}
</div>
<img
class="smallcontainer"
src="@/assets/noise/windspeed.png"
alt=""
/>
</div>
<div class="mid-status">
<div>
噪音 <span class="value">{{ currentMonitorStatis.noise }}</span>
<span class="unit">dB</span>
</div>
<div>
PM2.5 <span class="value">{{ currentMonitorStatis.pm25 }}</span
><span class="unit">ug/m³</span>
</div>
<div>
PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
><span class="unit">ug/m³</span>
<div style="text-align: center; height: 100%; position: relative">
<img
src="@/assets/noise/top.png"
style="height: 20%; vertical-align: top"
alt=""
/>
<div class="mid-status">
<div class="mid-status-container">
<div>
噪音
<span class="value">{{ currentMonitorStatis.noise }}</span>
<span class="unit">dB</span>
</div>
<div>
PM2.5
<span class="value">{{ currentMonitorStatis.pm25 }}</span
><span class="unit">ug/m³</span>
</div>
<div>
PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
><span class="unit">ug/m³</span>
</div>
</div>
</div>
<img
src="@/assets/noise/bottom.png"
style="height: 40%; vertical-align: top"
alt=""
/>
</div>
<img src="@/assets/noise/stats-bg.png" alt="" />
</div>
<div class="filters">
<div
......@@ -131,6 +237,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -191,6 +299,8 @@ export default {
lineChart: null,
page: 1,
loading: false,
deviceTotal: 0,
interval1: null,
};
},
computed: {},
......@@ -223,68 +333,15 @@ export default {
pieData.map((item) => {
total += item.value;
});
this.deviceTotal = total;
const option = {
title: {
x: "26%", //X坐标
y: "30%",
text: total,
subtext: "总数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
left: "60%",
top: "30%",
orient: "vertical",
itemGap: 20,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = pieData;
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(" ");
},
},
series: [
{
type: "pie",
radius: ["60%", "70%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -321,61 +378,14 @@ export default {
const chartData = [...this.noiseData];
const chart = this.$echarts.init(this.$refs.noiseChart);
const option = {
title: {
top: "center", //X坐标
left: "27%",
text: "近30日\n噪音情况",
textAlign: "center",
textStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
lineHeight: 24,
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
left: "60%",
top: "30%",
orient: "vertical",
itemGap: 20,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
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(" ");
},
},
series: [
{
type: "pie",
radius: ["60%", "70%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -553,11 +563,9 @@ export default {
}
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -569,7 +577,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -578,6 +586,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
this.getNoiseData();
......@@ -592,27 +609,23 @@ export default {
padding-bottom: 0;
height: calc(100% - 24px);
.side-area {
width: 360px;
width: 25%;
min-width: 400px;
}
.mid-area {
width: calc(100% - 744px);
width: 50%;
margin: 0 12px;
}
}
.chart-container {
position: relative;
.custom-chart {
position: absolute;
width: 30%;
top: 50%;
transform: translateY(-50%);
left: 13%;
}
}
#device-chart,
#noise-chart {
width: 100%;
height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.i-type {
display: flex;
......@@ -861,11 +874,6 @@ export default {
margin: 0 auto;
max-width: 840px;
height: 60%;
img {
width: 100%;
height: 100%;
vertical-align: top;
}
.text {
color: #ffffff;
font-size: 16px;
......@@ -878,36 +886,54 @@ export default {
.temp {
position: absolute;
left: 11%;
top: 23%;
top: 20%;
transform: translateX(-50%);
}
.humidity {
position: absolute;
left: 11%;
bottom: 34%;
bottom: 20%;
transform: translateX(-50%);
}
.windangle {
position: absolute;
right: 11%;
top: 23%;
top: 20%;
transform: translateX(50%);
}
.windspeed {
position: absolute;
right: 11%;
bottom: 34%;
bottom: 20%;
transform: translateX(50%);
}
.mid-status {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 49.5%;
line-height: 56px;
position: relative;
height: calc(40% - 28px);
font-size: 20px;
text-align: center;
color: #c6def9;
border: 14px solid #888;
width: 50%;
margin: 0 auto;
background: #081f3b;
.mid-status-container {
position: absolute;
width: 95%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 56px;
white-space: nowrap;
& > div {
border-bottom: 2px solid #114e70;
margin: 0 auto;
&:last-child {
border-bottom: none;
}
}
}
.unit {
font-size: 14px;
margin-left: 6px;
......@@ -916,6 +942,9 @@ export default {
font-size: 24px;
margin-left: 12px;
}
img {
vertical-align: top;
}
}
}
.filters {
......@@ -950,4 +979,55 @@ export default {
.long-container {
height: calc(100% - 108px);
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 250px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 250px;
height: 250px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
.smallcontainer {
width: 100px !important;
height: inherit !important;
transform: translateY(-50%);
vertical-align: top;
}
</style>
\ No newline at end of file
src/components/projectcheck/Index.vue
View file @ f76910a0
......@@ -2,8 +2,64 @@
<div id="project-check">
<div class="side-area">
<Title text="本月检查统计"></Title>
<ShadowContainer class="long-container">
<div id="current-check-stats" ref="currentCheckStatsChart"></div>
<ShadowContainer class="short-container">
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div id="current-check-stats" ref="currentCheckStatsChart"></div>
<div class="title">
<div class="main-title">
{{ monthCheckTotal }}
</div>
<div class="sub-title">累计检查</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in currentMonthCheckData"
:key="index"
:style="{
color:
legend.name == '无问题'
? '#18D7B9'
: legend.name == '待整改'
? '#E39B36'
: legend.name == '复查中'
? '#5399F7'
: legend.name == '已整改'
? '#E25E80'
: '',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '无问题'
? '#18D7B9'
: legend.name == '待整改'
? '#E39B36'
: legend.name == '复查中'
? '#5399F7'
: legend.name == '已整改'
? '#E25E80'
: '',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer>
<Title text="检查事项隐患排行"></Title>
<ShadowContainer class="short-container">
......@@ -18,6 +74,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -56,8 +114,8 @@
</ShadowContainer>
</div>
<div class="right-area">
<Title text="月检测概况" type="long"></Title>
<ShadowContainer class="long-container">
<Title text="月检查概况" type="long"></Title>
<ShadowContainer class="short-container">
<div class="time-selector">
<i class="el-icon-arrow-left" @click="getPrevMonth"></i>
<span>{{ year }}年{{ month }}月</span>
......@@ -67,19 +125,200 @@
<div class="left-pie-charts">
<div class="chart-angle">
<div class="chart-title">项目自查</div>
<div id="project-check-chart" ref="projectCheck"></div>
<div
style="
display: flex;
height: calc(100% - 30px);
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
"
>
<div style="display: flex">
<div class="chart-small-container">
<div id="project-check-chart" ref="projectCheck"></div>
<div class="title">
<div class="main-title">
{{ projectTotal }}
</div>
<div class="sub-title">检查量</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in monthCheckData.project_data"
:key="index"
:style="{
color: legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '有隐患' ? '#FEBA01' : '#18D7B9',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</div>
<div class="chart-angle">
<div class="chart-title">企业检查</div>
<div id="enterprise-check" ref="enterpriseCheck"></div>
<div
style="
display: flex;
height: calc(100% - 30px);
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
"
>
<div style="display: flex">
<div class="chart-small-container">
<div id="enterprise-check" ref="enterpriseCheck"></div>
<div class="title">
<div class="main-title">
{{ enterpriseTotal }}
</div>
<div class="sub-title">检查量</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in monthCheckData.company_data"
:key="index"
:style="{
color: legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '有隐患' ? '#FC6E03' : '#18D7B9',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</div>
<div class="chart-angle">
<div class="chart-title">监督检测</div>
<div id="supervise-check" ref="superviseCheck"></div>
<div
style="
display: flex;
height: calc(100% - 30px);
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
"
>
<div style="display: flex">
<div class="chart-small-container">
<div id="supervise-check" ref="superviseCheck"></div>
<div class="title">
<div class="main-title">
{{ superviceTotal }}
</div>
<div class="sub-title">检查量</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in monthCheckData.supervise_data"
:key="index"
:style="{
color: legend.name == '有隐患' ? '#E86365' : '#18D7B9',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '有隐患' ? '#E86365' : '#18D7B9',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</div>
<div class="chart-angle">
<div class="chart-title">移动巡查</div>
<div id="move-check" ref="moveCheck"></div>
<div
style="
display: flex;
height: calc(100% - 30px);
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
"
>
<div style="display: flex">
<div class="chart-small-container">
<div id="move-check" ref="moveCheck"></div>
<div class="title">
<div class="main-title">
{{ moveTotal }}
</div>
<div class="sub-title">检查量</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in monthCheckData.move_data"
:key="index"
:style="{
color: legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '有隐患' ? '#CD4091' : '#18D7B9',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</div>
</div>
<div id="right-question-chart" ref="questionBarChart"></div>
......@@ -154,12 +393,22 @@ export default {
blackspotRanking: [],
currentMonthCheckData: [],
blackSpotPage: 1,
monthCheckData: {},
monthCheckData: {
project_data: [],
company_data: [],
supervise_data: [],
move_data: [],
},
recordList: [],
correctList: [],
correctPage: 1,
correctDialogVisible: false,
correctDetail: {},
monthCheckTotal: 0,
projectTotal: 0,
enterpriseTotal: 0,
superviceTotal: 0,
moveTotal: 0,
};
},
methods: {
......@@ -188,69 +437,16 @@ export default {
chartData.map((item) => {
total += item.value;
});
this.monthCheckTotal = total;
const option = {
title: {
x: "27%", //X坐标
y: "40%",
text: total,
subtext: "累计检查",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
lineHeight: 24,
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
top: "30%",
orient: "vertical",
itemGap: 20,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
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(" ");
},
},
series: [
{
type: "pie",
radius: ["45%", "55%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -328,6 +524,30 @@ export default {
this.month < 10 ? "0" + this.month : this.month
}`,
}).then((res) => {
let projectTotal = 0;
res.data.project_data.map((item) => {
projectTotal += item.value;
});
this.projectTotal = projectTotal;
let enterpriseTotal = 0;
res.data.company_data.map((item) => {
enterpriseTotal += item.value;
});
this.enterpriseTotal = enterpriseTotal;
let superviceTotal = 0;
res.data.supervise_data.map((item) => {
superviceTotal += item.value;
});
this.superviceTotal = superviceTotal;
let moveTotal = 0;
res.data.move_data.map((item) => {
moveTotal += item.value;
});
this.moveTotal = moveTotal;
this.monthCheckData = res.data;
this.renderSmallChart(
"project-check-chart",
......@@ -359,71 +579,19 @@ export default {
renderSmallChart(id, ref, data, pColor) {
const chartData = [...data];
const chart = this.$echarts.init(this.$refs[`${ref}`]);
let total = 0;
chartData.map((item) => {
total += item.value;
});
// let total = 0;
// chartData.map((item) => {
// total += item.value;
// });
const option = {
title: {
x: "26%", //X坐标
y: "30%",
text: total,
subtext: "检查量",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 18,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 13,
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "5%",
top: "28%",
orient: "vertical",
itemGap: 20,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 12,
align: "left",
},
b: {
fontSize: 14,
align: "left",
lineHeight: 25,
},
},
},
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(" ");
},
},
series: [
{
type: "pie",
radius: ["65%", "75%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -543,11 +711,10 @@ export default {
});
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -559,7 +726,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -568,6 +735,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
getCurrentMonthCheckStats().then((res) => {
......@@ -630,37 +806,12 @@ export default {
#enterprise-check,
#supervise-check,
#move-check {
width: 100%;
height: calc(100% - 30px);
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
}
}
.chart-container {
width: 100%;
height: 130px;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
margin-bottom: 12px;
position: relative;
div {
width: 100%;
height: 100%;
}
.custom-chart {
position: absolute;
width: 20%;
left: 18%;
transform: translateY(-50%);
top: 50%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
}
}
......@@ -785,11 +936,81 @@ export default {
#current-check-stats {
width: 100%;
height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.long-container {
height: calc(53% - 50px);
}
.short-container {
height: calc(32% - 50px);
height: calc(50% - 118px);
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 260px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
white-space: nowrap;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 260px;
height: 260px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
.chart-small-container {
position: relative;
width: 150px;
height: 150px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style>
\ No newline at end of file
src/components/realname/Index.vue
View file @ f76910a0
......@@ -85,7 +85,12 @@
<div class="mid-area">
<Title text="实时考勤"></Title>
<ShadowContainer class="long-container">
<div class="warp" id="warp-list">
<div
class="warp"
id="warp-list"
@mouseenter="clearScroll1"
@mouseleave="reScroll1"
>
<div
class="person-check"
v-for="(person, index) in checkList"
......@@ -123,7 +128,55 @@
</ShadowContainer>
<Title text="人员地域分布"></Title>
<ShadowContainer class="short-container">
<div ref="areaChart" id="area-chart"></div>
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="areaChart" id="area-chart"></div>
<div class="title">
<div class="main-title">
{{ areaTotal }}
</div>
<div class="sub-title">总人数</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in personAreaDetail"
:key="index"
:style="{
color:
legend.name == '绍兴市'
? '#FEBA01'
: legend.name == '省内市外'
? '#03D2FF'
: '#00FFDE',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '绍兴市'
? '#FEBA01'
: legend.name == '省内市外'
? '#03D2FF'
: '#00FFDE',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer>
</div>
<div class="rt-area" id="reset-area1">
......@@ -144,7 +197,12 @@
<div>
<Title text="工种分布"></Title>
<ShadowContainer>
<div class="work-types" id="table-scroll">
<div
class="work-types"
id="table-scroll"
@mouseenter="clearScroll2"
@mouseleave="reScroll2"
>
<div
v-for="(iType, index) in industryTypes"
:key="index"
......@@ -209,6 +267,9 @@ export default {
industryTypesTotal: 0,
date: "",
intervalTimer: null,
areaTotal: 0,
interval1: null,
interval2: null,
};
},
methods: {
......@@ -230,68 +291,16 @@ export default {
areaData.map((item) => {
total += item.value;
});
this.areaTotal = total;
const option = {
title: {
x: "26.5%", //X坐标
y: "36%",
text: total,
subtext: "总人数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "0%",
top: "20%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 12,
align: "left",
},
b: {
fontSize: 12,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = areaData;
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(" ");
},
},
series: [
{
type: "pie",
radius: ["50%", "60%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -302,7 +311,19 @@ export default {
position: "center",
},
data: areaData,
data: areaData.map((item) => {
return {
...item,
itemStyle: {
color:
item.name == "绍兴市"
? "#FEBA01"
: item.name == "省内市外"
? "#03D2FF"
: "#00FFDE",
},
};
}),
},
],
};
......@@ -646,6 +667,10 @@ export default {
this.checkList = [...res.data];
});
}, 60000);
this.$nextTick(() => {
const element = document.getElementById("warp-list");
this.autoScroll1(1, 50, 1500, element);
});
});
getPersonAreaStatus().then((res) => {
......@@ -675,16 +700,38 @@ export default {
);
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
this.autoScroll2(1, 50, 1500, element);
});
});
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
autoScroll1(stepLength, speed, delay, element) {
var that = this;
function start() {
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
var sTop = element.scrollTop;
element.scrollTop += stepLength;
if (
sTop === element.scrollTop ||
sTop == 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
autoScroll2(stepLength, speed, delay, element) {
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval2 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -696,7 +743,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval2);
setTimeout(start, delay);
}
}
......@@ -705,6 +752,24 @@ export default {
setTimeout(start, delay);
}
},
clearScroll1() {
clearInterval(this.interval1);
},
reScroll1() {
this.$nextTick(() => {
const element = document.getElementById("warp-list");
this.autoScroll1(1, 50, 1500, element);
});
},
clearScroll2() {
clearInterval(this.interval2);
},
reScroll2() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll2(1, 50, 1500, element);
});
},
},
mounted() {
this.getTime();
......@@ -832,6 +897,10 @@ export default {
#area-chart {
width: 100%;
height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.chart-title {
background: rgba(40, 137, 195, 0.2);
......@@ -936,4 +1005,49 @@ export default {
margin: 8px 0;
background: #114e70;
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style>
\ No newline at end of file
src/components/safecap/mapDialog.vue
View file @ f76910a0
......@@ -120,6 +120,33 @@ export default {
strokeColor: "#3366bb",
strokeWeight: 8,
});
var startcircleMarker = new this.AMap.CircleMarker({
center: paths[0],
radius: 8, //3D视图下，CircleMarker半径不要超过64px
strokeColor: "green",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "green",
zIndex: 10,
bubble: true,
cursor: "pointer",
clickable: true,
});
startcircleMarker.setMap(this.map);
var endcircleMarker = new this.AMap.CircleMarker({
center: paths[paths.length - 1],
radius: 8, //3D视图下，CircleMarker半径不要超过64px
strokeColor: "red",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "red",
zIndex: 10,
bubble: true,
cursor: "pointer",
clickable: true,
});
endcircleMarker.setMap(this.map);
});
},
},
......
src/components/tower/Index.vue
View file @ f76910a0
......@@ -3,7 +3,46 @@
<div class="side-area">
<Title text="设备总览"></Title>
<ShadowContainer class="short-container">
<div ref="deviceChart" id="device-chart"></div>
<div
style="
display: flex;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
"
>
<div style="display: flex">
<div class="chart-container">
<div ref="deviceChart" id="device-chart"></div>
<div class="title">
<div class="main-title">
{{ deviceTotal }}
</div>
<div class="sub-title">总数</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in pieChartData"
:key="index"
:style="{
color: legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
}"
>
<span
class="rect"
:style="{
background:
legend.name == '在线总数' ? '#2980FF' : '#AEE4F8',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</div>
</ShadowContainer>
<Title text="各塔吊24h力矩百分比统计"></Title>
<ShadowContainer class="short-container">
......@@ -17,7 +56,7 @@
<div id="mid-area">
<div class="cover-area"></div>
<div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description">
<div class="tower-description" @click="openDetailDialog">
<img
:src="
windowData.is_online == 1
......@@ -34,14 +73,6 @@
]"
>{{ windowData.is_online_text }}</span
>
<span @click="openDetailDialog" class="name" style="cursor: pointer"
>详情
<img
style="width: 20px; vertical-align: top; margin-top: 4px"
src="@/assets/tower/arrow.png"
alt=""
/>
</span>
</div>
<!-- <div class="recent-open">最近使用:{{ windowData.log_time }}</div> -->
</div>
......@@ -95,6 +126,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -174,6 +207,8 @@ export default {
deviceData: {},
markerArray: [],
page: 1,
deviceTotal: 0,
interval1: null,
};
},
methods: {
......@@ -184,68 +219,15 @@ export default {
pieData.map((item) => {
total += item.value;
});
this.deviceTotal = total;
const option = {
title: {
x: "27%", //X坐标
y: "30%",
text: total,
subtext: "总数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
top: "25%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = pieData;
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(" ");
},
},
series: [
{
type: "pie",
radius: ["60%", "70%"],
center: ["28%", "50%"],
radius: ["58%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -682,11 +664,9 @@ export default {
}
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -698,7 +678,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -707,6 +687,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
this.getTowerData();
......@@ -771,19 +760,13 @@ export default {
width: 100%;
height: 100%;
}
.chart-container {
position: relative;
.custom-chart {
position: absolute;
width: 25%;
top: 50%;
transform: translateY(-50%);
left: 15.5%;
}
}
#device-chart {
width: 100%;
height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.tower-name {
background: rgba(255, 175, 81, 0.1);
......@@ -968,6 +951,7 @@ export default {
}
.warning-table-run-time {
width: 40%;
white-space: pre-wrap;
}
.warning-table-device,
.warning-table-info {
......@@ -996,4 +980,48 @@ export default {
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
.chart-container {
position: relative;
width: 200px;
height: 200px;
.title {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
</style>
\ No newline at end of file
src/components/tower/deviceDialog.vue
View file @ f76910a0
......@@ -488,7 +488,7 @@ export default {
}
}
.base-info {
margin-bottom: 20px;
margin-bottom: 30px;
}
#video-container {
width: 100%;
......
src/components/tower/deviceDialog2.vue
View file @ f76910a0
......@@ -255,7 +255,7 @@ export default {
.base-info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
margin-bottom: 30px;
}
#video-container {
width: calc(40% - 20px);
......
src/components/unloadingplatform/Index.vue
View file @ f76910a0
......@@ -113,6 +113,8 @@
v-infinite-scroll="load"
:infinite-scroll-distance="1"
id="table-scroll"
@mouseenter="clearScroll"
@mouseleave="reScroll"
>
<div
class="warning-table-column"
......@@ -185,6 +187,7 @@ export default {
batteryChart: null,
weightChart: null,
page: 1,
interval1: null,
};
},
methods: {
......@@ -447,11 +450,9 @@ export default {
}
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
var that = this;
function start() {
interval = setInterval(scrolling, speed);
that.interval1 = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
......@@ -463,7 +464,7 @@ export default {
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
clearInterval(that.interval1);
setTimeout(start, delay);
}
}
......@@ -472,6 +473,15 @@ export default {
setTimeout(start, delay);
}
},
clearScroll() {
clearInterval(this.interval1);
},
reScroll() {
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
},
},
mounted() {
......@@ -655,8 +665,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-40px);
margin-bottom: -40px;
transform: translateY(-60px);
margin-bottom: -60px;
img {
width: 80%;
margin: 0 auto;
......@@ -686,11 +696,12 @@ export default {
}
}
.warning-table-run-time {
width: 40%;
width: 30%;
white-space: pre-wrap;
}
.warning-table-device,
.warning-table-info {
width: 20%;
width: 25%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
......@@ -733,6 +744,7 @@ export default {
font-size: 18px;
color: #c6def9;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid #7a8fad;
img {
width: 32px;
......
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