Browse Source

提交交通统计

wangqin
王钦 6 months ago
parent
commit
5ffc36572c
  1. 44
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
  2. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/data.js
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue
  4. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue
  5. 97
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/analysis/charts.js
  6. 154
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/analysis/index.vue

44
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue

@ -22,7 +22,7 @@
<i class="el-icon-close" />
</span>
<!-- 批量管控 -->
<div v-if="tabAction === '1'" style="width:800px; min-height: 320px;">
<div v-if="tabAction === '1'" style="width:800px; min-height: 350px;">
<Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
<component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
:visible="true" :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"
@ -35,9 +35,10 @@
</div>
</div>
<!-- 定时管控 -->
<div v-if="tabAction === '2'" style="width:800px; height: 320px; overflow-y:auto" class="cardPanel">
<div v-if="tabAction === '2'" style="width:800px; height: 350px; overflow-y:auto" class="cardPanel">
<Empty v-if="!data2.length" class="no-data" style="position: absolute">暂无数据</Empty>
<template v-else>
<div v-else style="display: flex;flex-direction: column;">
<div style="height:300;width:100%;overflow-y: auto;display: flex;flex-wrap: wrap;">
<div class="cardBox" v-for="(item, index) in data2" :key="index">
<Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" buttonText="详情">
<template #form-remark="{ data }">
@ -55,12 +56,20 @@
</template>
</Card>
</div>
</template>
</div>
<!-- 分页 -->
<div class="footer">
<ElPagination @current-change="bindTimeing" @size-change="onSizeChange2" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
:page-size="searchData2.pageSize" :current-page.sync="searchData2.pageNum" layout="total, sizes, prev, pager, next"
:total="tableTotal2" class="Pagination">
</ElPagination>
</div>
</div>
</div>
<!-- 管控记录 -->
<div v-if="tabAction === '3'" style="width:800px;height: 320px;display: flex;flex-direction: column; justify-content: center;align-items: flex-start;" >
<div v-if="tabAction === '3'" style="width:800px;height: 350px;display: flex;flex-direction: column; justify-content: center;align-items: flex-start;" >
<Form v-model="dataRecord" style="width:100%;" labelWidth="90px" column="2" class="form" ref="FormRecordRef" :formList="formRecord" />
<Table :data="tableData" height="500px" style="margin: 20px;width:95%">
<Table :data="tableData" height="500px" style="margin: 20px 20px 0px 20px;width:95%">
<ElTableColumn label="管控时间" prop="operTime" width="200"/>
<ElTableColumn label="设备名称" prop="dcDeviceName"/>
<ElTableColumn label="管控方式" prop="operType" width="100"/>
@ -77,14 +86,12 @@
</template>
</ElTableColumn>
</Table>
<!-- 分页 -->
<div class="footer">
<div class="footer" style="width:100%">
<ElPagination @current-change="bindRecord" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
:page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
:total="tableTotal" class="Pagination">
</ElPagination>
</div>
</div>
</div>
@ -345,6 +352,14 @@ export default {
},
],
data2:[], //
tableTotal2:0,
searchData2: {
pageSize: 20,
pageNum: 1,
},
dataRecord:{
operType: "0",
operTime:[]
@ -463,16 +478,22 @@ export default {
request({
url: `/business/dcBatchFunctionsJobGroup/list`,
method: "get",
params: {},
params: {...this.searchData2},
})
.then((result) => {
if (result.code != 200) return;
this.tableTotal = result.total;
this.tableTotal2 = result.total;
this.data2 = result.rows;
})
.finally(() => {
});
},
onSizeChange2(pageSize) {
this.data2 = [];
this.searchData2.pageSize = pageSize;
this.searchData2.pageNum = 1;
this.bindTimeing();
},
bindRecord(){
request({
url: `/business/dcOperLog/list`,
@ -572,6 +593,7 @@ div.el-popper.global-input-search-popover {
flex-basis: percentage(1/4);
padding-right: 10px;
padding-bottom: 10px;
overflow-y: auto;
}
.remark {
font-size: 14px; line-height: 20px; height: 40px; overflow: hidden;

4
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/data.js

@ -4,7 +4,7 @@ export const defaultTableInfo = {
deviceType: 2,
searchRule: 1,
number: 0,
isDefault: true
// zx_operationType: 2,
isDefault: true,
zx_operationType: 2,
// hf_operationType: 2,
};

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue

@ -130,7 +130,7 @@ export default {
"deviceType": this.tableData[index].deviceType,
"searchRule": this.tableData[index].searchRule,
"number": this.tableData[index].number,
"deviceList": this.tableData[index].devList.join(','),
"deviceList": this.tableData[index].devList?.join(','),
"executeConfig": "{\"operationType\":2}",
"recoverConfig": "{\"operationType\":2}"
}

6
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue

@ -193,7 +193,10 @@ export default {
// this.modelVisible = false;
// this.submitting = false;
// this.$emit('queryData',true)
// return;
//
if(formData.dcEventTrafficControl && formData.dcEventTrafficControl.rampId){
formData.dcEventTrafficControl.rampId = formData.dcEventTrafficControl.rampId.join(',')
}
request({
url: `/dc/system/event`,
@ -249,6 +252,7 @@ export default {
.fader {
height: 500px;
overflow-y: auto;
overflow-x: none;
}
.form {

97
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/analysis/charts.js

@ -0,0 +1,97 @@
/* 数据 */
let nameList = [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
]; // 类别
var options = {
tooltip: {
show: true,
trigger: "axis",
valueFormatter: null
},
legend: {
icon: "circle",
itemHeight: 8,
itemWidth: 8,
top: "5%",
x: "right",
textStyle: {
color: "#fff",
},
},
grid: {
top: "25%", //上边距
right: "0%", //右边距
left: "0%", //左边距
bottom: "0%", //下边距
containLabel: true,
},
xAxis: {
data: [],
axisTick: {
show: false, //隐藏X轴刻度
},
axisLine: {
lineStyle: {
color: "rgba(49, 217, 255, 0.8)",
},
},
axisLabel: {
show: true,
color: "#fff",
fontFamily: "Source Han Sans CN-Regular",
},
},
yAxis: [
{
type: "value",
name: "(指标)",
nameTextStyle: {
color: "#fff",
fontFamily: "Source Han Sans CN-Regular",
align: "right",
verticalAlign: "center",
},
axisLabel: {
color: "#fff",
fontFamily: "HarmonyOS Sans-Regular",
},
splitLine: {
lineStyle: {
color: "rgba(49, 217, 255, 0.5)",
},
},
},
],
series: [
{
name: "交通特征",
type: "line",
symbol: "circle",
symbolSize: 0,
// yAxisIndex: 1, // 与第二个 y 轴关联
itemStyle: {
color: "#32BB8A",
},
lineStyle: {
width: 2,
},
data: [
1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
], // 折线图的数据
}
],
};
export default options;

154
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/analysis/index.vue

@ -22,7 +22,7 @@
</el-form>
<div class="body">
<vuescroll :ops="scrollOptions">
<div class="device keep-ratio" v-for="(item, index) of list">
<div :class="'device keep-ratio ' + (listIndex===index?'deviceSel':'')" v-for="(item, index) of list" @click="devClick(item,index)">
<div>{{ item.deviceName }}</div>
<el-tooltip :content="(item.deviceState == 0 || item.deviceState == null) ? '异常' : '在线'" placement="top">
<img src="@/assets/jihe/images/offline.svg" class="state"
@ -53,9 +53,25 @@
style="width: 140px"
placeholder="请选择"
/>
<el-select v-model="devParam" @change="devChange"
class="devparam" placeholder="请选择" >
<el-option v-for="item in devOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<Button style="margin-left: 25px" @click.native="bindData()">查询</Button>
</div>
</div>
<div class="right-bottom" >
<div id="chart1" class="chart1 keep-ratio" origin="top"></div>
<div class="right-table">
<Table :data="tableData" >
<ElTableColumn label="名称" prop="name" width="300" align="center" />
<ElTableColumn label="采集时间" prop="timestamp" align="center" />
<ElTableColumn :label="devParamName" prop="result" width="300" align="center" />
</Table>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</template>
@ -66,14 +82,22 @@ import vuescroll from "vuescroll";
import scrollOptions from "@/common/scrollbar.js";
import { Message } from "element-ui";
import WgtTitle from "@screen/pages/perception/widgets/title";
import Button from "@screen/components/Buttons/Button.vue";
import { setLoading } from "@screen/utils/index.js";
import chart1 from "./charts";
import * as echarts from "echarts";
import Table from '@screen/components/Table.vue';
export default {
name: 'smartAnalysis',
components: {
vuescroll,
WgtTitle
WgtTitle,
Button,
Table
},
data() {
return {
listIndex: -1,
form: {
deviceName: '',
deviceState: [1, 0]
@ -85,7 +109,11 @@ export default {
total: 0,
list: [],
scrollOptions,
date:''
date:'',
devParam:null,
devOptions:[],
devParamName:'',
tableData:[]
}
},
created() {
@ -96,6 +124,81 @@ export default {
this.date = moment().format('YYYY-MM-DD')
},
methods: {
bindData(){
if(this.devParam === null){
Message.warning('未选择参数')
return;
}
const param = _.find(this.devOptions,{id:this.devParam})
this.devParamName = param.name;
const closeLoading = setLoading();
request({
url: 'business/device/properties/deviceNameData',
method: 'post',
data:{
deviceId: this.list[this.listIndex].deviceId,
propertyId: param.propertyId,
propertyName: param.propertyName,
deviceType: param.deviceType,
dateTime: this.date
}
}).then(result => {
if (result.code != 200) return Message.error(result?.msg);
let name = [];
let value = [];
let unit = ''
result.data.forEach((e,index) => {
e.name = this.list[this.listIndex].deviceName,
name.push(e.timestamp.substr(11))
const n = e.result.match(/\d+\.*\d*/g);
if(n.length > 0){
if(unit === ''){
unit = e.result.substr(n[0].length)
}
value.push(parseFloat(n[0]))
} else {
value.push(0)
}
});
this.tableData = result.data;
chart1.xAxis.data = name;
chart1.yAxis[0].name = unit;
chart1.series[0].name = param.name;
chart1.series[0].data = value;
chart1.tooltip['valueFormatter'] = function (value) {
return value + " "+unit;
}
var myChart1 = echarts.init(document.getElementById("chart1"));
myChart1.setOption(chart1);
}).finally(()=>{
closeLoading()
})
},
devChange(e){
const dev = _.find(devOptions,{id: e})
console.log(dev)
},
devClick(item,index){
this.listIndex = index;
request({
url: 'business/device/deviceParameter',
method: 'get',
params:{
deviceType:item.deviceType
}
}).then(result => {
if (result.code != 200) return Message.error(result?.msg);
this.devOptions = result.rows;
if(result.rows.length > 0){
this.devParam = result.rows[0].id
this.bindData();
} else {
this.devParam = null;
}
})
},
onSizeChange(pageSize) {
this.page.pageSize = pageSize;
this.bindList();
@ -112,6 +215,7 @@ export default {
if (params.deviceName === '') {
delete params.deviceName
}
request({
url: 'business/device/selectDeviceNameList',
method: 'get',
@ -120,6 +224,7 @@ export default {
if (result.code != 200) return Message.error(result?.msg);
this.list = result.rows;
this.total = result.total;
})
},
onResetSearch() {
@ -171,6 +276,31 @@ export default {
.right {
flex: 1;
margin-left: 30px;
.top{
.search{
display: flex;
justify-content: flex-end;
}
}
.right-bottom{
width: 100%;
height: 100%;
flex:1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.chart1{
width: 100%;
flex:1;
}
.right-table{
width: 100%;
height: 600px;
overflow-y: auto;
margin-bottom: 30px;
}
}
}
@ -197,7 +327,9 @@ export default {
display: flex;
justify-content: space-between;
}
.deviceSel{
background-color:#1798a9;
}
.device:hover {
background-color: #1d647f;
}
@ -206,17 +338,11 @@ export default {
width: 18px;
height: 18px;
}
.top{
.search{
display: flex;
justify-content: flex-end;
}
}
</style>
<style lang="scss" scoped>
.Pagination {
// color: #fff;
::v-deep {
@ -296,7 +422,11 @@ export default {
margin-left: 10px;
}
}
.devparam{
width: 200px;
margin-left: 20px;
}
.selectDate {
width: 89px;
border: 1px solid #00b3cc;

Loading…
Cancel
Save