634 lines
19 KiB
Vue
634 lines
19 KiB
Vue
<template>
|
||
<view class="specialOperations">
|
||
<headers class="fixedheader" :themeType="true" :showBack="true">
|
||
<view class="headerName"> 特种作业 </view>
|
||
</headers>
|
||
<view class="sp-menu-wrapper" style="padding-top: 44px">
|
||
<view class="menu-title"> 作业中心 </view>
|
||
<view class="sp-menu">
|
||
<view class="menu-item" @click="handleNavigateTo(20)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/fireWork.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>新动火作业</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(1)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/fireWork.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>动火作业</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(2)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/limitSpaceWork.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>受限空间</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(3)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/bindPlatePlug.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>盲板抽堵</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(4)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/highJob.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>高处作业</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(5)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/hoistSafe.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>吊装安全</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(6)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/tempElectricity.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>临时用电</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(7)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/groundSafe.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>动土作业</text>
|
||
</view>
|
||
</view>
|
||
<view class="menu-item" @click="handleNavigateTo(8)">
|
||
<view class="item-icon">
|
||
<image src="@/static/specialOperations/openCircuit.png"></image>
|
||
</view>
|
||
<view class="item-text">
|
||
<text>断路作业</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sp-menu-wrapper">
|
||
<view class="menu-title"> 统计分析 </view>
|
||
<view class="search-btn-wrapper">
|
||
<view class="search-btn" :class="{ active: searchType === 1 }" @click="handleSearchType(1)"> 最近7天 </view>
|
||
<view class="search-btn" :class="{ active: searchType === 2 }" @click="handleSearchType(2)"> 最近30天 </view>
|
||
<view class="search-btn" :class="{ active: searchType === 3 }" @click="handleSearchType(3)"> 自定义 </view>
|
||
</view>
|
||
</view>
|
||
<view class="sp-menu-wrapper">
|
||
<view class="menu-title"> 特殊作业数量趋势 </view>
|
||
<view class="chart-wrapper">
|
||
<u-charts
|
||
class="ucharts"
|
||
:cWidth="355"
|
||
:cHeight="300"
|
||
canvas-id="lineChart"
|
||
chartType="line"
|
||
:opts="chartOptions"
|
||
ref="lineChart"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 筛选条件弹框 -->
|
||
<uni-popup class="screenDialog" ref="screenShow" :maskClick="true" @change="closeMenu" :show="popupShow">
|
||
<view class="screenContent">
|
||
<scroll-view style="height: 100%" scroll-y>
|
||
<view class="closeIcon" @click="closeBtn"> × </view>
|
||
<view class="screenTitle"> 筛选条件 </view>
|
||
|
||
<view class="titleItem">自定义时间</view>
|
||
<view class="screenItem">
|
||
<view class="screenI" style="width: 140px; position: relative">
|
||
<dateTimePicker
|
||
v-if="startTime === ''"
|
||
placeholder="开始时间"
|
||
fields="day"
|
||
@change="pickerChange($event, 'startTime')"
|
||
class="dateTimePicker"
|
||
>
|
||
</dateTimePicker>
|
||
<view v-else>{{ startTime }}</view>
|
||
<view v-if="startTime != ''" @click="showTimePicker(1)" style="position: absolute; top: -1vh; left: 34vw; font-size: 16px"
|
||
>×</view
|
||
>
|
||
</view>
|
||
<span style="color: gray; margin: 6% 5px">一</span>
|
||
<view class="screenI" style="width: 140px; position: relative">
|
||
<dateTimePicker
|
||
v-if="endTime === ''"
|
||
placeholder="结束时间"
|
||
fields="day"
|
||
@change="pickerChange($event, 'endTime')"
|
||
class="dateTimePicker"
|
||
>
|
||
</dateTimePicker>
|
||
<view v-else>{{ endTime }}</view>
|
||
<view v-if="endTime != ''" @click="showTimePicker(2)" style="position: absolute; top: -1vh; left: 34vw; font-size: 16px"
|
||
>×</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
|
||
<view class="footerBtn">
|
||
<view class="foterLeft" @click="resettingBtn"> 重置 </view>
|
||
<view class="foterRight" @click="closeRed"> 确定 </view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetDateStr } from '../../../static/js/util.js'
|
||
import uCharts from '@/components/u-charts/component.vue'
|
||
import dateTimePicker from '@/components/dateTimePicker/index.vue'
|
||
import levitatedsphere from '@/components/levitatedsphere/levitatedsphere.vue'
|
||
import headers from '../../../components/headers/headers.vue'
|
||
export default {
|
||
navigationBarTitleText: '页面标题',
|
||
components: {
|
||
uCharts,
|
||
dateTimePicker
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo: {},
|
||
moduleList: [],
|
||
menuList: [],
|
||
searchType: 1, // 1:最近7天 2:最近30天 3:自定义
|
||
startTime: '',
|
||
endTime: '',
|
||
popupShow: false,
|
||
chartOptions: {
|
||
legends: true,
|
||
legend: {
|
||
show: true,
|
||
position: 'top',
|
||
lineHeight: 18
|
||
},
|
||
categories: [],
|
||
series: []
|
||
}
|
||
}
|
||
},
|
||
onReady() {},
|
||
created() {},
|
||
mounted() {},
|
||
onLoad() {
|
||
this.searchType = 1
|
||
this.startTime = GetDateStr(-7, '-')
|
||
this.endTime = GetDateStr(0, '-')
|
||
this.getChartData()
|
||
// uni.showLoading({
|
||
// title: "加载中...",
|
||
// })
|
||
// setTimeout(() =>{
|
||
// this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
// this.moduleList = this.userInfo.menuAuthority.moduleList
|
||
// this.moduleList.map(item => {
|
||
// if(item.plugin === "specialOperations") this.menuList = item.menuList
|
||
// })
|
||
// if(this.menuList.length > 0){
|
||
// this.menuList.map(item => {
|
||
// if(item.path === "/project/specialWork/fireWork") item.iconImg = 'fireWork.png'
|
||
// if(item.path === "/project/specialWork/confinedSpaceWork") item.iconImg = 'limitSpaceWork.png'
|
||
// if(item.path === "/project/specialWork/blindPlugWork") item.iconImg = 'bindPlatePlug.png'
|
||
// if(item.path === "/project/specialWork/towerOverWork") item.iconImg = 'highJob.png'
|
||
// if(item.path === "/project/specialWork/riggingOutWork") item.iconImg = 'hoistSafe.png'
|
||
// if(item.path === "/project/specialWork/temporaryPowerWork") item.iconImg = 'tempElectricity.png'
|
||
// if(item.path === "/project/specialWork/startBuildingWork") item.iconImg = 'groundSafe.png'
|
||
// if(item.path === "/project/specialWork/disconnectionWork") item.iconImg = 'openCircuit.png'
|
||
// })
|
||
// }
|
||
// console.log("userInfo=======================",this.userInfo);
|
||
// console.log("moduleList=======================",this.moduleList);
|
||
// },500)
|
||
// uni.hideLoading()
|
||
},
|
||
methods: {
|
||
handleSearchType(val) {
|
||
if (val === this.searchType) return
|
||
this.searchType = val
|
||
if (val === 1) {
|
||
this.startTime = GetDateStr(-7, '-')
|
||
this.endTime = GetDateStr(0, '-')
|
||
this.getChartData()
|
||
}
|
||
if (val === 2) {
|
||
this.startTime = GetDateStr(-30, '-')
|
||
this.endTime = GetDateStr(0, '-')
|
||
this.getChartData()
|
||
}
|
||
if (val === 3) {
|
||
this.startTime = ''
|
||
this.endTime = ''
|
||
this.$refs.screenShow.open()
|
||
this.popupShow = true
|
||
}
|
||
},
|
||
handleNavigateTo(val) {
|
||
// if(val === "/project/specialWork/fireWork") uni.navigateTo({ url: "./fireWork/work" })
|
||
// if(val === "/project/specialWork/confinedSpaceWork") uni.navigateTo({ url: "./limitSpaceWork/work" })
|
||
// if(val === "/project/specialWork/blindPlugWork") uni.navigateTo({ url: "./bindPlatePlug/work" })
|
||
// if(val === "/project/specialWork/towerOverWork") uni.navigateTo({ url: "./highJob/work" })
|
||
// if(val === "/project/specialWork/riggingOutWork") uni.navigateTo({ url: "./hoistSafe/work" })
|
||
// if(val === "/project/specialWork/temporaryPowerWork") uni.navigateTo({ url: "./tempElectricity/work" })
|
||
// if(val === "/project/specialWork/startBuildingWork") uni.navigateTo({ url: "./groundSafe/work" })
|
||
// if(val === "/project/specialWork/disconnectionWork") uni.navigateTo({ url: "./openCircuit/work" })
|
||
if (val === 20) uni.navigateTo({ url: './fireWork/newWork' })
|
||
if (val === 1) uni.navigateTo({ url: './fireWork/work' })
|
||
if (val === 2) uni.navigateTo({ url: './limitSpaceWork/work' })
|
||
if (val === 3) uni.navigateTo({ url: './bindPlatePlug/work' })
|
||
if (val === 4) uni.navigateTo({ url: './highJob/work' })
|
||
if (val === 5) uni.navigateTo({ url: './hoistSafe/work' })
|
||
if (val === 6) uni.navigateTo({ url: './tempElectricity/work' })
|
||
if (val === 7) uni.navigateTo({ url: './groundSafe/work' })
|
||
if (val === 8) uni.navigateTo({ url: './openCircuit/work' })
|
||
},
|
||
//点击重新选择时间
|
||
showTimePicker(type) {
|
||
if (type == 1) {
|
||
this.startTime = ''
|
||
} else {
|
||
this.endTime = ''
|
||
}
|
||
},
|
||
pickerChange(e, type) {
|
||
console.log(e, '======')
|
||
if (type === 'startTime') {
|
||
this.startTime = e.f1
|
||
} else {
|
||
this.endTime = e.f1
|
||
}
|
||
},
|
||
closeMenu(e) {
|
||
console.log('关闭！！！！', e)
|
||
if (e.show == false) {
|
||
this.popupShow = false
|
||
if (!this.startTime || !this.endTime) {
|
||
this.searchType = 1
|
||
this.startTime = GetDateStr(-7, '-')
|
||
this.endTime = GetDateStr(0, '-')
|
||
this.getChartData()
|
||
}
|
||
}
|
||
},
|
||
resettingBtn() {
|
||
this.$refs.screenShow.close()
|
||
this.popupShow = false
|
||
this.searchType = 1
|
||
this.startTime = GetDateStr(-7, '-')
|
||
this.endTime = GetDateStr(0, '-')
|
||
this.getChartData()
|
||
},
|
||
closeRed() {
|
||
this.$refs.screenShow.close()
|
||
this.popupShow = false
|
||
this.getChartData()
|
||
},
|
||
//关闭筛选
|
||
closeBtn() {
|
||
this.$refs.screenShow.close()
|
||
this.popupShow = false
|
||
},
|
||
getChartData() {
|
||
this.sendRequest({
|
||
url: 'xmgl/xzSpecial/countSpecialByData',
|
||
method: 'post',
|
||
data: {
|
||
projectSn: JSON.parse(uni.getStorageSync('userInfo')).sn,
|
||
startTime: this.startTime,
|
||
endTime: this.endTime
|
||
},
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
console.log('getChartData======================', res)
|
||
let list = res.result || []
|
||
let categories = []
|
||
let series = []
|
||
let data1 = {
|
||
name: '新动火',
|
||
data: []
|
||
}
|
||
let data2 = {
|
||
name: '受限空间',
|
||
data: []
|
||
}
|
||
let data3 = {
|
||
name: '盲板抽堵',
|
||
data: []
|
||
}
|
||
let data4 = {
|
||
name: '高处作业',
|
||
data: []
|
||
}
|
||
let data5 = {
|
||
name: '吊装安全',
|
||
data: []
|
||
}
|
||
let data6 = {
|
||
name: '临时用电',
|
||
data: []
|
||
}
|
||
let data7 = {
|
||
name: '动土作业',
|
||
data: []
|
||
}
|
||
let data8 = {
|
||
name: '断路作业',
|
||
data: []
|
||
}
|
||
|
||
list.forEach(item => {
|
||
categories.push(item.date)
|
||
data1.data.push(item.xzSpecialOperationFireSafetyNum)
|
||
data2.data.push(item.xzLimitSpaceSafeNum)
|
||
data3.data.push(item.xzBlindPlatePlugSafeNum)
|
||
data4.data.push(item.xzHighJobSafeNum)
|
||
data5.data.push(item.xzHoistSafetyWorkNum)
|
||
data6.data.push(item.xzTemporaryElectricitySafeNum)
|
||
data7.data.push(item.xzGroundSafetNum)
|
||
data8.data.push(item.xzOpenCircuitSafeNum)
|
||
})
|
||
series = [data1, data2, data3, data4, data5, data6, data7, data8]
|
||
this.chartOptions.series = series
|
||
this.chartOptions.categories = categories
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.specialOperations {
|
||
background-color: #f1f3f5;
|
||
height: 100vh;
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
.sp-menu-wrapper {
|
||
width: 100%;
|
||
// padding-top: 200rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 24rpx;
|
||
.menu-title {
|
||
height: 80rpx;
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
font-weight: bold;
|
||
padding: 0 38rpx;
|
||
margin-bottom: 20rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 2rpx solid rgba(187, 187, 187, 0.1);
|
||
}
|
||
.sp-menu {
|
||
margin: 0 38rpx;
|
||
// height: 1200rpx;
|
||
// height: 1000rpx;
|
||
// background-color: darkred;
|
||
display: grid;
|
||
grid-gap: 24rpx;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
// grid-template-columns: repeat(auto-fill, 220rpx);
|
||
// place-items: center;
|
||
// justify-content: center;
|
||
.menu-item {
|
||
// width: 220rpx;
|
||
height: 160rpx;
|
||
// background-color: darkblue;
|
||
// box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.item-icon {
|
||
// width: 220rpx;
|
||
// height: 220rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 14rpx;
|
||
image {
|
||
width: 66rpx;
|
||
height: 86rpx;
|
||
}
|
||
}
|
||
.item-text {
|
||
align-items: center;
|
||
// width: 220rpx;
|
||
height: 54rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text {
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-btn-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 80rpx;
|
||
gap: 60rpx;
|
||
.search-btn {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(182, 182, 182, 0.15);
|
||
color: rgba(14, 32, 76, 1);
|
||
border-radius: 30rpx;
|
||
border: 1px solid rgba(128, 128, 128, 0.13);
|
||
font-size: 24rpx;
|
||
&.active {
|
||
background-color: rgba(61, 150, 253, 1);
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.screenDialog {
|
||
position: absolute;
|
||
// top: 11%;
|
||
height: 95%;
|
||
/* background: pink; */
|
||
background: white;
|
||
width: 100%;
|
||
border-radius: 20px;
|
||
margin-left: -4%;
|
||
background-color: white;
|
||
/* 设置为半透明的灰色 */
|
||
z-index: 9;
|
||
/* 设置一个较大的 z-index 值，保证遮罩层在最上层 */
|
||
|
||
.closeIcon {
|
||
float: right;
|
||
font-size: 25px;
|
||
color: gray;
|
||
margin-right: 3%;
|
||
}
|
||
|
||
.screenTitle {
|
||
text-align: center;
|
||
margin-top: 4%;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.uni-popup__wrapper-box {
|
||
height: 70vh;
|
||
overflow: scroll;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
|
||
.screenContent {
|
||
width: 100vw;
|
||
height: 40%;
|
||
// width: 90%;
|
||
// margin: -65% 0%;
|
||
overflow: scroll;
|
||
// position: relative;
|
||
// margin-top: 180%;
|
||
border-radius: 20px 20px 0 0;
|
||
// margin-left: -4%;
|
||
background-color: white;
|
||
padding-left: 10%;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
.titleItem {
|
||
font-size: 14px;
|
||
|
||
.regionText {
|
||
display: inline-block;
|
||
margin-left: 16%;
|
||
width: 190px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.screenItem {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.screenI {
|
||
width: 100px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #f7f8fa;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: gray;
|
||
margin: 5% 0;
|
||
}
|
||
|
||
.screenText {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #f7f8fa;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
}
|
||
|
||
.active {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
background: #edf2fe;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
border: 1px solid #5181f6;
|
||
}
|
||
|
||
.screenTextClose {
|
||
width: 90px;
|
||
font-size: 12px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #000;
|
||
margin: 5% 5% 5% 0%;
|
||
}
|
||
}
|
||
|
||
.footerBtn {
|
||
display: flex;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
margin-top: 2%;
|
||
// margin-left: 6%;
|
||
position: absolute;
|
||
width: 100%;
|
||
bottom: 20px;
|
||
|
||
.foterLeft {
|
||
width: 43%;
|
||
background: #f6f7f8;
|
||
height: 40px;
|
||
border-top-left-radius: 20px;
|
||
border-bottom-left-radius: 20px;
|
||
color: #5181f6;
|
||
}
|
||
|
||
.foterRight {
|
||
width: 43%;
|
||
background: #5181f6;
|
||
height: 40px;
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
::v-deep .placeholder {
|
||
padding-left: 40px;
|
||
}
|
||
}
|
||
</style>
|