-
+
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = `
`
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@
-
+
确认
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
index a3e66a3..4a985fa 100644
--- a/src/views/home/alarm/current/components/monitorDataDialog.vue
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -25,8 +25,8 @@
{ text: '信号强度', value: 'rsrp', align: 'center', width: 85 },
{ text: '信号质量', value: 'rsrpName', align: 'center', width: 85 },
{ text: '电量(%)', value: 'cell', align: 'center', width: 80 },
- { text: '采集时间', value: 'uptime', align: 'center' },
- { text: '上传时间', value: 'logtime', align: 'center' },
+ { text: '采集时间', value: 'uptime', align: 'center' },
+ { text: '上传时间', value: 'logtime', align: 'center' },
// { text: '设备状态', value: 'status', align: 'center', width: 85, isCustom: true },
])
const listQuery = ref({
@@ -62,90 +62,90 @@
listQuery.value.typeName = info.value.devTypeName
listQuery.value.devcode = info.value.devcode
getMonitorData(listQuery.value).then((res) => {
- list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : ''}))
- // 设置设备状态和燃气浓度标红
- const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
- // console.log(threshold.alarmRuleValue, '阈值')
- // 判断阈值
- const handlerthreshold = (value: string, threshold: string[]) => {
- if (!threshold) {
- threshold = []
- return '正常'
- }
- if (!threshold.length) {
- return '正常'
+ list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({ ...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : '' }))
+ // 设置设备状态和燃气浓度标红
+ const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
+ // console.log(threshold.alarmRuleValue, '阈值')
+ // 判断阈值
+ const handlerthreshold = (value: string, threshold: string[]) => {
+ if (!threshold) {
+ threshold = []
+ return '正常'
+ }
+ if (!threshold.length) {
+ return '正常'
+ }
+ else {
+ if (threshold.length === 1) {
+ return Number(value) > Number(threshold[0]) ? '报警' : '正常'
}
else {
- if (threshold.length === 1) {
- return Number(value) > Number(threshold[0]) ? '报警' : '正常'
- }
- else {
- return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
- }
+ return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
}
}
- // console.log(456)
- list.value = list.value.map((item: any) => ({
- ...item,
- status: handlerthreshold(item.strength, threshold.alarmRuleValue),
- }) as any)
- setTimeout(() => {
- loadingTable.value = false
- }, 1500);
- xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
- const indexDict = {
- 1: '一',
- 2: '二',
- 3: '三',
- 4: '其它',
- 5: '其它',
- 6: '其它',
- 7: '其它',
- } as { [key: string]: any }
- const colorDict = {
- 1: '#f56c6c',
- 2: '#ee9611',
- 3: '#ffd700',
- 4: '#8dc6ea',
- 5: '#8dc6ea',
- 6: '#8dc6ea',
- 7: '#8dc6ea',
- } as { [key: string]: any }
- // threshold.alarmRuleValue = ['8', '40']
- threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a,b) => Number(b) - Number(a))
- // console.log(threshold.alarmRuleValue)
- const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
- name: `${indexDict[index+ 1]}级报警阈值:${Number(item)}%LEL`,
- yAxis: Number(item),
- lineStyle: {
- color: colorDict[index+ 1],
- join: 'round',
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '{b}'
+ }
+ // console.log(456)
+ list.value = list.value.map((item: any) => ({
+ ...item,
+ status: handlerthreshold(item.strength, threshold.alarmRuleValue),
+ }) as any)
+ setTimeout(() => {
+ loadingTable.value = false
+ }, 1500);
+ xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
+ const indexDict = {
+ 1: '一',
+ 2: '二',
+ 3: '三',
+ 4: '其它',
+ 5: '其它',
+ 6: '其它',
+ 7: '其它',
+ } as { [key: string]: any }
+ const colorDict = {
+ 1: '#f56c6c',
+ 2: '#ee9611',
+ 3: '#ffd700',
+ 4: '#8dc6ea',
+ 5: '#8dc6ea',
+ 6: '#8dc6ea',
+ 7: '#8dc6ea',
+ } as { [key: string]: any }
+ // threshold.alarmRuleValue = ['8', '40']
+ threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a, b) => Number(b) - Number(a))
+ // console.log(threshold.alarmRuleValue)
+ const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
+ name: `${indexDict[index + 1]}级报警阈值:${Number(item)}%LEL`,
+ yAxis: Number(item),
+ lineStyle: {
+ color: colorDict[index + 1],
+ join: 'round',
+ cap: 'round',
+ },
+ label: {
+ show: true,
+ formatter: '{b}'
+ }
+ }))
+ // console.log('阈值线', markLineData)
+ data.value = [
+ {
+ name: '燃气浓度',
+ data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
+ symbol: list.value.length > 1 ? 'none' : 'circle',
+ markLine: {
+ data: markLineData,
+ silent: true,
+ lineStyle: {
+ color: 'red',
+ join: 'round',
+ cap: 'round',
+ },
}
- }))
- // console.log('阈值线', markLineData)
- data.value = [
- {
- name: '燃气浓度',
- data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
- symbol: list.value.length > 1 ? 'none' : 'circle',
- markLine: {
- data: markLineData,
- silent: true,
- lineStyle: {
- color: 'red',
- join: 'round',
- cap: 'round',
- },
- }
- },
- ]
- resizePage()
- })
+ },
+ ]
+ resizePage()
+ })
.catch(() => {
loadingTable.value = false
})
@@ -173,7 +173,7 @@
// dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
// dayjs().format('YYYY-MM-DD HH:mm:ss'),
// ]
- if(!timerange.length) {
+ if (!timerange.length) {
datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
}
else {
@@ -203,11 +203,17 @@
background: 'rgba(255, 255, 255, 0.8)',
})
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1,
- '2strength': item.strength, '3pci': item.pci,
- '4cell': item.cell, '5uptime': item.uptime,'6logtime': item.logtime, })),
+ json: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2strength': item.strength,
+ '3rsrp': item.rsrp,
+ '4rsrpName': item.rsrpName,
+ '5cell': item.cell,
+ '6uptime': item.uptime,
+ '7logtime': item.logtime,
+ })),
name: '浓度数据',
- titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '电池电压(%)', '采集时间', '上传时间'],
+ titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '信号质量', '电量(%)', '采集时间', '上传时间'],
sheetName: 'sheet1',
})
loading.close()
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
index a3e66a3..4a985fa 100644
--- a/src/views/home/alarm/current/components/monitorDataDialog.vue
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -25,8 +25,8 @@
{ text: '信号强度', value: 'rsrp', align: 'center', width: 85 },
{ text: '信号质量', value: 'rsrpName', align: 'center', width: 85 },
{ text: '电量(%)', value: 'cell', align: 'center', width: 80 },
- { text: '采集时间', value: 'uptime', align: 'center' },
- { text: '上传时间', value: 'logtime', align: 'center' },
+ { text: '采集时间', value: 'uptime', align: 'center' },
+ { text: '上传时间', value: 'logtime', align: 'center' },
// { text: '设备状态', value: 'status', align: 'center', width: 85, isCustom: true },
])
const listQuery = ref({
@@ -62,90 +62,90 @@
listQuery.value.typeName = info.value.devTypeName
listQuery.value.devcode = info.value.devcode
getMonitorData(listQuery.value).then((res) => {
- list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : ''}))
- // 设置设备状态和燃气浓度标红
- const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
- // console.log(threshold.alarmRuleValue, '阈值')
- // 判断阈值
- const handlerthreshold = (value: string, threshold: string[]) => {
- if (!threshold) {
- threshold = []
- return '正常'
- }
- if (!threshold.length) {
- return '正常'
+ list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({ ...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : '' }))
+ // 设置设备状态和燃气浓度标红
+ const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
+ // console.log(threshold.alarmRuleValue, '阈值')
+ // 判断阈值
+ const handlerthreshold = (value: string, threshold: string[]) => {
+ if (!threshold) {
+ threshold = []
+ return '正常'
+ }
+ if (!threshold.length) {
+ return '正常'
+ }
+ else {
+ if (threshold.length === 1) {
+ return Number(value) > Number(threshold[0]) ? '报警' : '正常'
}
else {
- if (threshold.length === 1) {
- return Number(value) > Number(threshold[0]) ? '报警' : '正常'
- }
- else {
- return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
- }
+ return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
}
}
- // console.log(456)
- list.value = list.value.map((item: any) => ({
- ...item,
- status: handlerthreshold(item.strength, threshold.alarmRuleValue),
- }) as any)
- setTimeout(() => {
- loadingTable.value = false
- }, 1500);
- xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
- const indexDict = {
- 1: '一',
- 2: '二',
- 3: '三',
- 4: '其它',
- 5: '其它',
- 6: '其它',
- 7: '其它',
- } as { [key: string]: any }
- const colorDict = {
- 1: '#f56c6c',
- 2: '#ee9611',
- 3: '#ffd700',
- 4: '#8dc6ea',
- 5: '#8dc6ea',
- 6: '#8dc6ea',
- 7: '#8dc6ea',
- } as { [key: string]: any }
- // threshold.alarmRuleValue = ['8', '40']
- threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a,b) => Number(b) - Number(a))
- // console.log(threshold.alarmRuleValue)
- const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
- name: `${indexDict[index+ 1]}级报警阈值:${Number(item)}%LEL`,
- yAxis: Number(item),
- lineStyle: {
- color: colorDict[index+ 1],
- join: 'round',
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '{b}'
+ }
+ // console.log(456)
+ list.value = list.value.map((item: any) => ({
+ ...item,
+ status: handlerthreshold(item.strength, threshold.alarmRuleValue),
+ }) as any)
+ setTimeout(() => {
+ loadingTable.value = false
+ }, 1500);
+ xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
+ const indexDict = {
+ 1: '一',
+ 2: '二',
+ 3: '三',
+ 4: '其它',
+ 5: '其它',
+ 6: '其它',
+ 7: '其它',
+ } as { [key: string]: any }
+ const colorDict = {
+ 1: '#f56c6c',
+ 2: '#ee9611',
+ 3: '#ffd700',
+ 4: '#8dc6ea',
+ 5: '#8dc6ea',
+ 6: '#8dc6ea',
+ 7: '#8dc6ea',
+ } as { [key: string]: any }
+ // threshold.alarmRuleValue = ['8', '40']
+ threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a, b) => Number(b) - Number(a))
+ // console.log(threshold.alarmRuleValue)
+ const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
+ name: `${indexDict[index + 1]}级报警阈值:${Number(item)}%LEL`,
+ yAxis: Number(item),
+ lineStyle: {
+ color: colorDict[index + 1],
+ join: 'round',
+ cap: 'round',
+ },
+ label: {
+ show: true,
+ formatter: '{b}'
+ }
+ }))
+ // console.log('阈值线', markLineData)
+ data.value = [
+ {
+ name: '燃气浓度',
+ data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
+ symbol: list.value.length > 1 ? 'none' : 'circle',
+ markLine: {
+ data: markLineData,
+ silent: true,
+ lineStyle: {
+ color: 'red',
+ join: 'round',
+ cap: 'round',
+ },
}
- }))
- // console.log('阈值线', markLineData)
- data.value = [
- {
- name: '燃气浓度',
- data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
- symbol: list.value.length > 1 ? 'none' : 'circle',
- markLine: {
- data: markLineData,
- silent: true,
- lineStyle: {
- color: 'red',
- join: 'round',
- cap: 'round',
- },
- }
- },
- ]
- resizePage()
- })
+ },
+ ]
+ resizePage()
+ })
.catch(() => {
loadingTable.value = false
})
@@ -173,7 +173,7 @@
// dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
// dayjs().format('YYYY-MM-DD HH:mm:ss'),
// ]
- if(!timerange.length) {
+ if (!timerange.length) {
datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
}
else {
@@ -203,11 +203,17 @@
background: 'rgba(255, 255, 255, 0.8)',
})
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1,
- '2strength': item.strength, '3pci': item.pci,
- '4cell': item.cell, '5uptime': item.uptime,'6logtime': item.logtime, })),
+ json: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2strength': item.strength,
+ '3rsrp': item.rsrp,
+ '4rsrpName': item.rsrpName,
+ '5cell': item.cell,
+ '6uptime': item.uptime,
+ '7logtime': item.logtime,
+ })),
name: '浓度数据',
- titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '电池电压(%)', '采集时间', '上传时间'],
+ titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '信号质量', '电量(%)', '采集时间', '上传时间'],
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index 9f93f8c..0420c9d 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -104,7 +104,7 @@
-
+
确认
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
index a3e66a3..4a985fa 100644
--- a/src/views/home/alarm/current/components/monitorDataDialog.vue
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -25,8 +25,8 @@
{ text: '信号强度', value: 'rsrp', align: 'center', width: 85 },
{ text: '信号质量', value: 'rsrpName', align: 'center', width: 85 },
{ text: '电量(%)', value: 'cell', align: 'center', width: 80 },
- { text: '采集时间', value: 'uptime', align: 'center' },
- { text: '上传时间', value: 'logtime', align: 'center' },
+ { text: '采集时间', value: 'uptime', align: 'center' },
+ { text: '上传时间', value: 'logtime', align: 'center' },
// { text: '设备状态', value: 'status', align: 'center', width: 85, isCustom: true },
])
const listQuery = ref({
@@ -62,90 +62,90 @@
listQuery.value.typeName = info.value.devTypeName
listQuery.value.devcode = info.value.devcode
getMonitorData(listQuery.value).then((res) => {
- list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : ''}))
- // 设置设备状态和燃气浓度标红
- const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
- // console.log(threshold.alarmRuleValue, '阈值')
- // 判断阈值
- const handlerthreshold = (value: string, threshold: string[]) => {
- if (!threshold) {
- threshold = []
- return '正常'
- }
- if (!threshold.length) {
- return '正常'
+ list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({ ...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : '' }))
+ // 设置设备状态和燃气浓度标红
+ const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
+ // console.log(threshold.alarmRuleValue, '阈值')
+ // 判断阈值
+ const handlerthreshold = (value: string, threshold: string[]) => {
+ if (!threshold) {
+ threshold = []
+ return '正常'
+ }
+ if (!threshold.length) {
+ return '正常'
+ }
+ else {
+ if (threshold.length === 1) {
+ return Number(value) > Number(threshold[0]) ? '报警' : '正常'
}
else {
- if (threshold.length === 1) {
- return Number(value) > Number(threshold[0]) ? '报警' : '正常'
- }
- else {
- return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
- }
+ return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
}
}
- // console.log(456)
- list.value = list.value.map((item: any) => ({
- ...item,
- status: handlerthreshold(item.strength, threshold.alarmRuleValue),
- }) as any)
- setTimeout(() => {
- loadingTable.value = false
- }, 1500);
- xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
- const indexDict = {
- 1: '一',
- 2: '二',
- 3: '三',
- 4: '其它',
- 5: '其它',
- 6: '其它',
- 7: '其它',
- } as { [key: string]: any }
- const colorDict = {
- 1: '#f56c6c',
- 2: '#ee9611',
- 3: '#ffd700',
- 4: '#8dc6ea',
- 5: '#8dc6ea',
- 6: '#8dc6ea',
- 7: '#8dc6ea',
- } as { [key: string]: any }
- // threshold.alarmRuleValue = ['8', '40']
- threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a,b) => Number(b) - Number(a))
- // console.log(threshold.alarmRuleValue)
- const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
- name: `${indexDict[index+ 1]}级报警阈值:${Number(item)}%LEL`,
- yAxis: Number(item),
- lineStyle: {
- color: colorDict[index+ 1],
- join: 'round',
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '{b}'
+ }
+ // console.log(456)
+ list.value = list.value.map((item: any) => ({
+ ...item,
+ status: handlerthreshold(item.strength, threshold.alarmRuleValue),
+ }) as any)
+ setTimeout(() => {
+ loadingTable.value = false
+ }, 1500);
+ xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
+ const indexDict = {
+ 1: '一',
+ 2: '二',
+ 3: '三',
+ 4: '其它',
+ 5: '其它',
+ 6: '其它',
+ 7: '其它',
+ } as { [key: string]: any }
+ const colorDict = {
+ 1: '#f56c6c',
+ 2: '#ee9611',
+ 3: '#ffd700',
+ 4: '#8dc6ea',
+ 5: '#8dc6ea',
+ 6: '#8dc6ea',
+ 7: '#8dc6ea',
+ } as { [key: string]: any }
+ // threshold.alarmRuleValue = ['8', '40']
+ threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a, b) => Number(b) - Number(a))
+ // console.log(threshold.alarmRuleValue)
+ const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
+ name: `${indexDict[index + 1]}级报警阈值:${Number(item)}%LEL`,
+ yAxis: Number(item),
+ lineStyle: {
+ color: colorDict[index + 1],
+ join: 'round',
+ cap: 'round',
+ },
+ label: {
+ show: true,
+ formatter: '{b}'
+ }
+ }))
+ // console.log('阈值线', markLineData)
+ data.value = [
+ {
+ name: '燃气浓度',
+ data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
+ symbol: list.value.length > 1 ? 'none' : 'circle',
+ markLine: {
+ data: markLineData,
+ silent: true,
+ lineStyle: {
+ color: 'red',
+ join: 'round',
+ cap: 'round',
+ },
}
- }))
- // console.log('阈值线', markLineData)
- data.value = [
- {
- name: '燃气浓度',
- data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
- symbol: list.value.length > 1 ? 'none' : 'circle',
- markLine: {
- data: markLineData,
- silent: true,
- lineStyle: {
- color: 'red',
- join: 'round',
- cap: 'round',
- },
- }
- },
- ]
- resizePage()
- })
+ },
+ ]
+ resizePage()
+ })
.catch(() => {
loadingTable.value = false
})
@@ -173,7 +173,7 @@
// dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
// dayjs().format('YYYY-MM-DD HH:mm:ss'),
// ]
- if(!timerange.length) {
+ if (!timerange.length) {
datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
}
else {
@@ -203,11 +203,17 @@
background: 'rgba(255, 255, 255, 0.8)',
})
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1,
- '2strength': item.strength, '3pci': item.pci,
- '4cell': item.cell, '5uptime': item.uptime,'6logtime': item.logtime, })),
+ json: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2strength': item.strength,
+ '3rsrp': item.rsrp,
+ '4rsrpName': item.rsrpName,
+ '5cell': item.cell,
+ '6uptime': item.uptime,
+ '7logtime': item.logtime,
+ })),
name: '浓度数据',
- titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '电池电压(%)', '采集时间', '上传时间'],
+ titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '信号质量', '电量(%)', '采集时间', '上传时间'],
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index 9f93f8c..0420c9d 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -104,7 +104,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/processDialog.vue b/src/views/home/alarm/current/components/processDialog.vue
index 32c7141..f0f2f3b 100644
--- a/src/views/home/alarm/current/components/processDialog.vue
+++ b/src/views/home/alarm/current/components/processDialog.vue
@@ -46,7 +46,7 @@
{
name: '设备正常',
procrssNames: ['已处置'],
- processCode: ['7','10'],
+ processCode: ['7','10', '8'],
icon0: '设备-0',
icon1: '设备-1',
active: 5,
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/monitorDataDialog.vue b/src/views/home/alarm/current/components/monitorDataDialog.vue
index a3e66a3..4a985fa 100644
--- a/src/views/home/alarm/current/components/monitorDataDialog.vue
+++ b/src/views/home/alarm/current/components/monitorDataDialog.vue
@@ -25,8 +25,8 @@
{ text: '信号强度', value: 'rsrp', align: 'center', width: 85 },
{ text: '信号质量', value: 'rsrpName', align: 'center', width: 85 },
{ text: '电量(%)', value: 'cell', align: 'center', width: 80 },
- { text: '采集时间', value: 'uptime', align: 'center' },
- { text: '上传时间', value: 'logtime', align: 'center' },
+ { text: '采集时间', value: 'uptime', align: 'center' },
+ { text: '上传时间', value: 'logtime', align: 'center' },
// { text: '设备状态', value: 'status', align: 'center', width: 85, isCustom: true },
])
const listQuery = ref({
@@ -62,90 +62,90 @@
listQuery.value.typeName = info.value.devTypeName
listQuery.value.devcode = info.value.devcode
getMonitorData(listQuery.value).then((res) => {
- list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : ''}))
- // 设置设备状态和燃气浓度标红
- const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
- // console.log(threshold.alarmRuleValue, '阈值')
- // 判断阈值
- const handlerthreshold = (value: string, threshold: string[]) => {
- if (!threshold) {
- threshold = []
- return '正常'
- }
- if (!threshold.length) {
- return '正常'
+ list.value = res.data.filter((item: any) => !item.alarmRuleValue).map((item: any) => ({ ...item, rsrpName: item.rsrp ? handlerSignalStrength(Number(item.rsrp)) : '' }))
+ // 设置设备状态和燃气浓度标红
+ const threshold = res.data.filter((item: any) => item.alarmRuleValue)[0]
+ // console.log(threshold.alarmRuleValue, '阈值')
+ // 判断阈值
+ const handlerthreshold = (value: string, threshold: string[]) => {
+ if (!threshold) {
+ threshold = []
+ return '正常'
+ }
+ if (!threshold.length) {
+ return '正常'
+ }
+ else {
+ if (threshold.length === 1) {
+ return Number(value) > Number(threshold[0]) ? '报警' : '正常'
}
else {
- if (threshold.length === 1) {
- return Number(value) > Number(threshold[0]) ? '报警' : '正常'
- }
- else {
- return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
- }
+ return Number(value) < Number(threshold[0]) && Number(value) < Number(threshold[threshold.length - 1]) ? '正常' : '报警'
}
}
- // console.log(456)
- list.value = list.value.map((item: any) => ({
- ...item,
- status: handlerthreshold(item.strength, threshold.alarmRuleValue),
- }) as any)
- setTimeout(() => {
- loadingTable.value = false
- }, 1500);
- xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
- const indexDict = {
- 1: '一',
- 2: '二',
- 3: '三',
- 4: '其它',
- 5: '其它',
- 6: '其它',
- 7: '其它',
- } as { [key: string]: any }
- const colorDict = {
- 1: '#f56c6c',
- 2: '#ee9611',
- 3: '#ffd700',
- 4: '#8dc6ea',
- 5: '#8dc6ea',
- 6: '#8dc6ea',
- 7: '#8dc6ea',
- } as { [key: string]: any }
- // threshold.alarmRuleValue = ['8', '40']
- threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a,b) => Number(b) - Number(a))
- // console.log(threshold.alarmRuleValue)
- const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
- name: `${indexDict[index+ 1]}级报警阈值:${Number(item)}%LEL`,
- yAxis: Number(item),
- lineStyle: {
- color: colorDict[index+ 1],
- join: 'round',
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '{b}'
+ }
+ // console.log(456)
+ list.value = list.value.map((item: any) => ({
+ ...item,
+ status: handlerthreshold(item.strength, threshold.alarmRuleValue),
+ }) as any)
+ setTimeout(() => {
+ loadingTable.value = false
+ }, 1500);
+ xAxisData.value = JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.uptime)
+ const indexDict = {
+ 1: '一',
+ 2: '二',
+ 3: '三',
+ 4: '其它',
+ 5: '其它',
+ 6: '其它',
+ 7: '其它',
+ } as { [key: string]: any }
+ const colorDict = {
+ 1: '#f56c6c',
+ 2: '#ee9611',
+ 3: '#ffd700',
+ 4: '#8dc6ea',
+ 5: '#8dc6ea',
+ 6: '#8dc6ea',
+ 7: '#8dc6ea',
+ } as { [key: string]: any }
+ // threshold.alarmRuleValue = ['8', '40']
+ threshold.alarmRuleValue = threshold.alarmRuleValue.sort((a, b) => Number(b) - Number(a))
+ // console.log(threshold.alarmRuleValue)
+ const markLineData = threshold.alarmRuleValue.map((item: string, index: number) => ({
+ name: `${indexDict[index + 1]}级报警阈值:${Number(item)}%LEL`,
+ yAxis: Number(item),
+ lineStyle: {
+ color: colorDict[index + 1],
+ join: 'round',
+ cap: 'round',
+ },
+ label: {
+ show: true,
+ formatter: '{b}'
+ }
+ }))
+ // console.log('阈值线', markLineData)
+ data.value = [
+ {
+ name: '燃气浓度',
+ data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
+ symbol: list.value.length > 1 ? 'none' : 'circle',
+ markLine: {
+ data: markLineData,
+ silent: true,
+ lineStyle: {
+ color: 'red',
+ join: 'round',
+ cap: 'round',
+ },
}
- }))
- // console.log('阈值线', markLineData)
- data.value = [
- {
- name: '燃气浓度',
- data: JSON.parse(JSON.stringify(list.value)).slice().reverse().map((item: any) => item.strength).reverse(),
- symbol: list.value.length > 1 ? 'none' : 'circle',
- markLine: {
- data: markLineData,
- silent: true,
- lineStyle: {
- color: 'red',
- join: 'round',
- cap: 'round',
- },
- }
- },
- ]
- resizePage()
- })
+ },
+ ]
+ resizePage()
+ })
.catch(() => {
loadingTable.value = false
})
@@ -173,7 +173,7 @@
// dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
// dayjs().format('YYYY-MM-DD HH:mm:ss'),
// ]
- if(!timerange.length) {
+ if (!timerange.length) {
datetimerange.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
}
else {
@@ -203,11 +203,17 @@
background: 'rgba(255, 255, 255, 0.8)',
})
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1,
- '2strength': item.strength, '3pci': item.pci,
- '4cell': item.cell, '5uptime': item.uptime,'6logtime': item.logtime, })),
+ json: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2strength': item.strength,
+ '3rsrp': item.rsrp,
+ '4rsrpName': item.rsrpName,
+ '5cell': item.cell,
+ '6uptime': item.uptime,
+ '7logtime': item.logtime,
+ })),
name: '浓度数据',
- titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '电池电压(%)', '采集时间', '上传时间'],
+ titleArr: ['序号', '燃气浓度（%LEL)', '信号强度', '信号质量', '电量(%)', '采集时间', '上传时间'],
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/pendingDialog.vue b/src/views/home/alarm/current/components/pendingDialog.vue
index 9f93f8c..0420c9d 100644
--- a/src/views/home/alarm/current/components/pendingDialog.vue
+++ b/src/views/home/alarm/current/components/pendingDialog.vue
@@ -104,7 +104,7 @@
-
+
确认
diff --git a/src/views/home/alarm/current/components/processDialog.vue b/src/views/home/alarm/current/components/processDialog.vue
index 32c7141..f0f2f3b 100644
--- a/src/views/home/alarm/current/components/processDialog.vue
+++ b/src/views/home/alarm/current/components/processDialog.vue
@@ -46,7 +46,7 @@
{
name: '设备正常',
procrssNames: ['已处置'],
- processCode: ['7','10'],
+ processCode: ['7','10', '8'],
icon0: '设备-0',
icon1: '设备-1',
active: 5,
diff --git a/src/views/home/alarm/current/components/remindDialog.vue b/src/views/home/alarm/current/components/remindDialog.vue
index 978c261..7654e6d 100644
--- a/src/views/home/alarm/current/components/remindDialog.vue
+++ b/src/views/home/alarm/current/components/remindDialog.vue
@@ -193,7 +193,7 @@
-
+
确认
diff --git a/package.json b/package.json
index 05b1972..8c33be7 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"dayjs": "^1.11.6",
"echarts": "^5.4.1",
"echarts-gl": "^2.0.8",
- "element-plus": "^2.7.8",
+ "element-plus": "^2.9.7",
"file-saver": "^2.0.5",
"hotkeys-js": "^3.10.0",
"html2canvas": "^1.4.1",
diff --git a/public/image/emergency/emergency-error.png b/public/image/emergency/emergency-error.png
new file mode 100644
index 0000000..c9ffc1a
--- /dev/null
+++ b/public/image/emergency/emergency-error.png
Binary files differ
diff --git a/public/image/emergency/emergency-no.png b/public/image/emergency/emergency-no.png
new file mode 100644
index 0000000..44f1cee
--- /dev/null
+++ b/public/image/emergency/emergency-no.png
Binary files differ
diff --git a/public/image/emergency/emergency-normal.png b/public/image/emergency/emergency-normal.png
new file mode 100644
index 0000000..1a0a5d5
--- /dev/null
+++ b/public/image/emergency/emergency-normal.png
Binary files differ
diff --git a/public/image/emergency/emergency-offline.png b/public/image/emergency/emergency-offline.png
new file mode 100644
index 0000000..3fdb8e3
--- /dev/null
+++ b/public/image/emergency/emergency-offline.png
Binary files differ
diff --git a/public/image/force/force-error.png b/public/image/force/force-error.png
new file mode 100644
index 0000000..b236e89
--- /dev/null
+++ b/public/image/force/force-error.png
Binary files differ
diff --git a/public/image/force/force-no.png b/public/image/force/force-no.png
new file mode 100644
index 0000000..bc7d81c
--- /dev/null
+++ b/public/image/force/force-no.png
Binary files differ
diff --git a/public/image/force/force-normal.png b/public/image/force/force-normal.png
new file mode 100644
index 0000000..706a311
--- /dev/null
+++ b/public/image/force/force-normal.png
Binary files differ
diff --git a/public/image/force/force-offline.png b/public/image/force/force-offline.png
new file mode 100644
index 0000000..8d90f9d
--- /dev/null
+++ b/public/image/force/force-offline.png
Binary files differ
diff --git a/public/image/legend/alarm.png b/public/image/legend/alarm.png
new file mode 100644
index 0000000..032a0fe
--- /dev/null
+++ b/public/image/legend/alarm.png
Binary files differ
diff --git a/public/image/legend/fault.png b/public/image/legend/fault.png
new file mode 100644
index 0000000..5c2dfca
--- /dev/null
+++ b/public/image/legend/fault.png
Binary files differ
diff --git a/public/image/legend/normal.png b/public/image/legend/normal.png
new file mode 100644
index 0000000..60053c3
--- /dev/null
+++ b/public/image/legend/normal.png
Binary files differ
diff --git a/public/image/legend/offline.png b/public/image/legend/offline.png
new file mode 100644
index 0000000..6d39209
--- /dev/null
+++ b/public/image/legend/offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-error.png b/public/image/occupy/occupy-error.png
new file mode 100644
index 0000000..eac599b
--- /dev/null
+++ b/public/image/occupy/occupy-error.png
Binary files differ
diff --git a/public/image/occupy/occupy-normal.png b/public/image/occupy/occupy-normal.png
new file mode 100644
index 0000000..c2c2015
--- /dev/null
+++ b/public/image/occupy/occupy-normal.png
Binary files differ
diff --git a/public/image/occupy/occupy-offline.png b/public/image/occupy/occupy-offline.png
new file mode 100644
index 0000000..8995138
--- /dev/null
+++ b/public/image/occupy/occupy-offline.png
Binary files differ
diff --git a/public/image/occupy/occupy-stop.png b/public/image/occupy/occupy-stop.png
new file mode 100644
index 0000000..a2cdad5
--- /dev/null
+++ b/public/image/occupy/occupy-stop.png
Binary files differ
diff --git a/public/image/pass/pass-error.png b/public/image/pass/pass-error.png
new file mode 100644
index 0000000..4edcb61
--- /dev/null
+++ b/public/image/pass/pass-error.png
Binary files differ
diff --git a/public/image/pass/pass-no.png b/public/image/pass/pass-no.png
new file mode 100644
index 0000000..533f288
--- /dev/null
+++ b/public/image/pass/pass-no.png
Binary files differ
diff --git a/public/image/pass/pass-normal.png b/public/image/pass/pass-normal.png
new file mode 100644
index 0000000..dfca3c6
--- /dev/null
+++ b/public/image/pass/pass-normal.png
Binary files differ
diff --git a/public/image/pass/pass-offline.png b/public/image/pass/pass-offline.png
new file mode 100644
index 0000000..b3122de
--- /dev/null
+++ b/public/image/pass/pass-offline.png
Binary files differ
diff --git a/public/image/pipeline/pieple-error.png b/public/image/pipeline/pieple-error.png
new file mode 100644
index 0000000..20fb67d
--- /dev/null
+++ b/public/image/pipeline/pieple-error.png
Binary files differ
diff --git a/public/image/pipeline/pieple-no.png b/public/image/pipeline/pieple-no.png
new file mode 100644
index 0000000..d73bc7f
--- /dev/null
+++ b/public/image/pipeline/pieple-no.png
Binary files differ
diff --git a/public/image/pipeline/pieple-normal.png b/public/image/pipeline/pieple-normal.png
new file mode 100644
index 0000000..c30e05d
--- /dev/null
+++ b/public/image/pipeline/pieple-normal.png
Binary files differ
diff --git a/public/image/pipeline/pieple-offline.png b/public/image/pipeline/pieple-offline.png
new file mode 100644
index 0000000..947bfc1
--- /dev/null
+++ b/public/image/pipeline/pieple-offline.png
Binary files differ
diff --git a/src/api/home/dashboard/index.ts b/src/api/home/dashboard/index.ts
index dd864c8..fad9ea8 100644
--- a/src/api/home/dashboard/index.ts
+++ b/src/api/home/dashboard/index.ts
@@ -52,3 +52,34 @@
data,
})
}
+
+// 监测概括
+export function getMonitorStatistics() {
+ return request({
+ url: '/homePage/apis/monitorStatistics',
+ method: 'post',
+ })
+}
+
+// 设备监测 列表
+export function getDeviceMonitorList(data: any) {
+ return request({
+ url: `/homePage/apis/deviceMonitorList?offset=${data.offset}&limit=${data.limit}`,
+ method: 'post',
+ data,
+ })
+}
+// 行政区视图
+export function getAreaStatistics() {
+ return request({
+ url: '/homePage/apis/areaStatistics',
+ method: 'post',
+ })
+}
+// 点位视图
+export function getPointStatistics() {
+ return request({
+ url: '/homePage/apis/pointStatistics',
+ method: 'post',
+ })
+}
diff --git a/src/api/home/ledger/location.ts b/src/api/home/ledger/location.ts
index 99e51e7..ff131a4 100644
--- a/src/api/home/ledger/location.ts
+++ b/src/api/home/ledger/location.ts
@@ -14,7 +14,7 @@
// 删除点位
export function removeLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchDelete',
method: 'post',
data: {
ids: data,
@@ -25,16 +25,17 @@
// 导出列表
export function exportLocation(params: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchExport',
method: 'get',
params,
responseType: 'blob',
+
})
}
export function importLocation(data: any) {
return request({
- url: '',
+ url: '/system/busLedgerPipe/batchImport',
method: 'post',
data,
})
diff --git a/src/assets/icons/icon-force.svg b/src/assets/icons/icon-force.svg
new file mode 100644
index 0000000..2b97ebe
--- /dev/null
+++ b/src/assets/icons/icon-force.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-leakage.svg b/src/assets/icons/icon-leakage.svg
new file mode 100644
index 0000000..e6a24c5
--- /dev/null
+++ b/src/assets/icons/icon-leakage.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/icon-object.svg b/src/assets/icons/icon-object.svg
new file mode 100644
index 0000000..2953620
--- /dev/null
+++ b/src/assets/icons/icon-object.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 8d8f810..14f1cfc 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -341,7 +341,7 @@
([]) // 点聚合数组
const cluster = ref()
// 添加点聚合(距离聚合)
-const addCluster = (points,styleList) => {
+const addCluster = (points, styleList, clusterOptions = {}) => {
// console.log(points.map((item: any) => ({ ...item, city: '北京' })), 'points')
- console.log(points, 'points')
+ // console.log(points, 'points')
var count = points.length
var _renderClusterMarker = function (context) {
var factor = (context.count / count) ** (1 / 18)
@@ -582,7 +592,7 @@
url: `${publicPath}/image/well/well-will.png`, // 图标地址
},
]
- if(styleList) {
+ if (styleList) {
style = styleList
}
const markerHtml = ``
@@ -591,11 +601,11 @@
context.marker.setOffset(offset)
context.marker.on('click', (e) => {
// console.log(e, data, '1111')
- $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data })
+ $emits('massMarksClick', { event: { ...e, data: context.data[0] }, map: map.value, points, data, type: 'cluster' })
})
}
cluster.value = new AMap.value.MarkerCluster(map.value, points, {
- gridSize: 100, // 设置网格像素大小
+ gridSize: clusterOptions.gridSize || 100, // 设置网格像素大小
// maxZoom: false, // 最大的聚合级别，大于该级别就不进行相应的聚合 默认值为 18
clusterByZoomChange: false, // 地图缩放过程中是否聚合。默认值 false
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
@@ -603,7 +613,7 @@
})
// 聚合点小于11时不聚合
- cluster.value.setMinClusterSize(40)
+ cluster.value.setMinClusterSize(clusterOptions.setMinClusterSize || 40)
}
const removeCluster = () => {
if (cluster.value) {
@@ -614,8 +624,175 @@
}
}
// 点聚合(行政区)
-const addClusterForDistrict= () => {
+const clusterForDistrict = ref()
+const addClusterForDistrict = (points,) => {
+ console.log(points, 'points')
+ var district = {
+ '北京': {
+ "adcode" : "110000",
+ "center" : "116.405285,39.904989",
+ // "center" : "117.939152,40.976204",
+ },
+ '亦庄开发区': {
+ "center": "116.506647,39.795337",
+ },
+ '密云区': {
+ "adcode" : "110118",
+ "center" : "116.843352,40.377362",
+ },
+ '怀柔区': {
+ "adcode" : "110116",
+ "center" : "116.637122,40.324272",
+ },
+ '门头沟区': {
+ "adcode" : "110109",
+ "center" : "116.105381,39.937183",
+ },
+ '顺义区': {
+ "adcode" : "110113",
+ "center" : "116.653525,40.128936",
+ },
+ '朝阳区': {
+ "adcode" : "110105",
+ "center" : "116.486409,39.921489",
+ },
+ '通州区': {
+ "adcode" : "110112",
+ "center" : "116.658603,39.902486",
+ },
+ '大兴区': {
+ "adcode" : "110115",
+ "center" : "116.338033,39.728908",
+ },
+ '昌平区': {
+ "adcode" : "110114",
+ "center" : "116.235906,40.218085",
+ },
+ '西城区': {
+ "adcode" : "110102",
+ "center" : "116.366794,39.915309",
+ },
+ '东城区': {
+ "adcode" : "110101",
+ "center" : "116.418757,39.917544",
+ },
+ '房山区': {
+ "adcode" : "110111",
+ "center" : "116.139157,39.735535",
+ },
+ '石景山区': {
+ "adcode" : "110107",
+ "center" : "116.195445,39.914601",
+ },
+ '海淀区': {
+ "adcode" : "110108",
+ "center" : "116.310316,39.956074",
+ },
+ '丰台区': {
+ "center": "116.286968,39.863642",
+ },
+};
+ var clusterIndexSet = {
+ city: {
+ minZoom: 2,
+ maxZoom: 10,
+ },
+ district: {
+ minZoom: 10,
+ maxZoom: 12,
+ },
+ area: {
+ minZoom: 12,
+ maxZoom: 18,
+ },
+ };
+ function getStyle(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合绘制点 Marker 对象
+ var color = [
+ '8,60,156',
+ '66,130,198',
+ '107,174,214',
+ '78,200,211',
+ ];
+ var indexs = ['city', 'district', 'area', 'community'];
+ var i = indexs.indexOf(index['mainKey']);
+ var text = clusterData[0][index['mainKey']];
+ var size = Math.round(30 + Math.pow(count / points.length, 1 / 5) * 70);
+ if (i <= 2) {
+ var extra = '' + context.count + '套';
+ text = '' + text + '';
+ text += extra;
+ } else {
+ size = 12 * text.length + 20;
+ }
+ var style = {
+ bgColor: 'rgba(' + color[i] + ',.8)',
+ borderColor: 'rgba(' + color[i] + ',1)',
+ text: text,
+ size: size,
+ index: i,
+ color: '#ffffff',
+ textAlign: 'center',
+ boxShadow: '0px 0px 5px rgba(0,0,0,0.8)'
+ }
+ return style;
+ }
+ function getPosition(context) {
+ var key = context.index.mainKey;
+ var dataItem = context.clusterData && context.clusterData[0];
+ var districtName = dataItem[key];
+ if (!district[districtName]) {
+ return null;
+ }
+ var center = district[districtName].center.split(',');
+ var centerLnglat = new AMap.value.LngLat(center[0], center[1]);
+ return centerLnglat;
+ }
+ function _renderClusterMarker(context) {
+ var clusterData = context.clusterData; // 聚合中包含数据
+ var index = context.index; // 聚合的条件
+ var count = context.count; // 聚合中点的总数
+ var marker = context.marker; // 聚合点标记对象
+ var styleObj = getStyle(context);
+ // 自定义点标记样式
+ var div = document.createElement('div');
+ div.className = 'amap-cluster';
+ div.style.backgroundColor = styleObj.bgColor;
+ div.style.width = styleObj.size + 'px';
+ if (styleObj.index <= 2) {
+ div.style.height = styleObj.size + 'px';
+ // 自定义点击事件
+ context.marker.on('click', function (e) {
+ console.log(e)
+ var curZoom = map.value.getZoom();
+ if (curZoom < 20) {
+ curZoom += 1;
+ }
+ map.value.setZoomAndCenter(curZoom, e.lnglat);
+ });
+ }
+ div.style.border = 'solid 1px ' + styleObj.borderColor;
+ div.style.borderRadius = styleObj.size + 'px';
+ div.innerHTML = styleObj.text;
+ div.style.color = styleObj.color;
+ div.style.textAlign = styleObj.textAlign;
+ div.style.boxShadow = styleObj.boxShadow;
+ context.marker.setContent(div)
+ // 自定义聚合点标记显示位置
+ var position = getPosition(context);
+ if (position) {
+ context.marker.setPosition(position);
+ }
+ context.marker.setAnchor('center');
+ };
+ clusterForDistrict.value = new AMap.value.IndexCluster(map.value, points, {
+ renderClusterMarker: _renderClusterMarker,
+ clusterIndexSet: clusterIndexSet,
+ })
}
// ------------------------------------------------------------------------------------------------
onMounted(() => {
@@ -623,9 +800,9 @@
// setTimeout(() => {
loading.value = true
const height = document.getElementById('map-container-only')?.offsetHeight
- if(height) {
+ if (height) {
const map = document.getElementById('map')
- if(map) {
+ if (map) {
map.style.height = `${height}px`
}
}
@@ -686,6 +863,7 @@
getLocation, // 获取当前位置
addCluster,
removeCluster,
+ addClusterForDistrict
})
diff --git a/src/directives/load-more/index.ts b/src/directives/load-more/index.ts
new file mode 100644
index 0000000..62f3e54
--- /dev/null
+++ b/src/directives/load-more/index.ts
@@ -0,0 +1,45 @@
+
+import _ from 'lodash'
+export default {
+ created(el: any) {
+ },
+ mounted(el: any, binding: { value?: { loadmore?: Function } }) {
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ loadmore()
+ console.log('执行加在到底函数')
+ flag = false
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: any) {
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance <= sign) {
+ const { loadmore = () => { console.log('执行加在到底函数') } } = binding.value || {}
+ if (flag) {
+ flag = false
+ loadmore()
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+}
+
diff --git a/src/directives/table-scroll/index.ts b/src/directives/table-scroll/index.ts
new file mode 100644
index 0000000..84fdce7
--- /dev/null
+++ b/src/directives/table-scroll/index.ts
@@ -0,0 +1,78 @@
+
+import _ from 'lodash'
+interface ElType extends HTMLElement {
+ timer: number | null
+ isScroll: boolean
+ curTableTopValue: number
+}
+export default {
+ created(el: ElType) {
+ el.timer = null
+ el.isScroll = true
+ el.curTableTopValue = 0
+ },
+ mounted(el: ElType, binding: { value?: { delay?: number } }) {
+ const { delay = 15 } = binding.value || {}
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
+ const onMouseOver = () => (el.isScroll = false)
+ const onMouseOut = () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ }
+ // table-container
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ // console.log(container, 'container')
+ container.addEventListener('mouseover', onMouseOver)
+ container.addEventListener('mouseout', onMouseOut)
+
+ el.timer = window.setInterval(() => {
+ const viewDomClientHeight = viewDom.scrollHeight
+ const tableDomClientHeight = el.clientHeight
+
+ if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
+ const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
+ el.curTableTopValue =
+ curScrollPosition === tableDom.scrollHeight
+ ? 0
+ : el.curTableTopValue + 1
+ tableDom.scrollTop = el.curTableTopValue
+ }
+ }, delay)
+
+ // 监测是否快要滚动到底部
+ let flag = true
+ const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ selectWrap?.addEventListener('scroll', function () {
+ let sign = 50
+ const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+ if (scrollDistance < sign) {
+ if(!el.isScroll) { return }
+ const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
+ if(flag) {
+ flag = false
+ loadmore()
+ // console.log('执行加在到底函数')
+ setTimeout(() => {
+ flag = true
+ }, 1000);
+ }
+ }
+ })
+ },
+ unmounted(el: ElType) {
+ if (el.timer !== null) {
+ clearInterval(el.timer)
+ }
+ el.timer = null
+
+ const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
+ const container = document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
+ container.removeEventListener('mouseover', () => (el.isScroll = false))
+ container.removeEventListener('mouseout', () => {
+ el.curTableTopValue = tableDom.scrollTop
+ el.isScroll = true
+ })
+ },
+}
+
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 9f95ee2..c038408 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -151,7 +151,7 @@
-
+
-
+
-
+
@@ -275,7 +287,7 @@
-
+
-
+
-
+
-
+
diff --git a/src/views/home/alarm/current/components/gasDataDialog.vue b/src/views/home/alarm/current/components/gasDataDialog.vue
index ffe98fa..b4cd67e 100644
--- a/src/views/home/alarm/current/components/gasDataDialog.vue
+++ b/src/views/home/alarm/current/components/gasDataDialog.vue
@@ -62,6 +62,7 @@
const list = ref([])
const xAxisData = ref([])
const data = ref([])
+const columnsType = ref('')
// 列表展示列
const columns = ref([
// { text: '设备编号', value: 'devcode', align: 'center' },
@@ -380,8 +381,10 @@
if (row.devTypeName) {
if (row.devTypeName === '燃气智能监测终端') {
columns.value = columns1.value
+ columnsType.value = 'columns1'
} else if (row.devTypeName.includes('管网哨兵')) {
columns.value = columns2.value
+ columnsType.value = 'columns2'
// 获取设备信息
manufactureName.value = ''
getDeviceListPage({ offset: 1, limit: 1, devCode: row.devcode }).then(res => {
@@ -389,22 +392,28 @@
manufactureName.value = res.data.rows[0].manufactureName
if (manufactureName.value.includes('百瑞生')) {
columns.value = columns2BRS.value
+ columnsType.value = 'columns2BRS'
}
else if (manufactureName.value.includes('麦哈克')) {
columns.value = columns2MHK.value
+ columnsType.value = 'columns2MHK'
}
}
})
// console.log(row, 'row')
} else if (row.devTypeName === '智能警示桩') {
columns.value = columns3.value
+ columnsType.value = 'columns3'
} else if (row.devTypeName === '场站监测云台') {
columns.value = columns4.value
+ columnsType.value = 'columns4'
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
} else {
columns.value = columns1.value
+ columnsType.value = 'columns1'
}
const fetch = () => {
setTimeout(() => {
@@ -451,10 +460,92 @@
text: 'Loading',
background: 'rgba(255, 255, 255, 0.8)',
})
+ // 不同设备类型导出列
+ const exportDict = {
+ columns1: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3strength': item.strength,
+ '4cell': item.cell,
+ '5rsrp': item.rsrp,
+ '6rsrpName': item.rsrpName,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime,
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电量(%)', '信号强度', '信号质量', '采集时间', '上传时间']
+ },
+ columns2: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间']
+ },
+ columns2BRS: {
+ list: list.value.map((item: any, index: number) => ({
+ '1index': index + 1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6temp': item.temp,
+ '7sig': item.sig,
+ '8uptime': item.uptime,
+ '9logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '传感器状态', '温度(℃)', '信号质量', '采集时间', '上传时间']
+ },
+ columns2MHK: {
+ list: list.value.map((item: any, index:number) => ({
+ 'index': index+1,
+ '2devcode': item.devcode,
+ '3gasval': item.gasval,
+ '4vbat': item.vbat,
+ '5ssState': item.ssState,
+ '6rsrp': item.rsrp,
+ '7uptime': item.uptime,
+ '8logtime': item.logtime
+ })),
+ columns: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '电池状态', '信号质量', '采集时间', '上传时间']
+ },
+ columns3: {
+ list: list.value.map((item:any, index:number) => ({
+ '1index': index+ 1,
+ '2leftGas': item.leftGas,
+ '3rightGas': item.rightGas,
+ '4vbat': item.vbat,
+ '5pipeInclineAlarm': item.pipeInclineAlarm,
+ '6pipeBreakAlarm': item.pipeBreakAlarm,
+ '7leftOffLineAlarm': item.leftOffLineAlarm,
+ '8leftVibrateAlarm': item.leftVibrateAlarm,
+ '9rightOffLineAlarm': item.rightOffLineAlarm,
+ '10rightVibrateAlarm': item.rightVibrateAlarm,
+ '11uptime': item.uptime,
+ '12logtime': item.logtime
+ })),
+ columns: ['序号', '左侧甲烷值', '右侧甲烷值', '电池电压(V)', '桩倾斜报警', '桩拆卸报警', '左断线报警', '左振动报警', '右断线报警', '右振动报警', '采集时间', '上传时间']
+ },
+ columns4: {
+ list: list.value.map((item: any, index:number) => ({
+ '1index': index +1,
+ '2concentration': item.concentration,
+ '3dircetion': item.dircetion,
+ '4pitch': item.pitch,
+ '5uptime': item.uptime,
+ '6logtime': item.logtime
+ })),
+ columns: ['序号', '浓度', '水平位置', '垂直位置', '采集时间', '上传时间']
+ }
+ } as { [key: string]: any }
exportExcel({
- json: list.value.map((item: any, index: number) => ({ '1index': index + 1, '2devcode': item.devcode, '3gasval': item.gasval, '4vbat': item.vbat, '5uptime': item.uptime, '6logtime': item.logtime, })),
+ json: exportDict[columnsType.value]?.list || exportDict['columns1'].list,
name: `${info.value.devTypeName}燃气数据`,
- titleArr: ['序号', '设备编号', '燃气浓度（%LEL)', '电池电压(mV)', '采集时间', '上传时间'],
+ titleArr: exportDict[columnsType.value]?.columns || exportDict['columns1'].columns,
sheetName: 'sheet1',
})
loading.close()
diff --git a/src/views/home/alarm/current/components/handlerDialog.vue b/src/views/home/alarm/current/components/handlerDialog.vue
index c4e30ad..a3e2627 100644
--- a/src/views/home/alarm/current/components/handlerDialog.vue
+++ b/src/views/home/alarm/current/components/handlerDialog.vue
@@ -101,7 +101,7 @@