大屏地图修改首页修改，变电，线路数据修改
This commit is contained in:
parent
f68e9f4ea3
commit
ff4cd5c299
|
|
@ -2,7 +2,7 @@ import request from '@/utils/request'
|
|||
|
||||
// 首页设备数据
|
||||
export const queryDeviceInfoApi = (data) => {
|
||||
return request.get(`/base/screen/home/getDeviceModelData`, {
|
||||
return request.get(`/base/screen/homeTwo/getDeviceModelDataAmount`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
@ -27,6 +27,12 @@ export const queryRiskInfoApi = (data) => {
|
|||
params: data
|
||||
})
|
||||
}
|
||||
// 首页安全隐患预测预警
|
||||
export const getWarnPredictionRecord = (data) => {
|
||||
return request.get(`/base/screen/homeTwo/getWarnPredictionRecord`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询工作台
|
||||
export const queryTableApi = (data) => {
|
||||
|
|
@ -39,3 +45,10 @@ export const queryTableApi = (data) => {
|
|||
export const editTableApi = (data) => {
|
||||
return request.post(`/base/screen/home/setDeskConfig`, data)
|
||||
}
|
||||
|
||||
// 根据工程id获取大屏首页地图工程信息
|
||||
export const getProjectAndDeviceById = (data) => {
|
||||
return request.get(`/base/screen/homeTwo/getProjectAndDeviceById`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,18 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 首页安全隐患预测预警 - 分页
|
||||
export const getWarnPredictionRecordAll = (data) => {
|
||||
return request.get(`/base/screen/homeTwo/getWarnPredictionRecordAll`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
// 首页安全隐患预测预警 - 不分页
|
||||
export const getWarnPredictionRecord = (data) => {
|
||||
return request.get(`/base/screen/homeTwo/getWarnPredictionRecord`, {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 首页施工风险数据 - 分页
|
||||
export const queryRiskInfoApi = (data) => {
|
||||
return request.get(`/base/screen/home/getDeviceWarnRecordPage`, {
|
||||
|
|
@ -23,7 +36,7 @@ export const queryProjListApi = (data) => {
|
|||
|
||||
/** 设备列表查询 */
|
||||
export const queryDeviceListApi = (data) => {
|
||||
return request.get('/base/tbDevice/list', {
|
||||
return request.get('/base/screen/homeTwo/getDeviceModelDataAll', {
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
|
|
@ -173,6 +173,7 @@ import Pagination from '../Pagination/index.vue'
|
|||
import {
|
||||
querySenseDeviceInfoApi,
|
||||
queryRiskInfoApi,
|
||||
getWarnPredictionRecordAll,
|
||||
queryProjListApi,
|
||||
queryDeviceListApi
|
||||
} from '@/api/tableApis'
|
||||
|
|
@ -212,6 +213,7 @@ export default {
|
|||
methods: {
|
||||
querySenseDeviceInfoApi,
|
||||
queryRiskInfoApi,
|
||||
getWarnPredictionRecordAll,
|
||||
queryProjListApi,
|
||||
queryDeviceListApi,
|
||||
setOpen(v) {
|
||||
|
|
@ -226,7 +228,7 @@ export default {
|
|||
this.columnList = [
|
||||
{ t_props: 'devName', t_label: '设备名称' },
|
||||
{ t_props: 'devCode', t_label: '设备编号' },
|
||||
{ t_props: 'bdName', t_label: '边代名称' },
|
||||
{ t_props: 'proName', t_label: '所属工程' },
|
||||
{ t_props: 'devStatusName', t_label: '工作状态' },
|
||||
]
|
||||
this.currentFunc = this.queryDeviceListApi
|
||||
|
|
@ -236,7 +238,7 @@ export default {
|
|||
this.columnList = [
|
||||
{ t_props: 'devName', t_label: '设备名称' },
|
||||
{ t_props: 'devCode', t_label: '设备编号' },
|
||||
{ t_props: 'bdName', t_label: '边代名称' },
|
||||
{ t_props: 'proName', t_label: '所属工程' },
|
||||
{ t_props: 'devStatusName', t_label: '工作状态' },
|
||||
]
|
||||
this.currentFunc = this.queryDeviceListApi
|
||||
|
|
@ -396,11 +398,11 @@ export default {
|
|||
case 12:
|
||||
this.columnList = [
|
||||
{ t_props: 'proName', t_label: '工程名称' },
|
||||
{ t_props: 'warnTime', t_label: '预警时间' },
|
||||
{ t_props: 'warnType', t_label: '预警内容' },
|
||||
{ t_props: 'createTime', t_label: '预警时间' },
|
||||
{ t_props: 'content', t_label: '预警内容' },
|
||||
]
|
||||
this.currentFunc = this.queryRiskInfoApi
|
||||
this.getTableList(this.queryRiskInfoApi)
|
||||
this.currentFunc = this.getWarnPredictionRecordAll
|
||||
this.getTableList(this.getWarnPredictionRecordAll)
|
||||
break;
|
||||
case 13:
|
||||
this.columnList = [
|
||||
|
|
|
|||
|
|
@ -387,6 +387,7 @@ export default {
|
|||
{
|
||||
show: true,
|
||||
map: 'china',
|
||||
type: 'map',
|
||||
aspectScale: 0.8,
|
||||
zoom: this.zoom,
|
||||
roam: true, // 是否允许缩放
|
||||
|
|
@ -430,6 +431,37 @@ export default {
|
|||
},
|
||||
zlevel: 1,
|
||||
regions: this.geoVal || [],
|
||||
tooltip: {
|
||||
show:true,
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
console.log(params)
|
||||
if (params.componentSubType === 'scatter') {
|
||||
let className = 'itemColor1 itemColor'
|
||||
let html = `
|
||||
<div
|
||||
id="pop-tooltip"
|
||||
style="
|
||||
width:260px;height:140px;border-radius: 15px;
|
||||
background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
|
||||
padding:12px;position: relative;display: flex;flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
|
||||
<div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
|
||||
<div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
|
||||
<span style="padding-bottom: 5px">省份：${params.data.province}</span>
|
||||
<span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
|
||||
<span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
|
||||
</div>
|
||||
</div>`
|
||||
return html
|
||||
}
|
||||
// 可以在这里编写轮播的格式化内容
|
||||
// return params.name + ': ' + params.value;
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
map: 'china',
|
||||
|
|
@ -450,7 +482,6 @@ export default {
|
|||
silent: true,
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: 'item',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -473,7 +504,6 @@ export default {
|
|||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'click',
|
||||
alwaysShowContent: true,
|
||||
showDelay: 0, //浮层显示的延迟
|
||||
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
|
||||
|
|
@ -481,25 +511,26 @@ export default {
|
|||
className: 'iconMap',
|
||||
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
|
||||
formatter: function (params) {
|
||||
console.log(params)
|
||||
if (params.componentSubType === 'scatter') {
|
||||
let className = 'itemColor1 itemColor'
|
||||
let html = `
|
||||
<div
|
||||
id="pop-tooltip"
|
||||
style="
|
||||
width:260px;height:140px;border-radius: 15px;
|
||||
background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
|
||||
padding:12px;position: relative;display: flex;flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
|
||||
<div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
|
||||
<div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
|
||||
<span style="padding-bottom: 5px">省份：${params.data.province}</span>
|
||||
<span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
|
||||
<span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
|
||||
</div>
|
||||
</div>`
|
||||
<div
|
||||
id="pop-tooltip"
|
||||
style="
|
||||
width:260px;height:140px;border-radius: 15px;
|
||||
background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
|
||||
padding:12px;position: relative;display: flex;flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
|
||||
<div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
|
||||
<div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
|
||||
<span style="padding-bottom: 5px">省份：${params.data.province}</span>
|
||||
<span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
|
||||
<span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
|
||||
</div>
|
||||
</div>`
|
||||
return html
|
||||
}
|
||||
},
|
||||
|
|
@ -722,6 +753,7 @@ export default {
|
|||
|
||||
this.mapEcharts.on('click', function (params) {
|
||||
if (params.componentSubType === 'scatter') {
|
||||
// console.log(params)
|
||||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
// 点击变黄
|
||||
option.series[0].data.forEach((item) => {
|
||||
|
|
@ -736,6 +768,7 @@ export default {
|
|||
that.mapEcharts.setOption(option)
|
||||
that.$emit('closeMap', { value: params.data })
|
||||
}
|
||||
|
||||
/*if (params.seriesType === 'scatter' && !params.name) {
|
||||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
// 点击变黄
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
<span @click="toggleDialog(7)">拉力：</span>
|
||||
</div>
|
||||
<div class="rig-counts">
|
||||
<span>{{ senseData.towerRakeMonitor }}°</span>
|
||||
<span>{{ senseData.towerWaterMonitor }}N</span>
|
||||
<span>{{ senseData.towerRakeMonitor }}个</span>
|
||||
<span>{{ senseData.towerWaterMonitor }}个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<span @click="toggleDialog(8)">拉力：</span>
|
||||
</div>
|
||||
<div class="rig-counts">
|
||||
<span>{{ senseData.leadStrainMonitor }}N</span>
|
||||
<span>{{ senseData.leadStrainMonitor }}个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@
|
|||
:row-style="rowStyle"
|
||||
>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
prop="proName"
|
||||
label="工程名称"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
label="日期"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
prop="content"
|
||||
label="内容"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
|
|
@ -42,6 +42,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getWarnPredictionRecord
|
||||
} from '@/api/home/home'
|
||||
export default {
|
||||
components: {
|
||||
|
||||
|
|
@ -50,61 +53,69 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tableList: [
|
||||
/* {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, {
|
||||
date: 'xxx工程',
|
||||
name: '2024.1.1 12:23',
|
||||
address: '明天有大风'
|
||||
}, */
|
||||
// {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// }, {
|
||||
// date: 'xxx工程',
|
||||
// name: '2024.1.1 12:23',
|
||||
// address: '明天有大风'
|
||||
// },
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getRiskData()
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getRiskData() {
|
||||
let param = {
|
||||
startTime:this.timeFormat(),
|
||||
endTime:this.timeFormat(),
|
||||
}
|
||||
let res = await getWarnPredictionRecord(param)
|
||||
this.tableList = res.data;
|
||||
},
|
||||
toggleDialog(v) {
|
||||
this.$emit('openDialog', { order: v })
|
||||
},
|
||||
|
|
@ -119,6 +130,29 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
timeFormat() {
|
||||
let date = new Date();
|
||||
// 若传入时间为假值，则取当前时间
|
||||
let formatStr = 'yyyy-mm-dd';
|
||||
const timeSource = {
|
||||
'y': date.getFullYear().toString(), // 年
|
||||
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
|
||||
'd': date.getDate().toString().padStart(2, '0'), // 日
|
||||
'h': date.getHours().toString().padStart(2, '0'), // 时
|
||||
'M': date.getMinutes().toString().padStart(2, '0'), // 分
|
||||
's': date.getSeconds().toString().padStart(2, '0') // 秒
|
||||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||||
}
|
||||
for (const key in timeSource) {
|
||||
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
|
||||
if (ret) {
|
||||
// 年可能只需展示两位
|
||||
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
|
||||
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
|
||||
}
|
||||
}
|
||||
return formatStr
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -139,7 +173,7 @@ export default {
|
|||
border-radius: 5px;
|
||||
border: 1px solid #EFF2FC;
|
||||
box-shadow: 2px 2px 2px #D9E0F3;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
|
||||
.inner-tit{
|
||||
|
|
@ -161,17 +195,15 @@ export default {
|
|||
margin-bottom: 15px;
|
||||
|
||||
span{
|
||||
|
||||
color: #757B87;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.risk-table{
|
||||
|
||||
height: 88%;
|
||||
width: 100%;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
:show-header="false"
|
||||
:row-style="rowStyle"
|
||||
>
|
||||
<el-table-column prop="projectName" label="" align="center">
|
||||
<el-table-column prop="devName" label="" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="warnTime" label="" align="center">
|
||||
</el-table-column>
|
||||
|
|
@ -136,7 +136,9 @@ export default {
|
|||
}
|
||||
|
||||
.build-table {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,15 +31,19 @@
|
|||
>
|
||||
{{ item.projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showLefSec" style="display: flex;margin-bottom: 20px;align-items: center;">
|
||||
<img src="../../assets/img/back.png" alt="" @click="handelCloseSub">
|
||||
<div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
|
||||
<!-- 选项 -->
|
||||
<!-- <el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="searchIpt"
|
||||
style="margin-left: 20px;"
|
||||
/> -->
|
||||
</div>
|
||||
<!-- 选项 -->
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="searchIpt"
|
||||
style="margin-bottom: 20px"
|
||||
v-if="showLefSec"
|
||||
/>
|
||||
|
||||
<div
|
||||
:class="['single-sec', { isActive: currentLefIndex === item.id }]"
|
||||
v-for="item in searchLefSec"
|
||||
|
|
@ -201,6 +205,7 @@ export default {
|
|||
name: tower.gtName,
|
||||
projName: tower.gtName,
|
||||
projectId: proj.projectId,
|
||||
province: proj.areaName,
|
||||
itemStyle: { normal: { areaColor: '#7DDEFF' } },
|
||||
value: [
|
||||
Number(tower.lon),
|
||||
|
|
@ -250,12 +255,19 @@ export default {
|
|||
this.currentCountryIndex = undefined
|
||||
this.sendMap = 1
|
||||
},
|
||||
///关闭地图，显示二级页面
|
||||
handleCloseMap(val) {
|
||||
console.log(val, 'closeMap')
|
||||
this.lefSendMsg = val.value
|
||||
this.showProjSec = false
|
||||
this.currentLefIndex = 1
|
||||
this.showLefSec = true
|
||||
},
|
||||
//关闭二级页面
|
||||
handelCloseSub(){
|
||||
this.showProjSec = true
|
||||
this.showLefSec = false
|
||||
this.renderAllProj()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,14 +40,11 @@
|
|||
{{ item.projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选项 -->
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-search"
|
||||
v-model="searchIpt"
|
||||
style="margin-bottom: 20px"
|
||||
v-if="showLefSec"
|
||||
/>
|
||||
|
||||
<div v-if="showLefSec" style="display: flex;margin-bottom: 20px;align-items: center;">
|
||||
<img src="../../assets/img/back.png" alt="" @click="handelCloseSub">
|
||||
<div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ sendMsg.projectName }}</div>
|
||||
</div>
|
||||
<div
|
||||
:class="['single-sec', { isActive: currentLefIndex === item.id }]"
|
||||
v-for="item in searchLefSec"
|
||||
|
|
@ -227,6 +224,12 @@ export default {
|
|||
this.showLefSec = true
|
||||
this.showProjSec = false
|
||||
},
|
||||
//关闭二级页面
|
||||
handelCloseSub(){
|
||||
this.showProjSec = true
|
||||
this.showLefSec = false
|
||||
this.getGeoData()
|
||||
},
|
||||
changeLefSec(val) {
|
||||
this.currentLefIndex = val.id
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,40 +1,9 @@
|
|||
<template>
|
||||
<div class="homePage">
|
||||
<!-- <global-bar
|
||||
:index-count="currentIndex"
|
||||
>
|
||||
</global-bar>-->
|
||||
<!-- <div class="tit-cont">
|
||||
<div class="inner-tit">
|
||||
<div
|
||||
v-for="item in titList"
|
||||
:key="item.id"
|
||||
:class="[ 'single-tit', { isActive: currentIndex === item.id } ]"
|
||||
@click="changeTitle(item)"
|
||||
>
|
||||
<h4>
|
||||
<span v-if="item.title !== null">{{ item.title }}</span>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex === item.id"
|
||||
src="../../assets/img/tit-bottom.png"
|
||||
alt=""/>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex !== item.id"
|
||||
src="../../assets/img/title-nosel.png"
|
||||
alt=""/>
|
||||
</h4>
|
||||
</div>
|
||||
<!– <div class="tit-cen"></div>
|
||||
<div class="tit-rig">2</div>–>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- <div class="homePage_title" @click="routerClick">
|
||||
<div>智慧仓储管理平台</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="container" v-if="!showSubView">
|
||||
<!-- 左侧数据模块列表 -->
|
||||
<div class="leftModuleBox">
|
||||
<div style="height: 200px; margin-bottom: 10px">
|
||||
<div style="height: 200px; margin-bottom: 10px" >
|
||||
<LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
|
||||
</div>
|
||||
<div style="height: 430px; margin-bottom: 10px">
|
||||
|
|
@ -44,6 +13,7 @@
|
|||
<LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间3D效果展示 -->
|
||||
<div class="centerModuleBox">
|
||||
<div class="center-top">
|
||||
|
|
@ -51,31 +21,9 @@
|
|||
<CountryMap
|
||||
:send-height="'627px'"
|
||||
:send-geo="geoData"
|
||||
@closeMap="handleCloseMap"
|
||||
></CountryMap>
|
||||
<!-- 重庆地图 -->
|
||||
<!-- <Center3DMap></Center3DMap>-->
|
||||
</div>
|
||||
<!-- <div class="center-bottom">
|
||||
<CenterBottom></CenterBottom>
|
||||
</div>-->
|
||||
<!-- <div class="buttom-box">
|
||||
<div class="buttonTop">
|
||||
<div
|
||||
:class="maType == 1 ? 'on' : ''"
|
||||
class="buttom1"
|
||||
@click="getMapSelect(1)"
|
||||
>
|
||||
施工机具
|
||||
</div>
|
||||
<div
|
||||
:class="maType == 2 ? 'on' : ''"
|
||||
class="buttom1"
|
||||
@click="getMapSelect(2)"
|
||||
>
|
||||
工器具
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
<!-- 右侧数据模块列表 -->
|
||||
<div class="rightModuleBox">
|
||||
|
|
@ -85,52 +33,44 @@
|
|||
<div style="height: 470px">
|
||||
<rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
|
||||
</div>
|
||||
<!-- <rightThree></rightThree>-->
|
||||
<!-- <LeftThree></LeftThree>-->
|
||||
<!-- <RightFour></RightFour> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 获取天气 -->
|
||||
<!-- <div class="weather">
|
||||
<div class="weather_box">
|
||||
<div><img alt="" src="../../assets/img/myImage//time.png" /></div>
|
||||
<div class="dateTimeString">{{ dateTimeString }}</div>
|
||||
<!– <div class="weatherData">
|
||||
<img class="weatherUrl" :src="weatherUrl" alt="" /><span
|
||||
class="weather_title"
|
||||
>{{ weatherData.weather }}</span
|
||||
><span>{{ weatherData.temperature }}℃</span>
|
||||
</div> –>
|
||||
</div>
|
||||
<!-- 地图点击二级页面 -->
|
||||
<div class="page-cont" v-if="showSubView">
|
||||
<div class="lef-secs">
|
||||
<div style="display: flex;margin-bottom: 20px;align-items: center;">
|
||||
<img src="../../assets/img/back.png" alt="" @click="handelCloseSub">
|
||||
<div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
|
||||
</div>
|
||||
<div :class="['single-sec', { isActive: currentLefIndex === item.id }]" v-for="item in searchLefSec" :key="item.id" @click="changeLefSec(item)">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sound">
|
||||
<img src="../../assets/img/myImage/sound.png" alt="" />
|
||||
|
||||
<div class="rig-components">
|
||||
<man-detect
|
||||
v-if="currentLefIndex === 1"
|
||||
:send-msg="lefSendMsg"
|
||||
></man-detect>
|
||||
<envir-detect
|
||||
v-if="currentLefIndex === 2"
|
||||
:send-msg="lefSendMsg"
|
||||
></envir-detect>
|
||||
<tower-detect
|
||||
v-if="currentLefIndex === 3"
|
||||
:send-msg="lefSendMsg"
|
||||
></tower-detect>
|
||||
<pit-detect
|
||||
v-if="currentLefIndex === 4"
|
||||
:send-msg="lefSendMsg"
|
||||
></pit-detect>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div id="inner">
|
||||
<span id="first" v-for="(item, index) of transformList" :key="index">{{
|
||||
'检修预警提示：' +
|
||||
item.machineName +
|
||||
'下次检修日期：' +
|
||||
item.nextCheckTime +
|
||||
'，请注意查收！'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<common-dialog
|
||||
ref="dialogRef"
|
||||
>
|
||||
|
||||
</common-dialog>
|
||||
|
||||
<!-- <envir-dialog
|
||||
ref="envirRef"
|
||||
></envir-dialog>
|
||||
|
||||
<dip-dialog
|
||||
ref="dipRef"
|
||||
></dip-dialog>-->
|
||||
<!-- 弹窗统一控制组件 -->
|
||||
<common-dialog ref="dialogRef"></common-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -153,6 +93,10 @@ import CenterFold from '../../components/home/centerFold.vue'
|
|||
import CommonDialog from '../../components/home/commonDialog.vue'
|
||||
import DipDialog from '../../components/dialog/dipDialog.vue'
|
||||
import EnvirDialog from '../../components/dialog/envirDialog.vue'
|
||||
import ManDetect from '../../components/substation/manDetect.vue'
|
||||
import EnvirDetect from '../../components/substation/envirDetect.vue'
|
||||
import TowerDetect from '../../components/substation/towerDetect.vue'
|
||||
import PitDetect from '../../components/substation/pitDetect.vue'
|
||||
import {
|
||||
querySubProjInfoApi
|
||||
} from '@/api/substation/substation'
|
||||
|
|
@ -174,14 +118,28 @@ export default {
|
|||
CenterFold,
|
||||
CommonDialog,
|
||||
DipDialog,
|
||||
EnvirDialog
|
||||
EnvirDialog,
|
||||
ManDetect,
|
||||
EnvirDetect,
|
||||
TowerDetect,
|
||||
PitDetect
|
||||
},
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
childKey: 0,
|
||||
currentIndex: 1,
|
||||
geoData: undefined
|
||||
geoData: undefined,
|
||||
currentLefIndex: null,
|
||||
searchIpt: undefined,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
showSubView:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -203,6 +161,16 @@ export default {
|
|||
{ name: '新疆维吾尔自治区', projName: '喀什工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [87.627704, 43.793026] },
|
||||
] */
|
||||
},
|
||||
computed: {
|
||||
searchLefSec() {
|
||||
if(!this.searchIpt) {
|
||||
return this.lefSecList
|
||||
}
|
||||
return this.lefSecList.filter(item => {
|
||||
return item.title.includes(this.searchIpt)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getGeoData() {
|
||||
let res = await querySubProjInfoApi()
|
||||
|
|
@ -212,6 +180,7 @@ export default {
|
|||
name: item.projectName,
|
||||
province: item.areaName,
|
||||
projName: item.projectName,
|
||||
projectId: item.projectId,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#7DDEFF'
|
||||
|
|
@ -220,7 +189,15 @@ export default {
|
|||
value: [
|
||||
Number(item.lon),
|
||||
Number(item.lat)
|
||||
]
|
||||
],
|
||||
currentLefIndex: null,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -230,6 +207,20 @@ export default {
|
|||
param: val
|
||||
})
|
||||
},
|
||||
handleCloseMap(val) {
|
||||
console.log(val, 'closeMap')
|
||||
this.lefSendMsg=val.value;
|
||||
this.currentLefIndex=1
|
||||
this.showSubView=true;
|
||||
},
|
||||
changeLefSec(val) {
|
||||
this.currentLefIndex = val.id
|
||||
},
|
||||
//关闭二级页面
|
||||
handelCloseSub(){
|
||||
this.showSubView = false
|
||||
this.getGeoData()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -306,8 +297,6 @@ export default {
|
|||
// background-clip: text;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -401,5 +390,67 @@ export default {
|
|||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-cont{
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.lef-secs{
|
||||
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background-color: #F3F7FF;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #EFF2FC;
|
||||
box-shadow: 2px 2px 2px #D9E0F3;
|
||||
overflow-y: auto;
|
||||
|
||||
.single-sec{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
background-color: #DEECFF;
|
||||
border: 1px solid #D1E1FF;
|
||||
margin-bottom: 15px;
|
||||
|
||||
}
|
||||
|
||||
.isActive{
|
||||
|
||||
background-color: #EFF4FE;
|
||||
box-shadow: -3px -3px 2px #CBDCF6,
|
||||
2px 2px 2px #F8F9FE,
|
||||
-2px -2px 2px #CBDCF6,
|
||||
2px 2px 2px #F8F9FE;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rig-maps, .rig-components{
|
||||
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue