1607 lines
51 KiB
Vue
1607 lines
51 KiB
Vue
<template>
|
||
<div class="towerManage_box">
|
||
<div style="width: 100%;height:100%" v-if="!isProject">
|
||
<vue-scroll>
|
||
<div class="top">
|
||
<div class="dev_info">
|
||
<div class="pageTitle">设备情况</div>
|
||
<div class="dev_list">
|
||
<div class="dev_item" @click="showDetail(1)">
|
||
<img style="width: 36px;height: 36px" src="@/assets/images/towerManage/tower-icon.png">
|
||
<span>塔机总数</span>
|
||
<span>{{devInfo.devNum}}</span>
|
||
</div>
|
||
<div class="dev_item c2" @click="showDetail(2)">
|
||
<img style="width: 45px;height: 36px" src="@/assets/images/towerManage/wifi.png">
|
||
<span>在线总数</span>
|
||
<span>{{devInfo.devOnline}}</span>
|
||
</div>
|
||
<div class="dev_item c3" @click="showDetail(3)">
|
||
<img style="width: 33px;height: 30px" src="@/assets/images/towerManage/collision-icon.png">
|
||
<span>防碰撞数量</span>
|
||
<span>{{devInfo.collideDevNum}}</span>
|
||
</div>
|
||
<div class="dev_item" @click="showDetail(4)">
|
||
<img style="width: 45px;height: 28px" src="@/assets/images/towerManage/video-icon.png">
|
||
<span>可视化数量</span>
|
||
<span>{{devInfo.videoCount}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dev_info center_info">
|
||
<div class="pageTitle">实时数据</div>
|
||
<div class="realData_list">
|
||
<div class="realData_item">
|
||
<img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/hook-icon.png"/>
|
||
<div class="item_info">
|
||
<p>今日吊次</p>
|
||
<p @click="showDetail(5)" style="cursor: pointer;">{{hookTime.todayCycleNum}}次</p>
|
||
<p><el-tooltip class="item" effect="light" placement="top-start">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
|
||
</el-tooltip>日环比 <span :style="{'color': hookTime.ratio<0 ? '#F68153':'#44D7B6'}">{{hookTime.ratio}}%</span>
|
||
<img v-if="hookTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
|
||
<img v-else src="@/assets/images/towerManage/down-icon.png" />
|
||
</p>
|
||
<p><i class="el-icon-warning-outline"></i>{{hookTime.weeksCycleNum?'本周共'+hookTime.weeksCycleNum+'吊次':'本周无吊次'}}</p>
|
||
</div>
|
||
<div id="echart1" ref="echart1" style="width: 131px;height: 110px;"></div>
|
||
</div>
|
||
<div class="realData_item">
|
||
<img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/alarm-icon.png">
|
||
<div class="item_info">
|
||
<p>今日报警</p>
|
||
<p @click="showDetail(6)" style="cursor: pointer;">{{alarmTime.todayAlarmNum}}次</p>
|
||
<p><el-tooltip class="item" effect="light" placement="top-start">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
|
||
</el-tooltip>日环比 <span :style="{'color': alarmTime.ratio<0 ? '#F68153':'#44D7B6'}">{{alarmTime.ratio}}%</span>
|
||
<img v-if="alarmTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
|
||
<img v-else src="@/assets/images/towerManage/down-icon.png" />
|
||
</p>
|
||
<p><i class="el-icon-warning-outline"></i>
|
||
{{alarmTime.weeksAlarmNum ? '本周报警'+alarmTime.weeksAlarmNum+'次':'本周无报警'}}
|
||
</p>
|
||
</div>
|
||
<div id="echart2" ref="echart2" style="width: 131px;height: 110px;"></div>
|
||
</div>
|
||
<div class="realData_item">
|
||
<img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/warming-icon.png">
|
||
<div class="item_info">
|
||
<p>今日违章</p>
|
||
<p @click="showDetail(7)" style="cursor: pointer;">{{violationTime.violationNum}}次</p>
|
||
<p><el-tooltip class="item" effect="light" placement="top-start">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
|
||
</el-tooltip>日环比 <span :style="{'color': violationTime.ratio<0 ? '#F68153':'#44D7B6'}">{{violationTime.ratio}}%</span>
|
||
<img v-if="violationTime.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
|
||
<img v-else src="@/assets/images/towerManage/down-icon.png" />
|
||
</p>
|
||
<p><i class="el-icon-warning-outline"></i>
|
||
{{violationTime.weeksViolationNum ? '本周违章'+violationTime.weeksViolationNum+'次':'本周无违章'}}
|
||
|
||
</p>
|
||
</div>
|
||
<div id="echart3" ref="echart3" style="width: 131px;height: 110px;"></div>
|
||
</div>
|
||
<div class="realData_item">
|
||
<img style="width: 52px;height: 52px;margin-right: 27px" src="@/assets/images/towerManage/echart-icon.png">
|
||
<div class="item_info">
|
||
<p>今日在线率</p>
|
||
<p @click="showDetail(8)" style="cursor: pointer;">{{devOnlinCount.todayDevOnlineNum}}%</p>
|
||
<p><el-tooltip class="item" effect="light" placement="top-start">
|
||
<i class="el-icon-warning-outline"></i>
|
||
<div slot="content">环比增长速度=（本期数－上期数）÷ 上期数×100%</div>
|
||
</el-tooltip>日环比 <span :style="{'color': devOnlinCount.ratio<0 ? '#F68153':'#44D7B6'}">{{devOnlinCount.ratio}}%</span>
|
||
<img v-if="devOnlinCount.ratio>=0" src="@/assets/images/towerManage/up-icon.png" />
|
||
<img v-else src="@/assets/images/towerManage/down-icon.png" />
|
||
</p>
|
||
<p><i class="el-icon-warning-outline"></i>{{devOnlinCount.weeksOnline ? "本周在线率"+devOnlinCount.weeksOnline+'%':'本周无在线'}}</p>
|
||
</div>
|
||
<div id="echart4" ref="echart4" style="width: 131px;height: 110px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dev_info">
|
||
<div class="pageTitle">报警违章</div>
|
||
<div class="search_select">
|
||
<el-select size="mini" v-model="value" @focus="setSelectBoxWidth" @change="changValue" placeholder="请选择">
|
||
<el-option
|
||
label="全部"
|
||
value="">
|
||
</el-option>
|
||
<el-option-group
|
||
v-for="group in options"
|
||
:key="group.label"
|
||
:label="group.label">
|
||
<el-option
|
||
v-for="item in group.options"
|
||
:key="item.projectSn"
|
||
:label="group.label == '项目' ? item.projectName:item.companyName"
|
||
:value="group.label == '项目' ? item.projectSn:item.companySn">
|
||
</el-option>
|
||
</el-option-group>
|
||
</el-select>
|
||
</div>
|
||
<div class="nav_list">
|
||
<div class="nav_item" :class="{'active_item': activeNav == 1}" @click="selectTowerAlarmViolationCount(1)">
|
||
今日
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav == 2}" @click="selectTowerAlarmViolationCount(2)">
|
||
本周
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav == 3}" @click="selectTowerAlarmViolationCount(3)">
|
||
本月
|
||
</div>
|
||
</div>
|
||
<div id="echart5" ref="echart5" @click="showAlarmDetail" style="height:calc(100% - 40px);width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="info_wrap left_info">
|
||
<div class="pageTitle">报警违章趋势</div>
|
||
<div class="nav_list">
|
||
<div class="nav_item" :class="{'active_item': activeNav2 == 1}" @click="selectTowerAlarmViolationTrendList(1)">
|
||
今日
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav2 == 2}" @click="selectTowerAlarmViolationTrendList(2)">
|
||
本周
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav2 == 3}" @click="selectTowerAlarmViolationTrendList(3)">
|
||
本月
|
||
</div>
|
||
</div>
|
||
<div id="echart6" ref="echart6" style="height:calc(100% - 40px);width: 100%"></div>
|
||
</div>
|
||
<div class="info_wrap right_info">
|
||
<div class="pageTitle">报警违章排行榜</div>
|
||
<div class="nav_list">
|
||
<div class="nav_item" :class="{'active_item': activeNav3 == 1}" @click="selectProjectTowerAlarmViolationList(1)">
|
||
全部
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav3 == 2}" @click="selectProjectTowerAlarmViolationList(2)">
|
||
报警排行
|
||
</div>
|
||
<div class="nav_item" :class="{'active_item': activeNav3 == 3}" @click="selectProjectTowerAlarmViolationList(3)">
|
||
违章排行
|
||
</div>
|
||
</div>
|
||
<div class="table_wrap">
|
||
<el-table
|
||
class="tables"
|
||
:data="tableData"
|
||
height="100%"
|
||
>
|
||
<el-table-column type="index" label="序号">
|
||
</el-table-column>
|
||
<el-table-column prop="projectName" label="项目名称">
|
||
</el-table-column>
|
||
<el-table-column v-if="activeNav3 != 3" width="120" align="center" prop="alarmNum" label="报警数">
|
||
</el-table-column>
|
||
<el-table-column v-if="activeNav3 != 2" width="120" align="center" prop="violationNum" label="违章数">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div style="width: 100%;height:100%" v-else>
|
||
<div class="nav_box">
|
||
<div class="nav_item" :class="{'active_item': currentIndex == index}" v-for="(item,index) in menuList" :key="index" @click="goPage(item,index)">
|
||
{{item.name}}
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 100%;background: #fff;">
|
||
<component v-if="isRefresh" :is="componentId" :sn="searchsn"></component>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:visible.sync="visibleDialog"
|
||
:title="dialogTitle"
|
||
>
|
||
<div class="tab_nav">
|
||
<div class="tab_item" :class="{'active_item': searchType == 1}" @click="changeSearchType(1)">组织机构</div>
|
||
<div class="tab_item" :class="{'active_item': searchType == 2}" @click="changeSearchType(2)">项目</div>
|
||
</div>
|
||
<el-table class="tables" :data="detailTableData" height="680">
|
||
<el-table-column prop="name" :label="searchType == 1 ? '组织机构名称':'项目名称'">
|
||
<template slot-scope="scope">
|
||
<span class="active_text" @click="showProjectPage(scope.row.sn,scope.row.name)">{{scope.row.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="devNum" v-if="tableType == 1 || tableType == 8" label="塔吊总数" align="center"></el-table-column>
|
||
<el-table-column prop="devOnline" v-if="tableType == 2" label="在线总数" align="center"></el-table-column>
|
||
<el-table-column prop="collideDevNum" v-if="tableType == 3" label="防碰撞数量" align="center"></el-table-column>
|
||
<el-table-column prop="videoNum" v-if="tableType == 4" label="可视化数量" align="center"></el-table-column>
|
||
<el-table-column prop="devOnlineNum" v-if="tableType == 8" label="在线数" align="center"></el-table-column>
|
||
<el-table-column prop="cycleNum" v-if="tableType == 5" label="吊次数" align="center"></el-table-column>
|
||
<el-table-column prop="alarmNum" v-if="tableType == 6" label="报警次数" align="center"></el-table-column>
|
||
<el-table-column prop="violationNum" v-if="tableType == 7" label="违章次数" align="center"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:visible.sync="visibleDialog2"
|
||
title="报警违章"
|
||
width="75%"
|
||
>
|
||
<div class="tab_nav">
|
||
<div class="tab_item" :class="{'active_item': searchType == 1}" @click="selectProjectTowerAlarmViolationCountList">组织机构</div>
|
||
<div class="tab_item" :class="{'active_item': searchType == 2}" @click="selectAllProjectTowerAlarmViolationList">项目</div>
|
||
</div>
|
||
<el-table class="tables" :data="detailTableData2" height="680">
|
||
<el-table-column prop="name" :label="searchType == 1 ? '组织机构名称':'项目名称'">
|
||
<template slot-scope="scope">
|
||
<span class="active_text" @click="showProjectPage(scope.row.sn,scope.row.name)">{{scope.row.name}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="limitNum" label="限位" align="center"></el-table-column>
|
||
<el-table-column prop="obliguityNum" label="倾角" align="center"></el-table-column>
|
||
<el-table-column prop="momentNum" label="力矩" align="center"></el-table-column>
|
||
<el-table-column prop="banRegionNum" label="限行区" align="center"></el-table-column>
|
||
<el-table-column prop="rotationNum" label="回转" align="center"></el-table-column>
|
||
<el-table-column prop="collisionNum" label="防碰撞" align="center"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
<areaTree class="left_menu" :videoType="0" @getTreeData="setTreeData"></areaTree>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import areaTree from "@/components/areaTree";
|
||
import echarts from 'echarts4';
|
||
import towerHome from '@/views/projectFront/towerCrane/home.vue';
|
||
import antiCollision from '@/views/projectFront/towerCrane/antiCollision.vue';
|
||
import monitoringStatistics from '@/views/projectFront/towerCrane/monitoringStatistics.vue';
|
||
import towerReportForm from '@/views/projectFront/towerCrane/reportForm.vue';
|
||
import towerBasicInfo from '@/views/projectFront/towerCrane/basicInfo.vue';
|
||
import towerNut from '@/views/projectFront/towerCrane/Nut.vue';
|
||
import towerJacking from '@/views/projectFront/towerCrane/Jacking.vue';
|
||
import siteVisualization from '@/views/projectFront/towerCrane/siteVisualization.vue';
|
||
import {
|
||
selectTowerCountApi,
|
||
selectTowerRingRatioCountApi,
|
||
selectProjectTowerAlarmViolationListApi,
|
||
selectTowerAlarmViolationCountApi,
|
||
selectTowerAlarmViolationTrendListApi,
|
||
selectTowerViolationRingRatioCountApi,
|
||
selectTowerWorkCycleRingRatioCountApi,
|
||
selectTowerAlarmRingRatioCountApi,
|
||
getProjectModuleAndMenuApi,
|
||
selectProjectTowerTotalCountListApi,
|
||
selectProjectTowerVideoCountListApi,
|
||
selectProjectTowerAlarmViolationCountListApi,
|
||
selectProjectTowerCountListApi,
|
||
selectProjectTowerViolationCountListApi,
|
||
selectProjectTowerAlarmCountListApi,
|
||
selectProjectTowerWorkCycleCountListApi,
|
||
selectAllProjectTowerVideoListApi,
|
||
selectAllProjectTowerListApi,
|
||
selectAllProjectTowerAlarmListApi,
|
||
selectAllProjectTowerViolationListApi,
|
||
selectAllProjectTowerAlarmViolationListApi,
|
||
selectAllProjectTowerWorkCycletListApi,
|
||
selectChildCompanyListApi
|
||
} from '@/assets/js/api/towerCrane.js'
|
||
import {
|
||
selectAllProjectInfoList
|
||
} from '@/assets/js/api/companyBigScreen.js'
|
||
export default {
|
||
components:{
|
||
areaTree,
|
||
towerHome,
|
||
antiCollision,
|
||
monitoringStatistics,
|
||
towerReportForm,
|
||
towerBasicInfo,
|
||
towerNut,
|
||
towerJacking,
|
||
siteVisualization
|
||
},
|
||
data(){
|
||
return{
|
||
searchType: 1,
|
||
options: [{
|
||
label: '组织机构',
|
||
options: []
|
||
},{
|
||
label: '项目',
|
||
options: []
|
||
}],
|
||
value: '',
|
||
detailTableData:[],
|
||
detailTableData2: [],
|
||
componentId: 'towerHome',
|
||
currentIndex: 0,
|
||
isRefresh: true,
|
||
dialogTitle: '',
|
||
visibleDialog: false,
|
||
visibleDialog2: false,
|
||
tableData:[{
|
||
index: '01',
|
||
name: '御花园一期项目',
|
||
num: 123
|
||
},{
|
||
index: '01',
|
||
name: '御花园一期项目',
|
||
num: 123
|
||
}],
|
||
activeNav: 1,
|
||
activeNav2: 1,
|
||
activeNav3: 1,
|
||
searchsn: '',
|
||
devInfo:{
|
||
collideDevNum: 0,
|
||
collideDevOnline: 0,
|
||
devNum: 0,
|
||
devOnline: 0,
|
||
videoCount: 0,
|
||
},
|
||
hookTime:{
|
||
todayCycleNum: 0,
|
||
ratio: '0.00',
|
||
weeksCycleNum: 0
|
||
},
|
||
hookTimeData:[0,0,0,0,0,0,0],
|
||
hookTimeData2:[],
|
||
alarmTime:{
|
||
todayAlarmNum: 0,
|
||
ratio: '0.00',
|
||
weeksAlarmNum: 0
|
||
},
|
||
alarmTimeData:[0,0,0,0,0,0,0],
|
||
alarmTimeData2:[],
|
||
violationTime:{
|
||
todayViolationNum: 0,
|
||
ratio: '0.00',
|
||
weeksViolationNum: 0
|
||
},
|
||
violationTimeData:[0,0,0,0,0,0,0],
|
||
violationTimeData2:[],
|
||
devOnlinCount:{
|
||
todayDevOnlineNum: 0,
|
||
ratio: '0.00',
|
||
weeksOnline: 0
|
||
},
|
||
devOnlinCountData:[0,0,0,0,0,0,0],
|
||
devOnlinCountData2:[0,0,0,0,0,0,0],
|
||
devOnlinCountData3: [],
|
||
tendencyData: [],
|
||
alarmViolationCount:{
|
||
banRegion: 1,
|
||
collision: 0,
|
||
limit: 0,
|
||
moment: 1,
|
||
obliguity: 0,
|
||
rotation: 0
|
||
},
|
||
menuList: [{
|
||
name: '首页',
|
||
path: 'towerHome'
|
||
},
|
||
// {
|
||
// name: '群塔防碰撞',
|
||
// path: 'antiCollision'
|
||
// },
|
||
{
|
||
name: '监控统计',
|
||
path: 'monitoringStatistics'
|
||
},{
|
||
name: '报表导出',
|
||
path: 'towerReportForm'
|
||
},{
|
||
name: '设备管理',
|
||
path: 'towerBasicInfo'
|
||
},
|
||
// {
|
||
// name: '螺栓列表',
|
||
// path: 'towerNut'
|
||
// },
|
||
// {
|
||
// name: '顶升记录',
|
||
// path: 'towerJacking'
|
||
// },
|
||
{
|
||
name: '工地可视化',
|
||
path: 'siteVisualization'
|
||
}],
|
||
isProject: false,
|
||
tableType: 0,
|
||
threeData: [],
|
||
detailArr: [],
|
||
projectTb: '组织机构名称'
|
||
}
|
||
},
|
||
watch: {
|
||
"$store.state.mapBackArr": function () {
|
||
this.initData();
|
||
},
|
||
},
|
||
created(){
|
||
this.initData()
|
||
},
|
||
methods:{
|
||
setSelectBoxWidth(e){
|
||
// console.log(e)
|
||
let dom = document.querySelector('.el-select-dropdown')
|
||
dom.style.width = '200px'
|
||
// console.dir(dom)
|
||
},
|
||
changValue(val){
|
||
console.log(val)
|
||
this.value = val
|
||
this.selectTowerAlarmViolationCount()
|
||
},
|
||
selectChildCompanyList(){
|
||
this.options[0].options = []
|
||
selectChildCompanyListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.options[0].options = res.result
|
||
})
|
||
// console.log(this.threeData,this.searchsn)
|
||
// console.log(this.getNodeDetail(this.threeData,this.searchsn))
|
||
},
|
||
selectAllProject(){
|
||
this.options[1].options = []
|
||
selectAllProjectInfoList({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.options[1].options = res.result
|
||
})
|
||
},
|
||
// 查询项目报警违章统计
|
||
selectAllProjectTowerAlarmViolationList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerAlarmViolationListApi({sn: this.searchsn, selectType: this.activeNav}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData2 = res.result
|
||
})
|
||
},
|
||
// 查询项目今日违章
|
||
selectAllProjectTowerViolationList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerViolationListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询项目今日报警
|
||
selectAllProjectTowerAlarmList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerAlarmListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询项目今日吊次
|
||
selectAllProjectTowerWorkCycletList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerWorkCycletListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询项目设备统计
|
||
selectAllProjectTowerList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询项目可视化数量
|
||
selectAllProjectTowerVideoList(){
|
||
this.searchType = 2
|
||
selectAllProjectTowerVideoListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 切换类型 1 组织机构 2 项目
|
||
changeSearchType(val){
|
||
if(this.dialogTitle == '可视化数量' && val == 1){
|
||
this.selectProjectTowerVideoCountList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '可视化数量' && val == 2){
|
||
this.selectAllProjectTowerVideoList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '吊次统计' && val == 1){
|
||
this.selectProjectTowerWorkCycleCountList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '吊次统计' && val == 2){
|
||
this.selectAllProjectTowerWorkCycletList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '报警统计' && val == 1){
|
||
this.selectProjectTowerAlarmCountList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '报警统计' && val == 2){
|
||
this.selectAllProjectTowerAlarmList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '违章统计' && val == 1){
|
||
this.selectProjectTowerViolationCountList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '违章统计' && val == 2){
|
||
this.selectAllProjectTowerViolationList()
|
||
console.log(this.searchType)
|
||
} else if(this.dialogTitle == '在线统计' && val == 1){
|
||
this.selectProjectTowerCountList()
|
||
console.log(this.searchType)
|
||
} else if(val == 1){
|
||
this.selectProjectTowerTotalCountList()
|
||
console.log(this.searchType)
|
||
} else if(val == 2){
|
||
this.selectAllProjectTowerList()
|
||
console.log(this.searchType)
|
||
}
|
||
},
|
||
setTreeData(data){
|
||
console.log(data)
|
||
this.threeData = data
|
||
},
|
||
getNodeDetail(data,sn){
|
||
// this.detailArr = []
|
||
data.forEach(item=>{
|
||
if(item.companySn == sn && item.list){
|
||
this.detailArr.push(item)
|
||
}
|
||
if(item.list){
|
||
this.getNodeDetail(item.list,sn)
|
||
}
|
||
})
|
||
|
||
},
|
||
showProjectPage(sn,projectName){
|
||
this.detailArr = []
|
||
this.getNodeDetail(this.threeData,sn)
|
||
console.log(this.detailArr)
|
||
this.searchsn = sn
|
||
let arr = this.$store.state.mapBackArr
|
||
this.projectTb = '组织机构名称'
|
||
if(this.detailArr.length == 0){
|
||
arr.push({
|
||
name: projectName,
|
||
isProject: true,
|
||
sn,
|
||
})
|
||
} else {
|
||
// if(this.detailArr[0].companyType == 4){
|
||
// this.projectTb = '项目名称'
|
||
// }
|
||
arr.push({
|
||
name: projectName,
|
||
sn,
|
||
})
|
||
}
|
||
this.$store.commit("setMapBackArr", arr)
|
||
this.initData()
|
||
this.visibleDialog = false
|
||
this.visibleDialog2 = false
|
||
},
|
||
// 弹窗展示 违章报警统计
|
||
showAlarmDetail(){
|
||
this.visibleDialog2 = true
|
||
this.selectProjectTowerAlarmViolationCountList()
|
||
},
|
||
// 违章报警统计
|
||
selectProjectTowerAlarmViolationCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerAlarmViolationCountListApi({sn: this.searchsn, selectType: this.activeNav}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData2 = res.result
|
||
})
|
||
},
|
||
// 查询设备统计
|
||
selectProjectTowerCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询今日吊次
|
||
selectProjectTowerWorkCycleCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerWorkCycleCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询今日违章
|
||
selectProjectTowerViolationCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerViolationCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 查询今日报警
|
||
selectProjectTowerAlarmCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerAlarmCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
// 弹窗
|
||
showDetail(val){
|
||
this.detailTableData = []
|
||
this.projectTb = '组织机构名称'
|
||
this.visibleDialog = true
|
||
switch(val) {
|
||
case 1:
|
||
this.dialogTitle = '塔吊总数';
|
||
this.tableType = 1
|
||
this.selectProjectTowerTotalCountList()
|
||
break;
|
||
case 2:
|
||
this.dialogTitle = '在线总数';
|
||
this.tableType = 2
|
||
this.selectProjectTowerTotalCountList()
|
||
break;
|
||
case 3:
|
||
this.dialogTitle = '防碰撞数量';
|
||
this.tableType = 3
|
||
this.selectProjectTowerTotalCountList()
|
||
break;
|
||
case 4:
|
||
this.dialogTitle = '可视化数量';
|
||
this.tableType = 4
|
||
this.selectProjectTowerVideoCountList()
|
||
break;
|
||
case 5:
|
||
this.dialogTitle = '吊次统计';
|
||
this.tableType = 5
|
||
this.selectProjectTowerWorkCycleCountList()
|
||
break;
|
||
case 6:
|
||
this.dialogTitle = '报警统计';
|
||
this.tableType = 6
|
||
this.selectProjectTowerAlarmCountList()
|
||
break;
|
||
case 7:
|
||
this.dialogTitle = '违章统计';
|
||
this.tableType = 7
|
||
this.selectProjectTowerViolationCountList()
|
||
break;
|
||
case 8:
|
||
this.dialogTitle = '在线统计';
|
||
this.tableType = 8
|
||
this.selectProjectTowerCountList()
|
||
break;
|
||
}
|
||
},
|
||
selectProjectTowerTotalCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerTotalCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
selectProjectTowerVideoCountList(){
|
||
this.searchType = 1
|
||
selectProjectTowerVideoCountListApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res)
|
||
this.detailTableData = res.result
|
||
})
|
||
},
|
||
goPage(data,index){
|
||
// this.$router.push(data.companyPath)
|
||
// this.$router.push({path: data.companyPath, query: {sn: this.searchsn}})
|
||
this.componentId = data.path
|
||
this.currentIndex = index
|
||
},
|
||
selectProjectTowerAlarmViolationList(type){
|
||
if(type){
|
||
this.activeNav3 = type
|
||
}
|
||
selectProjectTowerAlarmViolationListApi({sn: this.searchsn,selectType: this.activeNav2}).then(res=>{
|
||
console.log(res,'---报警违章排行')
|
||
if(res.code == 200){
|
||
// this.tendencyData = res.result ? res.result:[]
|
||
this.tableData = res.result
|
||
}
|
||
})
|
||
},
|
||
selectTowerAlarmViolationTrendList(type){
|
||
if(type){
|
||
this.activeNav2 = type
|
||
}
|
||
selectTowerAlarmViolationTrendListApi({sn: this.searchsn,selectType: this.activeNav2}).then(res=>{
|
||
console.log(res,'---报警违章趋势')
|
||
if(res.code == 200){
|
||
if(type==1){
|
||
this.tendencyData = res.result ? res.result:[]
|
||
}else if(type==2){
|
||
this.tendencyData = res.result ? res.result:[]
|
||
|
||
}else{
|
||
this.tendencyData = res.result ? res.result:[]
|
||
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart6()
|
||
})
|
||
}
|
||
})
|
||
},
|
||
selectTowerAlarmViolationCount(type){
|
||
if(type){
|
||
this.activeNav = type
|
||
}
|
||
selectTowerAlarmViolationCountApi({sn: this.value ? this.value:this.searchsn,selectType: this.activeNav}).then(res=>{
|
||
console.log(res, '---违章报警统计')
|
||
if(res.code == 200){
|
||
this.alarmViolationCount = res.result
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart5()
|
||
})
|
||
})
|
||
},
|
||
selectTowerRingRatioCount(){
|
||
selectTowerRingRatioCountApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res.result, '今日在线率')
|
||
this.devOnlinCount = {
|
||
todayDevOnlineNum: (res.result.count.todayDevOnlineNum&&res.result.count.todayDevOnlineNum) ? ((res.result.count.todayDevOnlineNum/res.result.count.devNum).toFixed(4))*100:0,
|
||
ratio: res.result.count.ringRatio.toFixed(2),
|
||
weeksOnline: 0
|
||
}
|
||
if(res.result.list.length>0){
|
||
this.devOnlinCountData = []
|
||
this.devOnlinCountData2 = []
|
||
this.devOnlinCountData3=[]
|
||
let arr = []
|
||
res.result.list.forEach(item=>{
|
||
this.devOnlinCountData3.push(item.titleName)
|
||
this.devOnlinCountData.push(item.devOnlineNum)
|
||
this.devOnlinCountData2.push(item.devNum)
|
||
arr.push((item.devOnlineNum&&item.devNum) ? item.devOnlineNum/item.devNum:0)
|
||
})
|
||
console.log(arr)
|
||
let average = 0
|
||
arr.forEach(item=>{
|
||
average += item
|
||
})
|
||
this.devOnlinCount.weeksOnline = (average&&arr.length) ? (((average/arr.length)*100).toFixed(2)):'0.00'
|
||
let num = this.devOnlinCountData3.length
|
||
for(let i = 0; i<(7-num);i++){
|
||
// console.log(this.devOnlinCountData3.length)
|
||
this.devOnlinCountData3.push('')
|
||
}
|
||
} else {
|
||
this.devOnlinCountData3=[]
|
||
this.devOnlinCountData=[]
|
||
this.devOnlinCountData2=[]
|
||
this.devOnlinCountData3 = []
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart4()
|
||
})
|
||
})
|
||
},
|
||
selectTowerViolationRingRatioCount(){
|
||
selectTowerViolationRingRatioCountApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res.result, '今日违章')
|
||
this.violationTime = {
|
||
violationNum: res.result.count.todayViolationNum,
|
||
ratio: res.result.count.ringRatio.toFixed(2),
|
||
weeksViolationNum: 0
|
||
}
|
||
if(res.result.list.length>0){
|
||
this.violationTimeData = []
|
||
this.violationTimeData2 = []
|
||
res.result.list.forEach(item=>{
|
||
this.violationTimeData.push(item.violationNum)
|
||
this.violationTimeData2.push(item.titleName)
|
||
this.violationTime.weeksViolationNum += item.violationNum
|
||
})
|
||
let num = this.violationTimeData2.length
|
||
for(let i = 0;i<(7-num); i++){
|
||
this.violationTimeData2.push('')
|
||
}
|
||
} else {
|
||
this.violationTimeData = []
|
||
this.violationTimeData2 = []
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart3()
|
||
})
|
||
})
|
||
},
|
||
selectTowerWorkCycleRingRatioCount(){
|
||
selectTowerWorkCycleRingRatioCountApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res, '----实时数据吊次')
|
||
// let ratio = '0.00'
|
||
// if(res.result.count.todayCycleNum && res.result.count.yesterdayCycleNum){
|
||
// ratio = (((res.result.count.todayCycleNum - res.result.count.yesterdayCycleNum)/res.result.count.yesterdayCycleNum)*100).toFixed(2)
|
||
// }
|
||
this.hookTime = {
|
||
todayCycleNum: res.result.count.todayCycleNum,
|
||
ratio: res.result.count.ringRatio.toFixed(2),
|
||
weeksCycleNum: 0
|
||
}
|
||
if(res.result.list.length>0){
|
||
this.hookTimeData = []
|
||
this.hookTimeData2 = []
|
||
res.result.list.forEach(item=>{
|
||
this.hookTimeData.push(item.cycleNum)
|
||
this.hookTimeData2.push(item.titleName)
|
||
this.hookTime.weeksCycleNum += item.cycleNum
|
||
})
|
||
let num = this.hookTimeData2.length
|
||
for(let i = 0;i<(7-num); i++){
|
||
this.hookTimeData2.push('')
|
||
}
|
||
} else {
|
||
this.hookTimeData = []
|
||
this.hookTimeData2 = []
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart1()
|
||
})
|
||
|
||
})
|
||
},
|
||
selectTowerCount(){
|
||
selectTowerCountApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res.result, '----设备情况')
|
||
if(res.code == 200){
|
||
this.devInfo = res.result
|
||
}
|
||
})
|
||
},
|
||
selectTowerAlarmRingRatioCount(){
|
||
selectTowerAlarmRingRatioCountApi({sn: this.searchsn}).then(res=>{
|
||
console.log(res.result, '----今日报警')
|
||
this.alarmTime = {
|
||
todayAlarmNum: res.result.count.todayAlarmNum,
|
||
ratio: res.result.count.ringRatio.toFixed(2),
|
||
weeksAlarmNum: 0
|
||
}
|
||
if(res.result.list.length>0){
|
||
this.alarmTimeData = []
|
||
this.alarmTimeData2 = []
|
||
res.result.list.forEach(item=>{
|
||
this.alarmTimeData.push(item.alarmNum)
|
||
this.alarmTimeData2.push(item.titleName)
|
||
this.alarmTime.weeksAlarmNum += item.alarmNum
|
||
})
|
||
let num = this.alarmTimeData2.length
|
||
for(let i = 0;i<(7-num); i++){
|
||
this.alarmTimeData2.push('')
|
||
}
|
||
}else{
|
||
this.alarmTimeData = []
|
||
this.alarmTimeData2 = []
|
||
}
|
||
this.$nextTick(()=>{
|
||
this.createEchart2()
|
||
})
|
||
})
|
||
},
|
||
initData(){
|
||
console.log('执行',720);
|
||
this.backArr = this.$store.state.mapBackArr;
|
||
this.isProject = false
|
||
if (this.backArr.length > 0) {
|
||
this.searchsn = this.backArr[this.backArr.length - 1].sn;
|
||
if(this.backArr[this.backArr.length - 1].isProject){
|
||
this.isProject = true
|
||
this.isRefresh = false
|
||
this.$nextTick(()=>{
|
||
this.isRefresh = true
|
||
})
|
||
// getProjectModuleAndMenuApi({projectSn: this.searchsn}).then(res=>{
|
||
// // console.log(res)
|
||
// res.result.forEach(item=>{
|
||
// if(item.moduleName == '塔吊管理系统'){
|
||
// this.menuList = []
|
||
// item.menuList.forEach(itm=>{
|
||
// if(itm.priority < 1000){
|
||
// this.menuList.push(itm)
|
||
// }
|
||
// })
|
||
// this.goPage(this.menuList[0],0)
|
||
// console.log(this.menuList)
|
||
// }
|
||
// })
|
||
// })
|
||
} else {
|
||
this.isProject = false
|
||
}
|
||
} else {
|
||
switch (this.$store.state.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn = this.$store.state.userInfo.headquartersSn;
|
||
break;
|
||
case 3:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
case 4:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
case 7:
|
||
this.searchsn = this.$store.state.userInfo.sn;
|
||
break;
|
||
}
|
||
}
|
||
if(!this.isProject){
|
||
this.value = ''
|
||
this.selectChildCompanyList()
|
||
this.selectAllProject()
|
||
this.selectTowerCount()
|
||
this.selectTowerWorkCycleRingRatioCount()
|
||
this.selectTowerAlarmRingRatioCount()
|
||
this.selectTowerViolationRingRatioCount()
|
||
this.selectTowerRingRatioCount()
|
||
this.selectTowerAlarmViolationCount()
|
||
this.selectTowerAlarmViolationTrendList()
|
||
this.selectProjectTowerAlarmViolationList()
|
||
}
|
||
console.log(this.backArr)
|
||
},
|
||
createEchart1(){
|
||
let echart1 = echarts.init(this.$refs['echart1'])
|
||
let options = {
|
||
grid:{
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
top: '60%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: this.hookTimeData2
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: this.hookTimeData,
|
||
name: '吊次',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
barGap: '-100%',
|
||
silent: true,
|
||
itemStyle: {
|
||
color: '#5181F6'
|
||
}
|
||
},
|
||
// {
|
||
// data: [180, 200, 150, 80, 70, 110, 130],
|
||
// name: '总数',
|
||
// barWidth: 12,
|
||
// type: 'bar',
|
||
// itemStyle: {
|
||
// color: 'rgba(81, 129, 246, 0.1)'
|
||
// }
|
||
// }
|
||
]
|
||
}
|
||
echart1.setOption(options)
|
||
},
|
||
createEchart2(){
|
||
let echart2 = echarts.init(this.$refs['echart2'])
|
||
let options = {
|
||
grid:{
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
top: '60%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: this.alarmTimeData2
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: this.alarmTimeData,
|
||
type: 'line',
|
||
itemStyle: {
|
||
color: '#F67F51'
|
||
},
|
||
areaStyle:{
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0, color: 'rgba(246, 127, 81, 0.1)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: 'rgba(246, 127, 81, 0)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
smooth: true,
|
||
symbol: 'none',
|
||
}
|
||
]
|
||
}
|
||
echart2.setOption(options)
|
||
},
|
||
createEchart3(){
|
||
let echart3 = echarts.init(this.$refs['echart3'])
|
||
let options = {
|
||
grid:{
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
top: '60%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: this.violationTimeData2
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: this.violationTimeData,
|
||
type: 'line',
|
||
itemStyle: {
|
||
color: '#F67F51'
|
||
},
|
||
areaStyle:{
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0, color: 'rgba(246, 127, 81, 0.1)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: 'rgba(246, 127, 81, 0)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
smooth: true,
|
||
symbol: 'none',
|
||
}
|
||
]
|
||
}
|
||
echart3.setOption(options)
|
||
},
|
||
createEchart4(){
|
||
let echart4 = echarts.init(this.$refs['echart4'])
|
||
let options = {
|
||
grid:{
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
top: '60%',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
show: false,
|
||
data: this.devOnlinCountData3
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: this.devOnlinCountData,
|
||
name: '在线数',
|
||
type: 'bar',
|
||
barWidth: 12,
|
||
barGap: '-100%',
|
||
silent: true,
|
||
itemStyle: {
|
||
color: '#44D7B6'
|
||
}
|
||
},
|
||
{
|
||
data: this.devOnlinCountData2,
|
||
name: '总数',
|
||
barWidth: 12,
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: 'rgba(68, 215, 182, 0.1)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
echart4.setOption(options)
|
||
},
|
||
createEchart5(){
|
||
let maxCount = 0
|
||
for(let key in this.alarmViolationCount){
|
||
if(this.alarmViolationCount[key]>maxCount){
|
||
maxCount = this.alarmViolationCount[key]
|
||
}
|
||
}
|
||
let _this = this
|
||
let echart5 = echarts.init(this.$refs['echart5'])
|
||
let options = {
|
||
// tooltip: {
|
||
// // trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'shadow'
|
||
// }
|
||
// },
|
||
radar: {
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{ name: '限位', max: maxCount },
|
||
{ name: '防碰撞', max: maxCount },
|
||
{ name: '回转', max: maxCount },
|
||
{ name: '限行区', max: maxCount },
|
||
{ name: '力矩', max: maxCount },
|
||
{ name: '倾角', max: maxCount }
|
||
],
|
||
name: {
|
||
formatter:function(value,a){
|
||
console.log(value)
|
||
let text = '0'
|
||
if(value == '限位'){
|
||
text = _this.alarmViolationCount.limit
|
||
} else if(value == '防碰撞'){
|
||
text = _this.alarmViolationCount.collision
|
||
} else if(value == '回转'){
|
||
text = _this.alarmViolationCount.rotation
|
||
} else if(value == '限行区'){
|
||
text = _this.alarmViolationCount.banRegion
|
||
} else if(value == '力矩'){
|
||
text = _this.alarmViolationCount.moment
|
||
} else if(value == '倾角'){
|
||
text = _this.alarmViolationCount.collision
|
||
}
|
||
return '{b|' + value + '}'+ '：' + '{a|' + text + '}'
|
||
},
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
color: '#555555',
|
||
fontSize: 20,
|
||
},
|
||
b: {
|
||
color: '#555555',
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
axisLine:{
|
||
show: false
|
||
},
|
||
splitLine:{
|
||
lineStyle:{
|
||
color: 'rgba(246, 127, 81,0.2)',
|
||
width: 2.2,
|
||
}
|
||
},
|
||
splitArea:{
|
||
show: false
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'radar',
|
||
symbolSize: 7,
|
||
data: [
|
||
// { name: '限位：', max: maxCount },
|
||
// { name: '防碰撞：', max: maxCount },
|
||
// { name: '回转：', max: maxCount },
|
||
// { name: '限行区：', max: maxCount },
|
||
// { name: '力矩：', max: maxCount },
|
||
// { name: '倾角：', max: maxCount }
|
||
{
|
||
value: [this.alarmViolationCount.limit, this.alarmViolationCount.collision, this.alarmViolationCount.rotation, this.alarmViolationCount.banRegion, this.alarmViolationCount.moment, this.alarmViolationCount.collision],
|
||
name: ''
|
||
}
|
||
],
|
||
areaStyle:{
|
||
color: {
|
||
type: 'radial',
|
||
x: 0.5,
|
||
y: 0.5,
|
||
r: 0.5,
|
||
colorStops: [{
|
||
offset: 0, color: 'rgba(246, 127, 81, 0.01)' // 0% 处的颜色
|
||
}, {
|
||
offset: 1, color: 'rgba(246, 127, 81, 0.5)' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
lineStyle:{
|
||
color: 'rgba(246, 127, 81, 1)',
|
||
width: 3
|
||
}
|
||
}
|
||
]
|
||
}
|
||
// echart5.off('click')
|
||
// echart5.on('click',function(){
|
||
// _this.visibleDialog2 = true
|
||
// _this.selectProjectTowerAlarmViolationCountList()
|
||
// })
|
||
echart5.setOption(options)
|
||
},
|
||
makeDate() {
|
||
var new_Date = new Date()
|
||
var timesStamp = new_Date.getTime();
|
||
var currenDay = new_Date.getDay();
|
||
var dates = [];
|
||
for(var i = 0; i < 7; i++) {
|
||
dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)).toLocaleDateString().replace('/', '-').replace('/', '-'));
|
||
}
|
||
return dates
|
||
},
|
||
getMounth(){
|
||
let now = new Date()
|
||
let year = now.getFullYear();
|
||
let month = now.getMonth() + 1;
|
||
let d = new Date(year,month,0);
|
||
let current_month_num = d.getDate();
|
||
let current_month = []
|
||
for(let i = 1;i <= current_month_num; i++){
|
||
let day = now.setDate(i);
|
||
let itemDay = new Date(day)
|
||
let y = itemDay.getFullYear();
|
||
let m = itemDay.getMonth() + 1;
|
||
let d = itemDay.getDate();
|
||
m < 10 ? m = '0' + m : m;
|
||
d < 10 ? d = '0' + d : d;
|
||
current_month.push(y+'-'+m+'-'+d)
|
||
}
|
||
return current_month
|
||
},
|
||
createEchart6(){
|
||
let titleData = [],
|
||
dataList = [],
|
||
dataList2 = []
|
||
this.tendencyData.forEach(item=>{
|
||
if(this.activeNav2 == 1){
|
||
titleData.push(item.titleName+':00')
|
||
} else {
|
||
titleData.push(item.titleName)
|
||
}
|
||
dataList.push(item.alarmNum)
|
||
dataList2.push(item.violationNum)
|
||
})
|
||
if(this.activeNav2 == 2){
|
||
// titleData = [...new Set([...titleData,...this.makeDate()])]
|
||
} else if(this.activeNav2 == 3){
|
||
titleData = [...new Set([...titleData,...this.getMounth()])]
|
||
}
|
||
console.log(titleData)
|
||
|
||
let echart6 = echarts.init(this.$refs['echart6'])
|
||
let options = {
|
||
grid:{
|
||
bottom: 80,
|
||
left: 50,
|
||
right: 50,
|
||
top: 50,
|
||
},
|
||
legend:{
|
||
type: 'plain',
|
||
left: 50,
|
||
itemHeight: 3,
|
||
itemWidth: 9,
|
||
itemGap: 50
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
// show: false,
|
||
data: titleData,
|
||
axisTick:{
|
||
show: false
|
||
},
|
||
axisLine:{
|
||
show: false
|
||
},
|
||
axisLabel:{
|
||
interval: 0,
|
||
rotate: this.activeNav2 == 3 ? 60:0
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine:{
|
||
show: false
|
||
},
|
||
axisTick:{
|
||
show: false
|
||
},
|
||
splitLine:{
|
||
lineStyle:{
|
||
type: 'dashed',
|
||
color: '#D0D0D0',
|
||
width: 0.6
|
||
}
|
||
}
|
||
// show: false
|
||
},
|
||
series: [
|
||
{
|
||
data: dataList,
|
||
name: '报警',
|
||
type: 'bar',
|
||
barWidth: 16,
|
||
silent: true,
|
||
itemStyle: {
|
||
color: '#5181F6'
|
||
}
|
||
},
|
||
{
|
||
data: dataList2,
|
||
name: '违章',
|
||
barWidth: 16,
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: 'rgba(246, 127, 81, 0.6)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
echart6.setOption(options)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.towerManage_box{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.top{
|
||
display: flex;
|
||
height: calc(50% - 10px);
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
.dev_info{
|
||
background: #fff;
|
||
width: 25%;
|
||
padding: 15px;
|
||
position: relative;
|
||
}
|
||
.center_info{
|
||
flex: 1;
|
||
margin: 0 20px;
|
||
}
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
height: calc(50% - 10px);
|
||
.info_wrap{
|
||
background: #fff;
|
||
padding: 15px;
|
||
}
|
||
.left_info{
|
||
flex: 1;
|
||
margin-right: 20px;
|
||
position: relative;
|
||
}
|
||
.right_info{
|
||
width: 30%;
|
||
position: relative;
|
||
.table_wrap{
|
||
height: calc(100% - 50px);
|
||
margin-top: 28px;
|
||
}
|
||
.tables{
|
||
min-height: auto;
|
||
}
|
||
}
|
||
}
|
||
.dev_list{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.dev_item{
|
||
width: 50%;
|
||
height: 50%;
|
||
display: flex;
|
||
position: relative;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
img{
|
||
margin-bottom: 18px;
|
||
z-index: 1;
|
||
}
|
||
span{
|
||
margin-bottom: 8px;
|
||
z-index: 1;
|
||
}
|
||
span:nth-of-type(2){
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.dev_item::before{
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
background: linear-gradient(to bottom, rgba(#5181F6,0.1) , #fff);
|
||
width: 120px;
|
||
height: 145px;
|
||
// opacity: 0.3;
|
||
border-radius: 39px;
|
||
}
|
||
.c2::before{
|
||
background: linear-gradient(to bottom, rgba(#44D7B6,0.1) , #fff);
|
||
}
|
||
.c3::before{
|
||
background: linear-gradient(to bottom, rgba(#F67F51,0.1) , #fff);
|
||
}
|
||
}
|
||
.realData_list{
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
height: calc(100% - 40px);
|
||
.realData_item{
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.item_info{
|
||
margin-right: 20px;
|
||
i{
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
p:nth-child(1){
|
||
margin-bottom: 10px;
|
||
}
|
||
p:nth-child(2){
|
||
margin-bottom: 10px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
p:nth-child(3){
|
||
margin-bottom: 8px;
|
||
position: relative;
|
||
color: #909399;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
span{
|
||
font-size: 20px;
|
||
margin-right: 10px;
|
||
margin-left: 16px;
|
||
}
|
||
img{
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
.info{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
background: #fff;
|
||
}
|
||
}
|
||
p:nth-child(4){
|
||
color: #909399;
|
||
i{
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.nav_list{
|
||
display: flex;
|
||
position: absolute;
|
||
right: 26px;
|
||
top: 12px;
|
||
z-index: 10;
|
||
.nav_item{
|
||
padding: 0 10px;
|
||
background: rgba(#5181F6,0.2);
|
||
height: 25px;
|
||
line-height: 25px;
|
||
margin-right: 4px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.active_item{
|
||
background: #5181F6;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.left_menu{
|
||
z-index: 10;
|
||
}
|
||
.nav_box{
|
||
display: flex;
|
||
.nav_item{
|
||
padding: 10px 20px;
|
||
background: #f7f9fd;
|
||
color: #7f85a0;
|
||
cursor: pointer;
|
||
}
|
||
.active_item{
|
||
background: #fff;
|
||
color: #000;
|
||
}
|
||
}
|
||
.active_text{
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
.tab_nav{
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.tab_item{
|
||
padding: 6px 10px;
|
||
background: rgba(#5181F6,0.2);
|
||
margin-right: 6px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
}
|
||
.active_item{
|
||
background: #5181F6;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.search_select{
|
||
position: absolute;
|
||
left: 97px;
|
||
top: 12px;
|
||
}
|
||
|
||
|
||
</style> |