admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏(首页概况)：更改智能设备封装

Browse Source
This commit is contained in:
Jack 2022-07-30 18:29:09 +08:00
parent 9b0994237c
commit 43dce609c5
2 changed files with 83 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
src/views/projectAdmin/dataBoard/homePage/smartDevices.vue
View File

@ -1,327 +1,52 @@
<template>
<div ref="device1" class="device1"></div>
<div class="smartDevices">
<div class="title">
{{ $t('message.companyDiagram.smartDev') }}
</div>
<div class="content">
<slot>
<vue-scroll :ops="ops">
<devNumChart
v-for="(device, index) in devices"
:key="index"
style="width: 50%; height: 100%; float: left"
:title="$t('message.' + device.label)"
:num="device.value"
:totalDevNum="totalCount"
></devNumChart>
</vue-scroll>
</slot>
</div>
</div>
</template>
<script>
import echarts from 'echarts4';;
import devNumChart from '@/components/chart/devNumChart'
export default {
props: ["title", "num", "totalDevNum"],
data() {
return {
timer: null,
option:null,
chart:Object
};
},
watch: {
//监听value的变化，进行相应的操作即可
num: function (a, b) {
console.log('设备数量',a)
this.option.title.text="{a|" + this.num + "}\n{c| " + this.title + " }"
this.option.series[6].data[0].value=this.num
this.option.series[6].data[1].value=this.totalDevNum - this.num
this.chart.setOption(this.option, true);
},
},
mounted() {
this.createdEchart();
},
beforeDestroy(){
clearInterval(this.timer)
},
methods: {
createdEchart() {
let that = this;
//设备统计 -- 塔吊设备数
let tower = echarts.init(this.$refs.device1);
this.chart=tower
tower.clear();
let angle = 0; //角度，用来做简单的动画效果的
// let totalDevNum = this.statisticsCount.devcount.ufaceDevNum+
// this.statisticsCount.devcount.videoNum+
// +this.statisticsCount.devcount.environmentDevNum;
this.option = {
title: {
text: "{a|" + this.num + "}\n{c| " + this.title + " }",
x: "center",
y: "center",
textStyle: {
rich: {
a: {
fontSize: 24,
color: "#29EEF3",
},
c: {
fontSize: 12,
lineHeight: 20,
color: "rgba(255, 255, 254, 0.8)",
// padding: [5,0]
},
},
},
},
series: [
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
startAngle: ((0 + angle) * Math.PI) / 180,
endAngle: ((90 + angle) * Math.PI) / 180,
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
startAngle: ((180 + angle) * Math.PI) / 180,
endAngle: ((270 + angle) * Math.PI) / 180,
},
style: {
stroke: "#0CC1CD",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: ((40 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#0CC1CD",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((220 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#0CC1CD",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
let point = that.getCirlPoint(x0, y0, r, 90 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: "#0CC1CD", //粉
fill: "#0CD3DB",
},
silent: true,
};
},
data: [0],
},
{
name: "ring5", //绿点
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
let point = that.getCirlPoint(x0, y0, r, 270 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: "#0CC1CD", //绿
fill: "#0CD3DB",
},
silent: true,
};
},
data: [0],
},
{
type: "pie",
radius: ["72%", "58%"],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
},
},
data: [
{
value: this.num,
name: "",
itemStyle: {
normal: {
color: {
// 完成的圆环的颜色
colorStops: [
{
offset: 0,
color: "#4FADFD", // 0% 处的颜色
},
{
offset: 1,
color: "#28E8FA", // 100% 处的颜色
},
],
},
},
},
},
{
value: this.totalDevNum - this.num,
name: "",
label: {
normal: {
show: false,
},
},
itemStyle: {
normal: {
color: "#173164",
},
},
},
],
},
//划块线
{
name: "",
type: "gauge",
radius: "72%",
center: ["50%", "50%"],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false,
},
splitLine: {
length: 20,
lineStyle: {
width: 2,
color: "#061740",
},
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false,
},
data: [
{
value: 0,
name: "",
},
],
},
],
};
this.timer=setInterval(() => {
//用setInterval做动画感觉有问题
angle = angle + 3;
tower.setOption(this.option, true);
}, 100);
},
getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
return {
x: x1,
y: y1,
};
},
},
};
props: ['devices', 'totalCount', 'ops'],
components: { devNumChart }
}
</script>
<style lang="less" scoped>
<style lang="less" scoped>
.smartDevices {
position: relative;
margin-bottom: 25px;
height: calc(100% - 2px);
width: 100%;
.title {
position: relative;
top: -10px;
font-size: 17px;
font-weight: bold;
text-align: center;
color: #6ce9f0;
}
.content {
position: relative;
padding: 10px 20px;
height: calc(100% - 20px - 24px);
z-index: 2;
}
}
</style>

87
src/views/projectAdmin/dataBoard/index.vue
View File

@ -11,43 +11,14 @@
</div>
<div class="blockBox">
<!-- 智能设备 -->
<div class="blockTitle">
{{ $t('message.companyDiagram.smartDev') }}
</div>
<div class="blockContent">
<smartDevices :totalCount="totalDevNum" :devices="deviceData">
<div
v-if="COMPANY == 'longguang'"
style="width: 100%; height: 100%"
class="echart2"
ref="echart2"
></div>
<vue-scroll v-else :ops="ops">
<smartDevices
style="width: 50%; height: 100%; float: left"
:title="$t('message.projectSummary.ufaceDevNum')"
:num="statisticsCount.devcount.ufaceDevNum"
:totalDevNum="totalDevNum"
></smartDevices>
<smartDevices
style="width: 50%; height: 100%; float: left"
:title="$t('message.projectSummary.environmentDevNum')"
:num="statisticsCount.devcount.environmentDevNum"
:totalDevNum="totalDevNum"
></smartDevices>
<smartDevices
style="width: 50%; height: 100%; float: left"
:title="$t('message.companyDiagram.videoDevNum')"
:num="statisticsCount.devcount.videoNum"
:totalDevNum="totalDevNum"
></smartDevices>
<smartDevices
style="width: 50%; height: 100%; float: left"
:title="$t('message.companyDiagram.towerDevNum')"
:num="statisticsCount.devcount.towerDevNum"
:totalDevNum="totalDevNum"
></smartDevices>
</vue-scroll>
</div>
</smartDevices>
</div>
</div>
<div class="center fullHeight">
@ -301,7 +272,6 @@
>
<safeManage></safeManage>
<!-- <div class="safeChart" ref="safeChart"></div> -->
</div>
</div>
<!-- </div>-->
@ -328,8 +298,8 @@
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
class="descBox fullHeight"
>
<qualityManage></qualityManage>
<!-- 此处剪切了一部分 -->
<qualityManage></qualityManage>
<!-- 此处剪切了一部分 -->
</div>
<!-- 设备报警内容 -->
<div class="attendance-cards2" v-else>
@ -434,8 +404,8 @@
v-if="COMPANY != 'longguang' && enabledProjectV2 != 3"
class="blockContent"
>
<!-- 环境监测 -->
<environmentWatch :show='true' :size='small'></environmentWatch>
<!-- 环境监测 -->
<environmentWatch :show="true" :size="small"></environmentWatch>
</div>
<div v-else class="blockContent alarmBlockContent">
<vue-scroll>
@ -493,17 +463,16 @@
</div>
</template>
<script>
import echarts from "echarts4";
const echarts5 = require("echarts");
import safeManage from "./homePage/safeManage"
import qualityManage from "./homePage/qualityManage"
import airQulity from "./components/airQulity"
import smartDevices from "./homePage/smartDevices"
import environmentWatch from "./homePage/environmentWatch.vue"
import devNumChart from "@/components/chart/devNumChart";
import airQulityChart from "@/components/chart/airQulityChart";
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
import { getProjectDetail, editProjectInfo } from "@/assets/js/api/baseInfo.js";
import echarts from 'echarts4'
const echarts5 = require('echarts')
import safeManage from './homePage/safeManage'
import qualityManage from './homePage/qualityManage'
import airQulity from './components/airQulity'
import smartDevices from './homePage/smartDevices'
import environmentWatch from './homePage/environmentWatch.vue'
import airQulityChart from '@/components/chart/airQulityChart'
import { getWorkerStatisticsCountApi } from '@/assets/js/api/company/project'
import { getProjectDetail, editProjectInfo } from '@/assets/js/api/baseInfo.js'
import {
selectSecurityManageStatisticsApi,
selectQualityStatisticsApi,
@ -528,9 +497,19 @@ import ProjectInfo from './homePage/projectInfo'
import PersonOverview from './homePage/personOverview'
export default {
components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity,smartDevices ,environmentWatch},
components: {
airQulityChart,
ProjectInfo,
PersonOverview,
safeManage,
qualityManage,
airQulity,
smartDevices,
environmentWatch
},
data() {
return {
deviceData: [],
COMPANY: '',
ops: {
vuescroll: {
@ -957,13 +936,23 @@ export default {
(res) => {
console.log(res)
this.statisticsCount = res.result
console.log('----------------',this.statisticsCount)
console.log('----------------', this.statisticsCount)
this.totalDevNum =
this.statisticsCount.devcount.ufaceDevNum +
this.statisticsCount.devcount.videoNum +
this.statisticsCount.devcount.environmentDevNum +
this.statisticsCount.devcount.towerDevNum +
this.statisticsCount.devcount.lifterDevNum
const device = this.statisticsCount.devcount
this.deviceData = [
{ label: 'projectSummary.ufaceDevNum', value: device.ufaceDevNum },
{
label: 'projectSummary.environmentDevNum',
value: device.environmentDevNum
},
{ label: 'companyDiagram.videoDevNum', value: device.videoNum },
{ label: 'companyDiagram.towerDevNum', value: device.towerDevNum }
]
if (type == 1) {
this.createdEchart2()
}