页面提交

src/api/data.js

@@ -0,0 +1,23 @@
+//哨兵数据信息接口
+import request from '@/utils/request'
+
+/**
+ * 查询用户数量
+ * @returns {*}
+ */
+export function userStats() {
+  return request({
+    url: '/sooka-digital-construction/community/userStats',
+    method: 'get',
+  })
+}
+/**
+ * 查询管线长度
+ * @returns {*}
+ */
+export function getPipeLengthByPressureLevel() {
+  return request({
+    url: '/sooka-digital-construction/gas/getPipeLengthByPressureLevel',
+    method: 'get',
+  })
+}

src/api/sentinel.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
 // 查询监测设备列表(所有)
-export function listDeviceAll(params) {
+export function brandPageList(params) {
   return request({
-    url: `/center-monitor/device/listDeviceAll?brand=${params.brand}&deviceType=10&pageNum=${params.pageNum}&deviceName=${params.deviceName}&pageSize=${params.pageSize}`,
+    url: `/sooka-digital-construction/deviceInfo/brandPageList?brand=${params.brand}&pageNum=${params.pageNum}&deviceName=${params.deviceName}&pageSize=${params.pageSize}`,
     method: 'get'
   })
 }
@@ -11,7 +11,7 @@ export function listDeviceAll(params) {
 // 查询哨兵所有品牌(根据品牌去重)
 export function selectBrandList() {
   return request({
-    url: `/center-monitor/device/selectBrandList`,
+    url: `/sooka-digital-construction/deviceInfo/selectBrandList`,
     method: 'get'
   })
 }
@@ -19,7 +19,7 @@ export function selectBrandList() {
 // 查询哨兵设备统计详情
 export function selectDailyThreshold(deviceCode) {
   return request({
-    url: `/center-monitor/device/selectDailyThreshold/${deviceCode}`,
+    url: `/sooka-digital-construction/deviceInfo/selectDailyThreshold/${deviceCode}`,
     method: 'get'
   })
 }
@@ -27,7 +27,39 @@ export function selectDailyThreshold(deviceCode) {
 // 根据设备id查询设备详情
 export function selectByDeviceId({id}) {
   return request({
-    url: `/center-monitor/device/selectByDeviceId/${id}`,
+    url: `/sooka-digital-construction/deviceInfo/selectByDeviceId/${id}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 根据企业统计设备
+ * @returns {*}
+ */
+export function countByBrand() {
+  return request({
+    url: `/sooka-digital-construction/deviceInfo/countByBrand`,
+    method: 'get'
+  })
+}
+
+/**
+ * 根据部门统计
+ * @returns {*}
+ */
+export function countByDepartment() {
+  return request({
+    url: `/sooka-digital-construction/deviceInfo/countByDepartment`,
+    method: 'get'
+  })
+}
+/**
+ * 根据哨兵类型统计在离线分析
+ * @returns {*}
+ */
+export function countByTypeForStatus() {
+  return request({
+    url: `/sooka-digital-construction/deviceInfo/countByTypeForStatus`,
     method: 'get'
   })
 }

src/views/SenEquipmentCenter.vue

@@ -12,10 +12,10 @@
 			<div class="list_tit">设备列表</div>
 			<el-select v-model="listParams.brand" placeholder="请选择品牌" @change="brandHasChanged" clearable style="width:100%;margin-bottom: 10px;">
 				<el-option
-						v-for="item in options"
-						:key="item.value"
-						:label="item.label"
-						:value="item.value">
+            v-for="dict in dict.type.sentinel_installation_method"
+						:key="dict.value"
+						:label="dict.label"
+						:value="dict.value">
 				</el-option>
 			</el-select>
 			<el-input
@@ -59,10 +59,13 @@
 	import supermap from '@/components/supermap-2.5d' //超图
 	import {getUserProfile} from "@/api/system/user";
 	import {
-		listDeviceAll,
+		brandPageList,
 		selectBrandList,
 		selectByDeviceId,
-		selectDailyThreshold
+		selectDailyThreshold,
+    countByBrand,
+    countByDepartment,
+    countByTypeForStatus
 	} from "@/api/sentinel"
 
 	import '../assets/styles/sb_body.css';
@@ -72,11 +75,13 @@
 	} from "@/api/system/config";
 	// import * as echarts from 'echarts'
 	let echarts = require("echarts");
+
 	export default {
 		name:'MyChart',
 		components: {
 			supermap,
 		},
+    dicts:['sentinel_installation_method'],
 		metaInfo () {
 			return {
 				title:'四平市智慧哨兵监管平台',
@@ -135,151 +140,166 @@
 		},
 		methods: {
       equipmentEcharts(){
-        const echartsByCompany = echarts.init(this.$refs.echartsByCompany);
-        let echartsByCompanyOption = {
-          series: [
-            {
-              type: 'pie',
-              radius: ['30%', '60%'],
-              avoidLabelOverlap: false,
-              padAngle: 10,
-              itemStyle: {
-                borderRadius: 20
-              },
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
+        countByBrand().then(res => {
+          const seriesData = []
+          for(let item of res.data){
+            seriesData.push({name:item.brandName,value:item.count})
+          }
+          const echartsByCompany = echarts.init(this.$refs.echartsByCompany);
+          let echartsByCompanyOption = {
+            series: [
+              {
+                type: 'pie',
+                radius: ['30%', '60%'],
+                avoidLabelOverlap: false,
+                padAngle: 10,
+                itemStyle: {
+                  borderRadius: 20
+                },
+                label: {
+                  show: false,
+                  position: 'center'
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    formatter: '{b}:{c} \n {d}%'
+                  }
+                },
+                labelLine: {
+                  show: false
+                },
+                color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"],
+                data: seriesData
+              }
+            ]
+          };
+          echartsByCompany.setOption(echartsByCompanyOption);
+        })
+        countByDepartment().then(res => {
+          const seriesData = []
+          for(let item of res.data){
+            seriesData.push({name:item.departmentName,value:item.deviceCount})
+          }
+          const echartsByType = echarts.init(this.$refs.echartsByType);
+          let echartsByTypeOption = {
+            series: [
+              {
+                type: 'pie',
+                radius: [20, 70],
+                center: ['50%', '50%'],
+                roseType: 'area',
+                itemStyle: {
+                  borderRadius: 2
+                },
+                labelLine:{
+                  show:true,
+                  position:'outside',
+                  length:10,
+                  length2:10,
+                },
                 label: {
                   show: true,
-                  fontSize: 14,
-                  fontWeight: 'bold',
-                  formatter: '{b}:{c} \n {d}%'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"],
-              data: [
-                { value: 1048, name: '港华' },
-                { value: 735, name: '奥德' },
-                { value: 580, name: '华生' },
-                { value: 484, name: '润发' }
-              ]
-            }
-          ]
-        };
-        echartsByCompany.setOption(echartsByCompanyOption);
-        const echartsByType = echarts.init(this.$refs.echartsByType);
-        let echartsByTypeOption = {
-          series: [
-            {
-              type: 'pie',
-              radius: [20, 70],
-              center: ['50%', '50%'],
-              roseType: 'area',
-              itemStyle: {
-                borderRadius: 2
-              },
-              labelLine:{
-                show:true,
-                position:'outside',
-                length:5,
-                length2:5
-              },
-              label: {
-                show: true,
-                formatter: '{b}:{c}'
+                  normal: {
+                    textStyle: {
+                      color: '#fff'  // 改变标示文字的颜色
+                    }
+                  },
+                  formatter: '{b}:{c}'
+                },
+                color: ["#ffa518", "#ff5629","#60b49b","#f3d435","#343df5"],
+                data: seriesData
+              }
+            ]
+          };
+          echartsByType.setOption(echartsByTypeOption);
+        })
+        countByTypeForStatus().then(res => {
+          const echartsByOnOff = echarts.init(this.$refs.echartsByOnOff);
+          let product = ['product'];
+          let on = ['在线'];
+          let off = ['离线'];
+          for(let item of res.data){
+            product.push(item.deviceType);
+            on.push(item.onlineCount);
+            off.push(item.offlineCount);
+          }
+
+          let source = [product,on,off];
+          let echartsByOnOffOption = {
+            title: {
+              text: product[1],
+              textStyle: {
+                color: '#b2de82', // 文字颜色
+                fontSize: 20, // 字体大小
+                fontWeight: 'bold', // 字体粗细
+                fontFamily: 'Arial' // 字体家族
               },
-              color: ["#ffa518", "#ff5629","#60b49b"],
-              data: [
-                { value: 36, name: '地埋' },
-                { value: 20, name: '桩式' },
-                { value: 25, name: '阀井哨兵' },
-              ]
-            }
-          ]
-        };
-        echartsByType.setOption(echartsByTypeOption);
-        const echartsByOnOff = echarts.init(this.$refs.echartsByOnOff);
-        let product = ['product', '地埋', '桩式','阀井哨兵'];
-        let on = ['在线', 10, 20,50];
-        let off = ['离线', 30, 40,50];
-        let source = [product,on,off];
-        let echartsByOnOffOption = {
-          title: {
-            text: product[1],
-            textStyle: {
-              color: '#b2de82', // 文字颜色
-              fontSize: 20, // 字体大小
-              fontWeight: 'bold', // 字体粗细
-              fontFamily: 'Arial' // 字体家族
+              left: 'left' // 标题位置
             },
-            left: 'left' // 标题位置
-          },
-          tooltip: {
-            trigger: 'axis',
-            showContent: false
-          },
-          dataset: {
-            source: source
-          },
-          xAxis: { type: 'category',
-            axisLabel: {
-              color: '#b2de82'
-            }
-          },
-          yAxis: { gridIndex: 0 },
-          grid: { top: '55%' },
-          color: ["#6cb956", "#629ab2"],
-          series: [
-            {
-              type: 'bar',
-              smooth: true,
-              seriesLayoutBy: 'row',
-              emphasis: { focus: 'series' }
+            tooltip: {
+              trigger: 'axis',
+              showContent: false
             },
-            {
-              type: 'bar',
-              smooth: true,
-              seriesLayoutBy: 'row',
-              emphasis: { focus: 'series' }
+            dataset: {
+              source: source
             },
-            {
-              type: 'pie',
-              id: 'pie',
-              radius: '30%',
-              center: ['50%', '25%'],
-              emphasis: {
-                focus: 'self'
-              },
-              label: {
-                formatter: '{b}: {@地埋} ({d}%)'
+            xAxis: { type: 'category',
+              axisLabel: {
+                color: '#b2de82'
+              }
+            },
+            yAxis: { gridIndex: 0 },
+            grid: { top: '55%' },
+            color: ["#6cb956", "#629ab2"],
+            series: [
+              {
+                type: 'bar',
+                smooth: true,
+                seriesLayoutBy: 'row',
+                emphasis: { focus: 'series' }
               },
-            }
-          ]
-        };
-        echartsByOnOff.on('updateAxisPointer', function (event) {
-          const xAxisInfo = event.axesInfo[0];
-          if (xAxisInfo) {
-            const dimension = xAxisInfo.value + 1;
-            echartsByOnOff.setOption({
-              title: {
-                text: product[dimension]
+              {
+                type: 'bar',
+                smooth: true,
+                seriesLayoutBy: 'row',
+                emphasis: { focus: 'series' }
               },
-              series: {
+              {
+                type: 'pie',
                 id: 'pie',
+                radius: '30%',
+                center: ['50%', '25%'],
+                emphasis: {
+                  focus: 'self'
+                },
                 label: {
-                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+                  formatter: '{b}: {@地埋} ({d}%)'
                 },
               }
-            });
-          }
-        });
-        echartsByOnOff.setOption(echartsByOnOffOption);
-
+            ]
+          };
+          echartsByOnOff.on('updateAxisPointer', function (event) {
+            const xAxisInfo = event.axesInfo[0];
+            if (xAxisInfo) {
+              const dimension = xAxisInfo.value + 1;
+              echartsByOnOff.setOption({
+                title: {
+                  text: product[dimension]
+                },
+                series: {
+                  id: 'pie',
+                  label: {
+                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+                  },
+                }
+              });
+            }
+          });
+          echartsByOnOff.setOption(echartsByOnOffOption);
+        })
       },
 			closeDetail(){
 				this.isDetailVisible = false
@@ -293,7 +313,7 @@
 			},
 			// 查询设备列表
 			getListDeviceAll(){
-				listDeviceAll(this.listParams).then(res => {
+				brandPageList(this.listParams).then(res => {
 					this.deviceList = res.rows
 					this.deviceListSearch = res.rows
           			this.deviceTotal = res.total

src/views/SentryCockpit.vue

@@ -5,14 +5,14 @@
 		<div class="con_left con_left_js">
 			<div class="list_tit">基本信息</div>
 			<div class="info-list_left">
-				<p>用户总数：257005户</p>
-				<p>管线总长：930公里</p>
-				<p>商业用户：3999户 </p>
-				<p>中压长度：186.707公里</p>
-				<p>居民用户：252906户 </p>
-				<p>次高压长度：65.9公里</p>
-				<p>工业用户：100户 </p>
-				<p>低压长度：577公里</p>
+				<p>用户总数：{{totalUsers}}户</p>
+				<p>管线总长：{{totalLength}}公里</p>
+				<p>商业用户：{{businessUsers}}户 </p>
+				<p>中压长度：{{centerPressLength}}公里</p>
+				<p>居民用户：{{civilUsers}}户 </p>
+				<p>次高压长度：{{secondaryPressLength}}公里</p>
+				<p>工业用户：{{industryUsers}}户 </p>
+				<p>低压长度：{{lowPressLength}}公里</p>
 			</div>
       <div class="list_tit">监测长度</div>
       <div class="cd_fx" ref="jccd"></div>
@@ -197,10 +197,11 @@
 			<div class="yh_fx" ref="yhfx"></div>
 			<div class="list_tit">事件分析</div>
       <div class="info-list_right">
-        <p>报警累计：6</p>
-        <p>已处理：6，未处理：0</p>
-        <p>泄露：3，震动：1</p>
-        <p>位移：2，超限：0</p>
+        <p>报警累计：{{eventTotal}}</p>
+        <p>已处理：{{eventTotal}}，未处理：0</p>
+        <p style="width:100%">
+          <span style="margin-right: 20px;" v-for="item in eventNumberList">{{item.eventTypeName.substring(0,2)}}:{{item.countSum}}</span>
+        </p>
       </div>
 			<div class="sj_fx" ref="sjfx"></div>
 		</div>
@@ -216,7 +217,11 @@
 		getUserProfile
 	} from "@/api/system/user";
   import {
-    getEventList,
+    getPipeLengthByPressureLevel,
+    userStats
+  } from "@/api/data";
+  import {
+    getEventList, getStatisticByEventType,
     getStatisticByMonth
   } from "@/api/event";
 
@@ -225,6 +230,7 @@
 		selectConfigKey
 	} from "@/api/system/config";
 	import * as echarts from 'echarts'
+  import {countByBrand} from "@/api/sentinel";
 
 
   const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '/3D-huashengranqi-2/rest/realspace' }, { type: '中压管网', url: '' }];
@@ -252,13 +258,16 @@
 
 		},
 		mounted() {
+      this.userStats();
+      this.getPipeLengthByPressureLevel();
       this.jccdChart();
 			this.sbfxChart();
-			this.yhfxChart();
 			this.sjfxChart();
+			this.getStatisticByEventType();
 			// 初始化地图数据
 			// this.getSuperMapUrl();
 			setTimeout(() => {
+
 				this.title = '四平市智慧哨兵监管平台'
 			}, 1000);
 
@@ -279,10 +288,52 @@
         currentTab: 0,
         currentClass: 0,
         tabList:[ '四平市', '铁东区', '铁西区'],
+
+        /** 用户数量信息 **/
+        totalUsers:0,
+        businessUsers:0,
+        civilUsers:0,
+        industryUsers:0,
+        /** 用户数量信息 **/
+        /** 管线长度数量信息 **/
+        centerPressLength:0,
+        lowPressLength:0,
+        secondaryPressLengt:0,
+        totalLength:0,
+        /** 管线长度数量信息 **/
+
+        dataValue: this.getCurrentDataStr(new Date()),
+        eventNumberList:[],
+        eventTotal:0,
 			}
 		},
 
 		methods: {
+      getCurrentDataStr(date) {
+        let y = date.getFullYear()
+        let m = date.getMonth() + 1
+        m = m < 10 ? '0' + m : m
+        let d = date.getDate()
+        d = d < 10 ? '0' + d : d
+        return y + '-' + m + '-' + d
+      },
+      userStats(){
+        userStats().then(req => {
+          this.totalUsers=req.data.totalUsers;
+          this.businessUsers=req.data.businessUsers;
+          this.civilUsers=req.data.civilUsers;
+          this.industryUsers=req.data.industryUsers;
+          this.yhfxChart();
+        })
+      },
+      getPipeLengthByPressureLevel(){
+        getPipeLengthByPressureLevel().then(req => {
+          this.totalLength=req.data.totalLength;
+          this.centerPressLength=req.data.centerPressLength;
+          this.lowPressLength=req.data.lowPressLength;
+          this.secondaryPressLength=req.data.secondaryPressLength;
+        })
+      },
       toggleTab(current){
         this.currentTab = current;
         this.currentClass = current;
@@ -411,23 +462,19 @@
           };
         });
         this.option = {
-          legend: {
-            top: "5%",
-            // left: 10,
+          title:{
+            text:'监测长度\n11.83\nkm',
+            left: 'center',
+            top: 'center',
             textStyle: {
               color: "#f2f2f2",
               fontSize: 12,
             },
-            icon: "circle",
-            data: data,
-          },
-          tooltip: {
-            formatter: "<br/>{b}: {c}KM",
           },
           series: [
             // 主要展示层的
             {
-              radius: ["33%", "61%"],
+              radius: ["50%", "90%"],
               center: ["50%", "50%"],
               type: "pie",
               label: {
@@ -451,7 +498,7 @@
             },
             // 边框的设置
             {
-              radius: ["31%", "34%"],
+              radius: ["48%", "60%"],
               center: ["50%", "50%"],
               type: "pie",
               label: {
@@ -478,7 +525,7 @@
             },
             // 中心的圆圈
             {
-              radius: ["26%", "31%"],
+              radius: ["45%", "50%"],
               center: ["50%", "50%"],
               type: "pie",
               label: {
@@ -523,92 +570,78 @@
       },
 			//设备分析
 			sbfxChart() {
-				const chartDom = this.$refs.sbfx;
-				const myChart = echarts.init(chartDom);
-				this.option = {
-					tooltip: {
-						trigger: "item",
-						formatter: "{b} : {c} ({d}%)",
-					},
-
-					visualMap: {
-						show: false,
-						min: 500,
-						max: 600,
-						inRange: {
-							//colorLightness: [0, 1]
-						},
-					},
-					series: [{
-						name: "访问来源",
-						type: "pie",
-						radius: "80%",
-						center: ["50%", "50%"],
-						color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
-						data: [{
-								value: 285,
-								name: "设备1",
-							},
-							{
-								value: 410,
-								name: "设备2",
-							},
-							{
-								value: 274,
-								name: "设备3",
-							},
-							{
-								value: 235,
-								name: "设备4",
-							},
-						].sort(function(a, b) {
-							return a.value - b.value;
-						}),
-						roseType: "radius",
-
-						label: {
-							normal: {
-								formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
-								rich: {
-									c: {
-										color: "rgb(241,246,104)",
-										fontSize: 20,
-										fontWeight: "bold",
-										lineHeight: 5,
-									},
-									b: {
-										color: "rgb(98,137,169)",
-										fontSize: 15,
-										height: 40,
-									},
-								},
-							},
-						},
-						labelLine: {
-							normal: {
-								lineStyle: {
-									color: "rgb(98,137,169)",
-								},
-								smooth: 0.2,
-								length: 10,
-								length2: 20,
-							},
-						},
-						itemStyle: {
-							normal: {
-								shadowColor: "rgba(0, 0, 0, 0.8)",
-								shadowBlur: 50,
-							},
-						},
-					}, ],
-				};
-
+        countByBrand().then(res => {
+          const data = [];
+          for(let item of res.data){
+            data.push({name:item.brandName,value:item.count})
+          }
+          const chartDom = this.$refs.sbfx;
+          const myChart = echarts.init(chartDom);
+          this.option = {
+            tooltip: {
+              trigger: "item",
+              formatter: "{b} : {c} ({d}%)",
+            },
 
-				myChart.setOption(this.option, true);
-				window.addEventListener("resize", function() {
-					myChart.resize();
-				});
+            visualMap: {
+              show: false,
+              min: 500,
+              max: 600,
+              inRange: {
+              },
+            },
+            series: [{
+              name: "访问来源",
+              type: "pie",
+              radius: "55%",
+              center: ["50%", "50%"],
+              color: ["rgb(131,249,103)", "#FBFE27", "#FE5050","#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
+              data: data.sort(function(a, b) {
+                return a.value - b.value;
+              }),
+              roseType: "radius",
 
+              label: {
+                normal: {
+                  formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
+                  rich: {
+                    c: {
+                      color: "rgb(241,246,104)",
+                      fontSize: 20,
+                      fontWeight: "bold",
+                      lineHeight: 5,
+                    },
+                    b: {
+                      color: "rgb(98,137,169)",
+                      fontSize: 15,
+                      height: 40,
+                    },
+                  },
+                },
+              },
+              labelLine: {
+                normal: {
+                  lineStyle: {
+                    color: "rgb(98,137,169)",
+                  },
+                  smooth: 0.2,
+                  length: 10,
+                  length2: 20,
+                },
+              },
+              itemStyle: {
+                normal: {
+                  shadowColor: "rgba(0, 0, 0, 0.8)",
+                  shadowBlur: 50,
+                },
+              },
+            }, ],
+          };
+          myChart.setOption(this.option, true);
+          window.addEventListener("resize", function() {
+            myChart.resize();
+          });
+        })
 			},
 			//用户分析
 			yhfxChart() {
@@ -629,15 +662,15 @@
 					yData = [];
 				var data = [{
 						name: "商业用户",
-						value: 3999,
+						value: this.businessUsers,
 					},
 					{
 						name: "居民用户",
-						value: 252906,
+						value: this.civilUsers,
 					},
 					{
 						name: "工业用户",
-						value: 100,
+						value: this.industryUsers,
 					},
 				];
 				data.map((a, b) => {
@@ -813,15 +846,24 @@
 				});
 
 			},
-			//事件分析
+      //事件分析
+      getStatisticByEventType(){
+        getStatisticByEventType({createTimeRange:this.dataValue+","+this.dataValue}).then(req => {
+          this.eventNumberList = req.data;
+          this.eventTotal = 0;
+          for(let item of req.data){
+            this.eventTotal += item.countSum
+          }
+        })
+      },
+
 			sjfxChart() {
         let that = this;
         getStatisticByMonth().then(res => {
-
           const chartDom = that.$refs.sjfx;
           const myChart = echarts.init(chartDom);
           var xData = res.data.categories[0];
-          var color = ["#1a9bfc", "#99da69", "#e32f46", "#7049f0", "#fa704d", "#01babc"];
+          var color = ["#1a9bfc", "#99da69", "#e32f46", "#7049f0", "#fa704d", "#01babc","#1a9bfc", "#99da69", "#e32f46", "#7049f0", "#fa704d", "#01babc"];
 
           var name = [];
           var data = [];
@@ -983,7 +1025,9 @@
 		background-color: rgba(20, 107, 115, 0.3);
 		color: #fff;
 	}
-
+  .el-checkbox__label{
+    color: #ffffff;
+  }
 
 	.hz_body {
 		position: relative;