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

金林湾下面-大屏数据对接

Browse Source
This commit is contained in:
yjl 2023-03-24 17:33:02 +08:00
parent 74d285abd7
commit b55c1fddfe
13 changed files with 255 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/config.js
View File

@ -21,7 +21,7 @@ var PROJECT = {
}
var PROJECT_TYPE = PROJECT.online_zjsj
var PROJECT_TYPE = PROJECT.local_test
var headerShow = true; // 是否显示头部
var tabsShow = true; // 是否显示tabs

4
src/assets/js/api/dataBoard.js
View File

@ -31,6 +31,8 @@ export const selectUfaceDevStatisticsList = data => post('xmgl/ufaceDev/selectUf
export const selectEnvironmentDevAlaramCountList = data => post('xmgl/environmentDev/selectEnvironmentDevAlaramCountList', data);
export const selectProjectGetProjectInfoBySn = data => post('xmgl/project/getProjectInfoBySn', data);//获取项目平面图
export const getSelectuFaceDevList = data => get('/xmgl/ufaceDev/count/onoffline', data);//获取项目平面图
@ -67,6 +69,8 @@ export const selectHiddenDangerSecurityManageStatisticsApi = data => post('xmgl
// old安全管理
export const selectRectifiedSecurityManageList2Api = data => post('xmgl/securityManage/selectRectifiedSecurityManageList', data);
export const getNewestSecurityManageDataList2Api = data => post('xmgl/securityManage/getNewestSecurityManageDataList', data);
export const getHiddenDangerInspectManageDataListApi = data => post('/xmgl/hiddenDangerInspectRecord/selectHiddenDangerTypeRatio', data);
export const getHiddenDangerStateTrendListApi = data => post('/xmgl/hiddenDangerInspectRecord/selectHiddenDangerStateTrend', data);

8
src/assets/js/http.js
View File

@ -44,7 +44,7 @@ if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL ='http://124.71.67.160:8088/' //中建四局线上
// axios.defaults.baseURL ='http://182.90.224.147:100/' //演示平台/
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
// axios.defaults.baseURL ='http://47.97.202.104:6023/' //金林湾线上
axios.defaults.baseURL ='http://47.97.202.104:6023/' //金林湾线上
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
// axios.defaults.baseURL = 'http://139.9.66.234:8/';
@ -75,10 +75,10 @@ if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL = 'http://182.90.224.147:18170' //瑞士恒通线上
// axios.defaults.baseURL = 'http://58.250.210.9:9090' //深汕线上
// axios.defaults.baseURL = 'http://192.168.34.221:8088' //郭圣雄本地
axios.defaults.baseURL = 'http://192.168.34.221:8188' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.221:8188' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.221:8210' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.221:8199' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.169.34.133:8070' //彭洁本地
// axios.defaults.baseURL = 'http://192.168.34.221:12346' //郭圣雄本地
// axios.defaults.baseURL = 'http://192.168.34.122:8070' //彭洁本地
} else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com'

6
src/views/projectAdmin/jlw/components/progress.vue
View File

@ -140,10 +140,10 @@ export default {
margin-left: -47%;
}
.line {
top: 60%;
top: 50%;
position: absolute;
margin-left: 200px;
color: gray;
margin-left: 145px;
color: #465161;
}
}
}

136
src/views/projectAdmin/jlw/digitalSite/rightTop.vue
View File

@ -1,8 +1,8 @@
<template>
<Card :title="title">
<DeviceCard
:leftCount="{ value: 22, label: '在线设备', img: 'online' }"
:rightCount="{ value: 65, label: '离线设备', img: 'warring2' }"
:leftCount="{ value: offlineNum, label: '在线设备', img: 'online' }"
:rightCount="{ value: onlineNum, label: '离线设备', img: 'warring2' }"
>
<div class="list">
<div class="list-head">
@ -11,12 +11,19 @@
<div class="outer">出场人数</div>
</div>
<div class="listBox">
<div class="list-item" :class="item.deviceState ==1 ? 'offline' : 'online'" v-for="(item,index) in ufaceList.devList" :key="index">
<div class="status">{{item.deviceState ==1 ? '在线' :'离线'}}</div>
<div class="label">{{item.devName}}</div>
<div class="enter">{{item.isEnter}}</div>
<div class="outer">{{item.outTotalNum}}</div>
</div>
<div
class="list-item"
:class="item.deviceState == 1 ? 'offline' : 'online'"
v-for="(item, index) in ufaceList.devList"
:key="index"
>
<div class="status">
{{ item.deviceState == 1 ? '在线' : '离线' }}
</div>
<div class="label">{{ item.devName }}</div>
<div class="enter">{{ item.isEnter }}</div>
<div class="outer">{{ item.outTotalNum }}</div>
</div>
</div>
</div>
</DeviceCard>
@ -24,6 +31,7 @@
</template>
<script>
import { getSelectuFaceDevList } from '@/assets/js/api/dataBoard'
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default {
@ -33,16 +41,37 @@ export default {
type: String,
default: ''
},
ufaceList:{
ufaceList: {
type: Object,
default: []
}
},
data() {
return {}
return {
offlineNum: 0,
onlineNum: 0
}
},
mounted(){
mounted() {
this.getData()
// console.log('--------------', this.ufaceList)
},
methods: {
getData() {
let data = {
projectSn: this.$store.state.projectSn
}
// 获取塔吊数量
getSelectuFaceDevList(data).then((res) => {
if (res.code === 200) {
console.log('获取人脸闸机数量', res)
// let { result } = res
this.offlineNum = res.result.offlineNum
this.onlineNum = res.result.onlineNum
// console.log(result)
}
})
}
}
}
</script>
@ -73,49 +102,56 @@ export default {
text-align: right;
}
}
.listBox{
.listBox {
height: calc(100% - 15px);
overflow:auto;
.list-item {
margin-bottom: 6px;
padding: 0 16px;
height: 22px;
display: flex;
align-items: center;
&.online {
background-image: linear-gradient(90deg, rgba(23, 54, 74, 1), rgba(23, 54, 74, 0.2));
overflow: auto;
.list-item {
margin-bottom: 6px;
padding: 0 16px;
height: 22px;
display: flex;
align-items: center;
&.online {
background-image: linear-gradient(
90deg,
rgba(23, 54, 74, 1),
rgba(23, 54, 74, 0.2)
);
.status {
background-color: #3cabfd;
}
}
&.offline {
background-image: linear-gradient(
90deg,
rgba(67, 42, 63, 1),
rgba(67, 42, 63, 0.2)
);
.status {
background-color: #ff6c7f;
}
}
.status {
background-color: #3cabfd;
margin-right: 20px;
width: 36px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
border-radius: 9px;
}
.label {
margin-right: auto;
font-size: 14px;
}
.enter {
width: 70px;
}
.outer {
width: 70px;
text-align: right;
}
}
&.offline {
background-image: linear-gradient(90deg, rgba(67, 42, 63, 1), rgba(67, 42, 63, 0.2));
.status {
background-color: #ff6c7f;
}
}
.status {
margin-right: 20px;
width: 36px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
border-radius: 9px;
}
.label {
margin-right: auto;
font-size: 14px;
}
.enter {
width: 70px;
}
.outer {
width: 70px;
text-align: right;
}
}
}
}
</style>

1
src/views/projectAdmin/jlw/jChart/bar/JProgressChart.vue
View File

@ -41,6 +41,7 @@ export default {
},
methods: {
createChart() {
this.JProgressChart = echarts.init(this.$refs.JProgressChart)
const { grid, seriesData, yData } = this
const max = Math.max(...seriesData)
const maxData = seriesData.map((item) => max)

32
src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue
View File

@ -31,15 +31,13 @@ export default {
},
mounted() {
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
this.drawChart()
this.createChart()
this.$nextTick(() => {
this.drawChart();
this.timer = setInterval(() => {
this.doing();
}, 200);
});
this.timer = setInterval(() => {
this.doing()
}, 200)
},
destroyed(){
destroyed() {
clearInterval(this.timer)
this.timer = ''
},
@ -51,8 +49,8 @@ export default {
methods: {
createChart() {
const { title, legend, series, showLegend } = this
const setSeries = (series => {
return series.map(item => ({
const setSeries = ((series) => {
return series.map((item) => ({
type: 'pie',
label: false,
center: item.center || ['30%', '50%'],
@ -62,6 +60,7 @@ export default {
data: item.data
}))
})(series)
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
const option = {
title: {
@ -104,20 +103,21 @@ export default {
series: setSeries
}
if (!showLegend) {
delete option.legend;
delete option.legend
}
this.jNestedRingChart.setOption(option)
},
drawChart() {
this.myChart = echarts.init(this.$refs.jNestedRingChart);
this.myChart = echarts.init(this.$refs.jNestedRingChart)
this.option = {
series: this.series
};
},
doing() {//转动饼图内圈
this.series[0].startAngle = this.series[0].startAngle - 5;
this.myChart.setOption(this.option);
}
},
doing() {
//转动饼图内圈
this.series[0].startAngle = this.series[0].startAngle - 5
this.myChart.setOption(this.option)
}
},
watch: {
series() {

52
src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue
View File

@ -9,22 +9,31 @@
:data="[{ value: total.jyUrgentLevelNum }, { value: total.ybUrgentLevelNum }]"
:radius="['55%', '80%']"
/>-->
<JRingChart
:color="['#3aaaff', '#ff6982']"
:title="{ x: '47%', y: '35%', text: total.totalNum , subTitle: '质量问题数' }"
:data ="[
{ value: total.totalNum-total.rectificationNum, name: '已整改质量问题' },
<JRingChart
:color="['#3aaaff', '#ff6982']"
:title="{
x: '47%',
y: '35%',
text: total.totalNum,
subTitle: '质量问题数'
}"
:data="[
{
value: total.totalNum - total.rectificationNum,
name: '已整改质量问题'
},
{ value: total.rectificationNum, name: '未整改质量问题' }
]" />
]"
/>
</div>
<div class="count">
<div class="count-item">
<div class="label">已整改质量问题</div>
<div class="num">{{( total.totalNum-total.rectificationNum)}}</div>
<div class="num">{{ total.totalNum - total.rectificationNum }}</div>
</div>
<div class="count-item">
<div class="label">未整改质量问题</div>
<div class="num">{{ total.rectificationNum}}</div>
<div class="num">{{ total.rectificationNum }}</div>
</div>
</div>
</div>
@ -54,47 +63,48 @@ export default {
ratioNum: 0
},
series: [
{
{
roseType: 'area',
startAngle:90,
startAngle: 90,
center: ['50%', '50%'],
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40],
hoverAnimation:false,
hoverAnimation: false
},
{
color: ['#3aaaff', '#ff6982'],
center: ['50%', '50%'],
startAngle:90,
startAngle: 90,
data: [
{ value: 0, name: '已整改质量问题' },
{ value: 0, name: '未整改质量问题' }
],
hoverAnimation:false,
hoverAnimation: false
}
]
}
},
created(){
created() {
this.getData()
},
methods:{
//获取数据
getData() {
methods: {
//获取数据
getData() {
let data = {
projectSn: this.$store.state.projectSn
}
selectQualityStatisticsApi(data).then(res => {
selectQualityStatisticsApi(data).then((res) => {
this.total = res.result.total
this.total.totalNum = Number(res.result.total.totalNum)
this.series[1].data[0].value = this.total.totalNum-this.total.rectificationNum
this.series[1].data[0].value =
this.total.totalNum - this.total.rectificationNum
this.series[1].data[1].value = this.total.rectificationNum
console.log(this.total,'质量问题');
console.log(this.total, '质量问题')
})
}
},
}
}
</script>

4
src/views/projectAdmin/jlw/qualityManage/leftTop.vue
View File

@ -3,9 +3,9 @@
<!-- <DaysSwitch class="days-switch" @change="handleSwitch" /> -->
<div class="content">
<JProgressChart
v-if="seriesData.length > 0"
:seriesData="seriesData"
:yData="yData"
v-if="seriesData.length > 0"
/>
<div class="noData" v-else>
<img src="@/assets/images/noData3.png" alt srcset />
@ -60,6 +60,8 @@ export default {
})
this.yData = xdata
this.seriesData = ydata
console.log('this.yData', this.yData)
console.log('this.seriesData', this.seriesData)
})
},
handleSwitch(val) {

2
src/views/projectAdmin/jlw/qualityManage/rightBottom.vue
View File

@ -78,7 +78,7 @@ export default {
ydata.push(item.num)
})
this.xData = xdata
this.series.data = ydata
this.series[0].data = ydata
}
})
}

108
src/views/projectAdmin/jlw/safeManage/leftCenter.vue
View File

@ -1,29 +1,18 @@
<template>
<Card :title="title">
<!-- <div class="table">
<div class="thead">
<div class="row">
<div class="td">预警时间</div>
<div class="td">预警类型</div>
<div class="td"></div>
</div>
</div>
<div class="tbody">
<div class="row" v-for="i in 5" :key="i">
<div class="td">2022.03.05 15:23:22</div>
<div class="td">边临防护</div>
<div class="td">详情</div>
</div>
</div>
</div> -->
<JNestedRingChart :title="{ text: totalNum, subTitle: '问题总数', y: '35%' }" :series="series" />
<JNestedRingChart
:title="{ text: totals.total, subTitle: '问题总数', y: '35%' }"
:series="series"
/>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import { selectSecurityManageStatisticsApi } from '@/assets/js/api/dataBoard'
import {
selectSecurityManageStatisticsApi,
getHiddenDangerInspectManageDataListApi
} from '@/assets/js/api/dataBoard'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
export default {
components: { Card, JNestedRingChart },
@ -33,55 +22,54 @@ export default {
default: ''
}
},
mounted() {
this.series[1].data = [
{ value: 3, name: '周检' },
{ value: 7, name: '月检' },
{ value: 1, name: '其他' }
]
// selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {
// const totals = res.result.total
// this.series[1].data = [
// { value: totals.weekInspectNum, name: '周检' },
// { value: totals.monthInspectNum, name: '月检' },
// { value: totals.otherInspectNum, name: '其他' }
// ]
// this.totalNum = totals.totalNum
// })
},
data() {
return {
projectSn: this.$store.state.projectSn,
series: [
{
totals: {
total: 0
},
series: [
{
roseType: 'area',
startAngle:90,
startAngle: 90,
radius: ['58%', '54%'],
color: ['#0B1B35', '#244D8F'],
data: [30, 40, 30, 40],
hoverAnimation:false,
},{
color: ['#3DACFE', '#6DE4F0', '#FE6C7F'],
startAngle:90,
data:[],
hoverAnimation:false,
hoverAnimation: false
},
{
color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0'],
startAngle: 90,
data: [],
hoverAnimation: false
}
],
total: 0
]
}
},
computed: {
// legend() {
// const data = (this.series[0] || []).data || []
// const formatter = name => {
// const value = ((data.filter(item => item.name === name) || [])[0] || {}).value
// return `${name} ${value}`
// }
// return {
// formatter
// }
// }
}
mounted() {},
created() {
this.getData()
this.totals.total = JSON.parse(localStorage.getItem('safeTotal'))
},
methods: {
getData() {
let that = this
getHiddenDangerInspectManageDataListApi({
projectSn: this.$store.state.projectSn
}).then((res) => {
console.log('问题占比数据', res)
res.result.forEach((element) => {
that.totals.total = element.total
localStorage.setItem('safeTotal', element.total)
// console.log('bbb', that.series[1].data)
that.series[1].data = [
{ value: element.num, name: element.inspectTypeName }
// { value: 1, name: '安全生产' }
]
})
})
}
},
computed: {}
}
</script>
@ -115,7 +103,7 @@ export default {
margin-right: 10px;
color: #6ee4f0;
cursor: pointer;
color: #3DACFE;
color: #3dacfe;
}
}
}

9
src/views/projectAdmin/jlw/safeManage/leftTop.vue
View File

@ -37,6 +37,7 @@
label="检查项"
></el-table-column>
<el-table-column
width="180"
align="center"
prop="checkContent"
label="检查内容"
@ -45,7 +46,7 @@
align="center"
prop="inspectTime"
label="检查时间"
width="100"
width="90"
></el-table-column>
<el-table-column
align="center"
@ -159,4 +160,10 @@ export default {
}
}
}
::v-deep .el-table tr {
font-size: 12px !important;
}
::v-deep .el-table th > .cell {
font-size: 14px !important;
}
</style>

55
src/views/projectAdmin/jlw/safeManage/rightBottom.vue
View File

@ -1,5 +1,5 @@
<template>
<Card :title="title" style="position: relative;">
<Card :title="title" style="position: relative">
<!-- <el-date-picker
v-model="dateRange"
size="mini"
@ -10,11 +10,16 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker> -->
<JLineChart :xData="xData" :series="series" />
<JLineChart :xData="xData" :series="series" v-if="xData.length > 0" />
<div class="noData" v-else>
<img src="@/assets/images/noData3.png" alt srcset />
<p>暂无数据</p>
</div>
</Card>
</template>
<script>
import { getHiddenDangerStateTrendListApi } from '@/assets/js/api/dataBoard'
import Card from '../components/Card.vue'
import JLineChart from '../jChart/line/JLineChart.vue'
export default {
@ -33,7 +38,7 @@ export default {
series: [
{
name: '新增隐患',
data: [100, 235, 232, 532, 112, 532, 449, 269, 998, 33],
data: [],
areaColor: ['rgba(250, 201, 21, .3)', 'rgba(250, 201, 21, .1)'],
emphasis: {
color: '#FAC915',
@ -43,7 +48,7 @@ export default {
},
{
name: '消除隐患',
data: [22, 432, 44, 55, 123, 433, 369, 269, 436, 203],
data: [],
areaColor: ['rgba(255, 108, 127, .3)', 'rgba(255, 108, 127, .1)'],
emphasis: {
color: '#ff6c7f',
@ -53,7 +58,7 @@ export default {
},
{
name: '未消除隐患',
data: [655, 111, 224, 152, 65, 541, 334, 556, 326, 203],
data: [],
areaColor: ['rgba(102, 212, 224, .3)', 'rgba(102, 212, 224, .1)'],
emphasis: {
color: '#6ee4f0',
@ -63,8 +68,46 @@ export default {
}
]
}
},
mounted() {
this.getData()
},
methods: {
getData() {
let data = {
projectSn: this.$store.state.projectSn
}
getHiddenDangerStateTrendListApi(data).then((res) => {
console.log('安全问题趋势有数据吗', res)
var arr = res.result
if (arr != null) {
var ydata1 = [] //新增隐患
var ydata2 = [] //消除隐患
var ydata3 = [] //未消除隐患
var time = [] //时间
arr.forEach((item) => {
ydata1.push(item.increaseNum)
ydata2.push(item.solveNum)
ydata3.push(item.unResolveNum)
time.push(item.createTime)
})
this.xData = time
this.series[0].data = ydata1
this.series[1].data = ydata2
this.series[2].data = ydata3
}
})
}
}
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.noData {
margin-top: 12%;
margin-left: 40%;
p {
margin-left: 1.5%;
}
}
</style>