Commit c4e5df81 authored by 耿迪迪's avatar 耿迪迪

大屏统计及人员定位地图切换

parent 144315a6
......@@ -69,4 +69,14 @@ public class TScreenStatisticController {
public AjaxResult dangerStatistic(){
return AjaxResult.success(screenStatisticService.dangerStatistic());
}
/**
* 新大屏数量统计
* @return
*/
@GetMapping("/totalNumStatisticByType")
public AjaxResult totalNumStatisticByType(){
return AjaxResult.success(screenStatisticService.totalNumStatisticByType());
}
}
......@@ -39,4 +39,23 @@ public interface TScreenStatisticMapper {
* @return
*/
Map<String,Object> dangerStatistic(Map<String,Object> param);
/**
* 管线分类型统计长度
* @return
*/
List<Map<String,Object>> pipeLengthStatisticByType();
/**
* 设备分类型统计
* @return
*/
List<Map<String,Object>> deviceStatisticByType();
/**
* 场站分类型统计
* @return
*/
List<Map<String,Object>> stationStatisticByType();
}
......@@ -39,4 +39,11 @@ public interface TScreenStatisticService {
* @return
*/
Map<String,Object> dangerStatistic();
/**
* 新大屏数量统计
* @return
*/
Map<String,List<Map<String,Object>>> totalNumStatisticByType();
}
......@@ -108,4 +108,20 @@ public class TScreenStatisticServiceImpl implements TScreenStatisticService{
}
return screenStatisticMapper.dangerStatistic(param);
}
/**
* 新大屏数量统计
* @return
*/
@Override
public Map<String,List<Map<String,Object>>> totalNumStatisticByType(){
Map<String,List<Map<String,Object>>> result = new HashMap<>();
result.put("pipeLengthInfo",screenStatisticMapper.pipeLengthStatisticByType());
result.put("deviceNumInfo",screenStatisticMapper.deviceStatisticByType());
result.put("stationNumInfo",screenStatisticMapper.stationStatisticByType());
return result;
}
}
......@@ -92,4 +92,43 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="isVisitor != null and isVisitor != ''">and is_visitor = #{isVisitor}</if>
</where>
</select>
<!-- 管线分类型统计长度 -->
<select id="pipeLengthStatisticByType" resultType="Map">
SELECT
sum(IFNULL(pipe_length,0)) as totalLength,
pipe_type as type
FROM
t_pipe_info
GROUP BY
pipe_type
ORDER BY pipe_type;
</select>
<!-- 设备分类型统计 -->
<select id="deviceStatisticByType" resultType="Map">
SELECT
COUNT(1) as value,
dict.dict_label as name
FROM
t_device_info device
LEFT JOIN sys_dict_data dict ON dict.dict_value = device.device_type AND dict_type = 't_device_type'
GROUP BY
device.device_type
ORDER BY device.device_type DESC;
</select>
<!-- 场站分类型统计 -->
<select id="stationStatisticByType" resultType="Map">
SELECT
COUNT(1) as value,
dict.dict_label as name
FROM
t_site_station_info station
LEFT JOIN sys_dict_data dict ON dict.dict_value = station.site_station_type AND dict_type = 't_station_type'
GROUP BY
station.site_station_type
ORDER BY station.site_station_type DESC ;
</select>
</mapper>
\ No newline at end of file
......@@ -48,3 +48,13 @@ export function dangerStatistic(query) {
})
}
//新大屏数量统计
export function totalNumStatisticByType(query) {
return request({
url: '/screen/statistic/totalNumStatisticByType',
method: 'get',
params: query
})
}
......@@ -35,7 +35,7 @@ export default {
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
matched = [{ path: '/bigWindow', meta: { title: '首页' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
......
......@@ -17,39 +17,46 @@
:class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
:style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
>
<div v-for="row in rows" :key="row.id + row.date" class="row">
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div v-for="(row,index) in cycleList" :key="row.id + row.createTime" class="row">
<div class="col id">{{ index+1 }}</div>
<div class="col type">{{ row.devTypeName }}</div>
<div class="col date">{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</div>
<div class="col status">
<span
<!--<span
:class="[
'tag',
row.status === '正常' ? 'tag-blue' : 'tag-orange',
row.devStatus === '1' ? 'tag-blue' : 'tag-orange',
]"
>
{{ row.status }}
</span>
</span>-->
<span v-if="row.devStatus==1" class="tag tag-blue">正常</span>
<span v-else-if="row.devStatus==2" class="tag tag-orange">停用</span>
<span v-else-if="row.devStatus==9" class="tag tag-orange">报废</span>
<span v-else>-</span>
</div>
</div>
<template v-if="shouldScroll">
<div
v-for="(row, index) in rows"
v-for="(row, index) in cycleList"
:key="'clone-' + index + row.id"
class="row"
>
<div class="col id">{{ row.id }}</div>
<div class="col type">{{ row.type }}</div>
<div class="col date">{{ row.date }}</div>
<div class="col id">{{ index+1 }}</div>
<div class="col type">{{ row.devTypeName }}</div>
<div class="col date">{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</div>
<div class="col status">
<span
<!--<span
:class="[
'tag',
row.status === '正常' ? 'tag-blue' : 'tag-orange',
]"
>
{{ row.status }}
</span>
</span>-->
<span v-if="row.devStatus==1" class="tag tag-blue">正常</span>
<span v-else-if="row.devStatus==2" class="tag tag-orange">停用</span>
<span v-else-if="row.devStatus==9" class="tag tag-orange">报废</span>
</div>
</div>
</template>
......@@ -59,6 +66,7 @@
</template>
<script>
import { listCycle } from "@/api/cycle/cycle";
export default {
name: "DeviceScrollTable",
props: {
......@@ -88,6 +96,7 @@ export default {
return {
shouldScroll: false,
isPaused: false,
cycleList: []
};
},
computed: {
......@@ -100,6 +109,7 @@ export default {
},
},
mounted() {
this.getList();
this.updateScrollState();
window.addEventListener("resize", this.updateScrollState);
},
......@@ -120,6 +130,13 @@ export default {
this.shouldScroll = body.scrollHeight > body.clientHeight;
});
},
getList() {
listCycle().then(res => {
if(res.code == 200){
this.cycleList = res.rows;
}
});
},
},
};
</script>
......
......@@ -9,7 +9,7 @@
<template>
<div class="left">
<div class="t">
<Title text="管线长度" text2="单位(公里)" />
<Title text="管线长度" text2="单位()" />
<div class="gxbox">
<div v-for="item in itemArr" :key="item.text" class="gxbox-item">
<div class="num">{{ item.num }}</div>
......@@ -19,12 +19,12 @@
</div>
<div class="lb">
<Title text="设备统计" />
<Title text="设备及场站" />
<div class="lba lbamt">
<div class="box-a">阀门井设备统计</div>
<div class="box-a">设备统计</div>
<div class="box-b">
<div class="fa">
<div class="faa">266</div>
<div class="faa">{{ deviceTotal }}</div>
<div class="fab">总量</div>
<div class="fac"></div>
</div>
......@@ -35,10 +35,10 @@
</div>
<div class="lba">
<div class="box-a">调压箱统计</div>
<div class="box-a">场站统计</div>
<div class="box-b">
<div class="fa">
<div class="faa">1448</div>
<div class="faa">{{ stationTotal }}</div>
<div class="fab">总量</div>
<div class="fac"></div>
</div>
......@@ -54,6 +54,7 @@
<script>
import Title from "@/views/bigWindow/PubCom/title.vue";
import PressureBarChart from "@/views/bigWindow/Ind/components/PressureBarChart.vue";
import { totalNumStatisticByType } from "@/api/screenstatistic/statistic";
export default {
name: "",
components: {
......@@ -64,36 +65,56 @@ export default {
return {
itemArr: [
{
num: "3.396",
num: 0,
text: "高压",
},
{
num: "14.66",
num: 0,
text: "次高",
},
{
num: "347.866",
num: 0,
text: "中压",
},
{
num: "1201.94",
num: 0,
text: "低压",
},
],
pressureData: [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
],
pressureData2: [
{ name: "次高压线", value: 120 },
{ name: "中压线", value: 98 },
{ name: "低压线", value: 86 },
],
pressureData: [],
pressureData2: [],
deviceTotal: 0,
stationTotal: 0,
};
},
mounted() {},
methods: {},
mounted() {
this.getTotalNumInfo();
},
methods: {
getTotalNumInfo(){
totalNumStatisticByType().then(res =>{
if(res.code == 200){
let data = res.data;
//管线
let pipeLengthInfo = data.pipeLengthInfo;
if(pipeLengthInfo){
pipeLengthInfo.forEach(item =>{
let info = this.itemArr[item.type-1];
info.num = item.totalLength;
})
}
//设备
let deviceNumInfo = data.deviceNumInfo;
if(deviceNumInfo) this.pressureData = deviceNumInfo;
this.deviceTotal = this.pressureData ? this.pressureData.map(item => item.value).reduce((sum, num) => sum + num, 0) : 0;
//场站
let stationNumInfo = data.stationNumInfo;
if(stationNumInfo) this.pressureData2 = stationNumInfo;
this.stationTotal = this.pressureData2 ? this.pressureData2.map(item => item.value).reduce((sum, num) => sum + num, 0) : 0;
}
})
},
},
};
</script>
<style lang="scss" scoped>
......
<template>
<div class="chars-wrapper">
<div class="bg">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!--<div class="bg">-->
<!--<div class="item"></div>-->
<!--<div class="item"></div>-->
<!--<div class="item"></div>-->
<!--</div>-->
<div ref="chart" class="pressure-bar-chart"></div>
</div>
</template>
......
<template>
<el-dialog title="当前位置信息" :visible.sync="open" width="800px" append-to-body destroy-on-close :close-on-click-modal="false">
<div class="mapChange">
<div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
</div>
<div id="map" style="width: 100%; height: 500px"></div>
</el-dialog>
......@@ -17,7 +21,8 @@
return{
//高德地图
gaoMap: null,
open: false
open: false,
mapStyle: true
}
},
methods:{
......@@ -72,7 +77,16 @@
this.addMarker(res.data);
}
})
}
},
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
},
computed: {
......@@ -81,6 +95,26 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.mapChange {
top: 95px;
color: #1890ff;
//background-color: #e8f4ff;
position: absolute;
display: flex;
z-index: 9999;
div {
padding: 4px 8px;
border: 1px solid #fff;
background-color: #e8f4ff;
margin-left: 8px;
cursor: pointer;
&.active,
&:hover {
background-color: #1890ff;
color: #fff;
}
}
}
</style>
......@@ -17,6 +17,10 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<div class="mapChange">
<div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
</div>
<div id="track-history-map" style="width: 100%; height: 500px"></div>
</el-dialog>
......@@ -42,7 +46,8 @@
},
trackTime: null,
markers: [],
pipeLine: null
pipeLine: null,
mapStyle: true
}
},
methods:{
......@@ -167,7 +172,16 @@
if(this.pipeLine){
this.gaoMap.map.remove(this.pipeLine);
}
}
},
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
},
computed: {
......@@ -176,6 +190,26 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.mapChange {
top: 155px;
color: #1890ff;
//background-color: #e8f4ff;
position: absolute;
display: flex;
z-index: 9999;
div {
padding: 4px 8px;
border: 1px solid #fff;
background-color: #e8f4ff;
margin-left: 8px;
cursor: pointer;
&.active,
&:hover {
background-color: #1890ff;
color: #fff;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment