mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交最新代码，统计分析

wangqin
yyl 10 months ago
parent
a21c9ee8c9
commit
9b9a27b6a7
4 changed files with 640 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      ruoyi-ui/package.json
  2. 9
      ruoyi-ui/src/common/menuData.js
  3. 193
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
  4. 438
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

3
ruoyi-ui/package.json
View File

@ -103,7 +103,8 @@
"vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3",
"vuescroll": "^4.18.1",
"vuex": "3.6.0"
"vuex": "3.6.0",
"zrender": "^5.4.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",

9
ruoyi-ui/src/common/menuData.js
View File

@ -97,14 +97,19 @@ export default [
name: "maintain",
position: "left",
path: "/maintain",
component: "developing.vue",
children: [
{
title: "收费运营",
name: "chargeableOperations",
path: "/maintain/board",
component: "maintenanceOperations/chargeableOperations/index.vue",
}]
},
{
title: "统计分析",
name: "statisticalAnalysis",
path: "/maintain/statisticalAnalysis",
component: "maintenanceOperations/statisticalAnalysis/index.vue",
}]
},
{
title: "公众服务",

193
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
View File

@ -0,0 +1,193 @@
import * as echarts from "echarts";
var data1 = [50, 32, 41, 61, 70, 39, 40, 55, 63, 55, 36, 45, 62, 74, 46, 73, 92, 60, 45, 33, 45,66,55, 32, 46, 36, 67, 49, 60, 55, 33, 35, 66]
var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15,12, 4, 6, 7, 9, 10, 15, 3, 5, 6,5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6]
var options = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(17,95,182,0.5)',
textStyle: {
color: "#fff"
},
formatter: function (params) {
return params[1].marker + '' + params[1].name + '\n' +
"<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#007AFF;option:0.5'></span>" +
"<span style=''> " + params[1].seriesName + ': ' + params[1].value + "\n" + ' </span>' +
"</div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background-color:#FF9B61;'></span>" +
'' + "<span style=''> " + params[3].seriesName + ': ' + params[3].value;
}
},
grid: {
left: '2%',
right: '2%',
top: '15%',
bottom: '12%'
},
xAxis: {
data: ['1日', '2日', '3日', '4日', '5日', '6日','7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
show: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#2D4377',
opacity: 1
}
},
// lineStyle: {
// show: true,
// type: 'solid'
// },
axisLabel: {
interval: 0,
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
},
margin: 12 // 刻度标签与轴线之间的距离。
}
},
yAxis: [{
min: 0,
max: 100,
type: 'value',
minInterval:20,
maxInterval:20,
name: '(单位：万)',
nameTextStyle: {
align: 'left',
color: 'rgba(255,255,255,0.8)',
padding: [0, 0, 0, -20],
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#2D4377',
opacity: 0.5
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#2D4377',
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14
}
},
data:[
'0','3','6','9','12','15','18'
],
}],
legend: {
top: '5%',
right: '5%',
icon: 'rect',
itemWidth: 25,
itemHeight: 10,
textStyle: {
color: '#fff',
fontSize: 14
},
lineStyle:{
show:false,
color:"#00E4BB",
},
data:[{
name:'增收金额',
itemStyle:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00E4BB' // 0% 处的颜色
}, {
offset: 1,
color: '#003B4E' // 100% 处的颜色
}], false)
},
},
{
name:'增涨率',
itemStyle:{
color:"#755400"
}
}],
itemGap: 12 // 设置间距
},
series: [
// 下半截柱状图
{
name: '增收金额',
type: 'bar',
barWidth: 12,
barGap: '-100%',
itemStyle: { // lenged文本
opacity: 1,
barBorderRadius: [13, 13, 13, 13],
color: function (params) {
var a = params.name.slice(0, 2)
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00E4BB' // 0% 处的颜色
}, {
offset: 1,
color: '#003B4E' // 100% 处的颜色
}], false)
}
},
data: data1
},
{
name: '',
type: 'bar',
barWidth: 12,
barGap: '-100%',
z: 0,
itemStyle: {
color: '#0BA7DA',
opacity: .1,
},
data: [100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100,100, 100, 100, 100, 100, 100,100, 100, 100, 100]
}
]
}
// option && myChart3.setOption(option);
// if (option && typeof option === "object") {
// myChart3.setOption(option, true);
// refreshChart(myChart3,option);
// var index3 = 0; //播放所在下标
// var mTime = setInterval(function () {
// myChart3.dispatchAction({
// type: 'showTip',
// seriesIndex: 0,
// dataIndex: index3
// });
// index3++;
// if (index3 >= 6) {
// //console.log('data4', fxdata.length)
// index3 = 0;
// //console.log(fxdata)
// }
// }, 2600);
// }
export default options;

438
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
View File

@ -0,0 +1,438 @@
<template>
<div class='TrafficFlow'>
<section class="foot">
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
<el-tab-pane label="设备分析" name="first">
</el-tab-pane>
<el-tab-pane label="设备查询" name="second">
<div class="topdiv" >
<div class="left-div" >
<el-button >刷新</el-button>
<el-button >导出Excel</el-button>
</div>
</div>
<div class="middleDiv" >
<div id="chart1" >
</div>
</div>
<div >
<el-table
:border="false"
:data="tableData"
height="480"
style="width: 100%">
<el-table-column
prop="nem"
label="序号"
width="80">
</el-table-column>
<el-table-column
prop="address"
label="设备类型"
width="">
</el-table-column>
<el-table-column
prop="root"
label="方向"
class-name="showClass"
width="">
<template slot-scope="scope">
<span class="showClass">{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="ip"
label="设备IP"
width=""
>
</el-table-column>
<el-table-column
prop="cj"
label="厂家"
width=""
>
</el-table-column>
<el-table-column
prop="xh"
label="型号"
width=""
>
</el-table-column>
<el-table-column
prop="wd"
label="网段"
width=""
>
</el-table-column>
<el-table-column
prop="jcsj"
label="监测时间"
width=""
>
</el-table-column>
<el-table-column
prop="cz"
label="操作"
width=""
>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</section>
</div>
</template>
<script>
import * as echarts from "echarts";
import chartsStatistics from "./assets/charts";
export default {
name: 'publicService',
components: {
},
data(){
return {
activeName:"first",
tableData: [{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
},
{
date: '2023-12-31 13:00:00',
name: '高清网络球形摄像机',
address: 'K234+235',
root:"中央分隔带",
ip:"10.0.61.43",
cj:"海康威视",
xh:"XXX",
wd:"梁山收费站监控网段",
jcsj:"2024-01-17",
cz:"在线",
}
]
}
},
methods:{
changeTabs(){
console.log("======================", this.myChart);
this.$nextTick(() => {
this.myChart.resize();
});
}
},
mounted() {
setTimeout(() => {
this.$nextTick(() => {
var myChart = echarts.init(document.getElementById('chart1'));
myChart.setOption(chartsStatistics);
this.myChart = myChart;
});
});
},
}
</script>
<style lang='scss' scoped>
::v-deep .el-table .cell {
padding-left:0px !important;
}
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important;
color:#00D1FF;
border-color: #064258 !important;
border:0px !important;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
}
::v-deep .el-table {
border:0px !important;
background-color: transparent;
font-size:12px !important;
}
::v-deep .el-table__body-wrapper {
background-color: #064258;
color: #fff;
}
::v-deep .el-table .el-table__cell {
height:47px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
::v-deep .el-table tr:hover td {
background: #1b2528 !important;
color:#00D1FF;
height: 47px;
}
::v-deep .el-table tr:nth-child(odd) td{
background-color: #13272F ;
border:0px !important;
}
::v-deep .el-table tr:nth-child(even) td{
border:0px !important;
}
::v-deep .el-table tr {
background-color: #133242 !important;
border-collapse:0;
border:0px !important;
background-color: transparent !important;
}
::v-deep .el-tabs__item{
display: inline-flex;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
min-width:128px;
position: relative;
left:10px;
}
::v-deep .el-tabs__active-bar {
min-width:128px;
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #133242;
opacity: 0.1;
}
.footTabs {
display: inline;
width:100%;
}
.TrafficFlow {
width: 100%;
height: 100%;
position: relative;
z-index: 6;
color: white;
.header-shot{
width: 98%;
margin: auto;
margin-top: 15px;
height:160px;
}
.middleDiv {
display: inline-flex;
width:100%;
height:343px;
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425860 100%);
margin-bottom:30px;
> div {
display: inline-flex;
width:100%;
height:100%;
}
}
.content {
width: 100%;
margin: auto;
display: flex;
flex: 1;
pointer-events: none;
margin-top: 19px;
>div {
pointer-events: auto;
}
.content-l {
width: calc(25%);
margin-right:20px;
}
.content-mi {
width: calc(50%);
margin-right:20px;
}
.content-m {
display: inline-flex;
flex-direction: column;
width: calc(100% / 4 );
margin-right:20px;
.content-m-t {
width:100%;
height:240px;
margin-bottom: 20px;
}
}
.content-r {
width: 49.4%;
}
}
.foot{
width: 98%;
margin: auto;
display: flex;
justify-content: space-between;
flex: 1;
pointer-events: none;
margin-top: 8px;
>div {
pointer-events: auto;
}
.foot-w {
width:100%;
}
.foot-l {
width: 726px;
}
.foot-m {
width: 613px;
}
.foot-r {
width: 493px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save