|
|
@@ -73,29 +73,28 @@
|
|
|
<el-col :xs="24" :sm="24" :lg="6">
|
|
|
<span class="titleSpan">设备地图</span>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="24" :lg="18" align="center">
|
|
|
+ <el-col :xs="24" :sm="24" :lg="20" align="center">
|
|
|
+ <!--
|
|
|
<span>设备状态:</span>
|
|
|
- <select class="el-select" :lg="2">
|
|
|
+ <el-select class="el-select" :lg="1" size="small" placeholder="请选择">
|
|
|
<option>全部</option>
|
|
|
<option>启用</option>
|
|
|
<option>禁用</option>
|
|
|
- </select>
|
|
|
-
|
|
|
+ </el-select>-->
|
|
|
<span>地区:</span>
|
|
|
- <select class="el-select" :lg="2">
|
|
|
- <option>全部</option>
|
|
|
- </select>
|
|
|
- <select class="el-select" :lg="2">
|
|
|
- <option>全部</option>
|
|
|
- </select>
|
|
|
- <select class="el-select" :lg="2">
|
|
|
- <option>全部</option>
|
|
|
- </select>
|
|
|
-
|
|
|
+ <el-select v-model="plc_pid" class="el-select" :lg="1" placeholder="请选择" size="small" @change="((val)=>{areaChange(val, 1)})">
|
|
|
+ <el-option v-for="option in areaIds.plc_pid" :key="option.value" :label="option.label" :value="option.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="plc_cid" class="el-select" :lg="1" placeholder="请选择" size="small" @change="((val)=>{areaChange(val, 2)})">
|
|
|
+ <el-option v-for="option in areaIds.flt_cid" :key="option.value" :label="option.label" :value="option.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="queryParams.model.areaId" class="el-select" :lg="1" placeholder="请选择" size="small" @change="getResourceData()">
|
|
|
+ <el-option v-for="option in areaIds.flt_aid" :key="option.value" :label="option.label" :value="option.value" />
|
|
|
+ </el-select>
|
|
|
<span>关键词:</span>
|
|
|
- <input type="text" :placeholder='$t("common.pleaseEnter")' style="width: 120px;" size="medium" :lg="3" />
|
|
|
- <input type="button" value="查询" style="margin-left:15px" :lg="2" />
|
|
|
- </el-col>
|
|
|
+ <el-input type="text" v-model="queryParams.model.name" :placeholder='$t("common.pleaseEnter")' style="width: 180px;" size="medium" :lg="2" />
|
|
|
+ <el-button type="primary" :lg="1" style="margin-left: 10px;" round @click="getResourceData">查询</el-button>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -223,17 +222,31 @@
|
|
|
// 【登录监控】-API
|
|
|
import loginLogApi from '@/api/LoginLog';
|
|
|
// 加载【共通】函数
|
|
|
- import { initQueryParams } from '@/utils/commons'
|
|
|
+ import { initQueryParams } from '@/utils/commons'
|
|
|
+ import productionResourceApi from "@/api/Productionresource.js"
|
|
|
+ import {regionData, CodeToText } from 'element-china-area-data'
|
|
|
|
|
|
export default {
|
|
|
name: 'Dashboard',
|
|
|
components: {countTo, LineChart, BmapLocation},
|
|
|
+ filters: {
|
|
|
+
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
// 地图中心点
|
|
|
- mapCenter: { lng: 120.589963, lat: 31.309849 },
|
|
|
- BAddress: '测试使用！',
|
|
|
-
|
|
|
+ mapCenter: { lng: 121.472644, lat: 31.231706 },
|
|
|
+ BAddress: '',
|
|
|
+ areaIds:{
|
|
|
+ plc_pid:[],
|
|
|
+ plc_cid:[],
|
|
|
+ plc_aid:[],
|
|
|
+ flt_cid:[],
|
|
|
+ flt_aid:[],
|
|
|
+ },
|
|
|
+ plc_pid:"",
|
|
|
+ plc_cid:"",
|
|
|
+ plc_aid:"",
|
|
|
btnActive: "4",
|
|
|
timeRange: null,
|
|
|
topTongjiData: {orderNum: 0, planNum: 0, taskNum: 0, onlineNum: 0, allNum: 0},
|
|
|
@@ -285,14 +298,52 @@
|
|
|
this.getLoginData()
|
|
|
// 查询【企产线运行时间统计】
|
|
|
// this.getTaskCountStatistics()
|
|
|
+ // 查询设备地址
|
|
|
+ this.getResourceData()
|
|
|
},
|
|
|
computed: {
|
|
|
},
|
|
|
mounted(){
|
|
|
},
|
|
|
methods: {
|
|
|
+ getResourceData(){
|
|
|
+ this.loading = true;
|
|
|
+ this.queryParams.size = 100
|
|
|
+ productionResourceApi.page(this.queryParams).then(response => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.locations = []
|
|
|
+ this.markerList = []
|
|
|
+ res.data.records.map(item=>{
|
|
|
+ let obj = {id:item.id, name:item.name, supplier: item.lineDesc, location: this.getCodeNames(item.areaIds)+" "+item.address, lngLat:{lng: parseFloat(item.longitude), lat: parseFloat(item.latitude)}};
|
|
|
+ this.locations.push(obj)
|
|
|
+ this.markerList.push(obj.lngLat)
|
|
|
+ this.mapCenter = this.markerList[0]
|
|
|
+
|
|
|
+ let areaArr = item.areaIds.split(',');
|
|
|
+ this.areaIds.plc_pid.push({value:areaArr[0], label:CodeToText[areaArr[0]]})
|
|
|
+ this.areaIds.plc_cid.push({parentId:areaArr[0], value:areaArr[1], label:CodeToText[areaArr[1]]})
|
|
|
+ this.areaIds.plc_aid.push({parentId:areaArr[1], value:areaArr[2], label:CodeToText[areaArr[2]]})
|
|
|
+
|
|
|
+ this.areaIds.plc_pid = this.unique(this.areaIds.plc_pid)
|
|
|
+ this.areaIds.plc_cid = this.unique(this.areaIds.plc_cid)
|
|
|
+ this.areaIds.plc_aid = this.unique(this.areaIds.plc_aid)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).finally(() => this.loading = false);
|
|
|
|
|
|
- // 【今日、本周、本月、全年】按钮-事件
|
|
|
+ },
|
|
|
+ unique(arr) {
|
|
|
+ const res = new Map();
|
|
|
+ return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1));
|
|
|
+ },
|
|
|
+ getCodeNames(code) {
|
|
|
+ let arr = code.split(',')
|
|
|
+ return arr.length > 1 ? arr.map(item => {
|
|
|
+ return CodeToText[item]
|
|
|
+ }).join('/') : '';
|
|
|
+ },
|
|
|
+ // 【今日、本周、本月、全年】按钮-事件
|
|
|
searchDate(flag){
|
|
|
this.btnActive = flag;
|
|
|
// 日期区间,清空数据
|
|
|
@@ -301,6 +352,19 @@
|
|
|
// 查询数据
|
|
|
this.searchBarData(flag)
|
|
|
},
|
|
|
+ areaChange(val, level){
|
|
|
+ if(level==1){
|
|
|
+ this.plc_cid=""
|
|
|
+ this.areaIds.flt_cid = this.areaIds.plc_cid.filter(item=>{
|
|
|
+ return item.parentId == val;
|
|
|
+ });
|
|
|
+ }else if(level==2){
|
|
|
+ this.plc_aid=""
|
|
|
+ this.areaIds.flt_aid = this.areaIds.plc_aid.filter(item=>{
|
|
|
+ return item.parentId == val;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
// 【日期期间】值变化-事件
|
|
|
changeDate(val){
|
