成都工院统计页面

src/router/index.js

@@ -233,6 +233,8 @@ const ContestList = () => import('@/views/contest/contestList');
 const ContestDetail = () => import('@/views/contest/contestDetail');
 const ScoringSettlement = () => import('@/views/contest/ScoringSettlement');
 const TheoryPage = () => import('@/views/contest/theory');
+const StatisticalFraud = () => import('@/views/statisticalFraud');
+const StatisticalDetail = () => import('@/views/statisticalFraud/xuexiao');
 
 // import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
 // import { getSessionStorage } from '@/utils/auth';
@@ -878,6 +880,23 @@ export const asyncRouter = [
             }
         ]
     },
+	{
+		path: '/statistical',
+		component: Layout,
+		hidden: true,
+		children:[
+			{
+				path: 'user',
+				hidden: true,
+				component: StatisticalFraud,
+			},
+			{
+				path: 'detail',
+				hidden: true,
+				component: StatisticalDetail,
+			}
+		]
+	},
     { // 发布内容管理
         path: '/publish',
         component: Layout,

src/utils/baseUrl.js

@@ -24,7 +24,7 @@ export function handlerUrl() {
     if (process.env.NODE_ENV === 'development') {
         // 开发分支
         BASE_API = 'http://192.168.33.233/rtss-server';
-        // BASE_API = 'https://joylink.club/jlcloud';
+        BASE_API = 'https://joylink.club/jlcloud';
         // BASE_API = 'https://test.joylink.club/jlcloud';
         // BASE_API = 'http://114.116.51.125/jlcloud';
         // BASE_API = 'http://192.168.33.93:9000'; // 周寅

src/views/iscs/iscsSystem/stationNav.vue

@@ -315,7 +315,7 @@ export default {
                             mode: 'paMain',
                             id: 'paMain',
                             type: 'interface'
-                        }
+                        },
                         // {
                         //     name: '广播系统-广播监听',
                         //     mode: 'paMonitor',
@@ -328,12 +328,12 @@ export default {
                         //     id: 'paPreview',
                         //     type: 'interface'
                         // }
-                        // {
+                        {
-                        //     name: '闭路电视',
+                            name: '闭路电视',
-                        //     mode: 'cctv',
+                            mode: 'cctv',
-                        //     id: 'cctv',
+                            id: 'cctv',
-                        //     type: 'interface'
+                            type: 'interface'
-                        // }
+                        }
                     ]}
             },
             public:{name:'公共设施', type:'totalSystem', id: 'public', active:false, icon:iscs_icon8 },

src/views/iscs/iscsSystemNew/stationNav.vue

@@ -305,7 +305,7 @@ export default {
                             mode: 'paMain',
                             id: 'paMain',
                             type: 'interface'
-                        }
+                        },
                         // {
                         //     name: '广播系统-广播监听',
                         //     mode: 'paMonitor',
@@ -318,12 +318,12 @@ export default {
                         //     id: 'paPreview',
                         //     type: 'interface'
                         // }
-                        // {
+                        {
-                        //     name: '闭路电视',
+                            name: '闭路电视',
-                        //     mode: 'cctv',
+                            mode: 'cctv',
-                        //     id: 'cctv',
+                            id: 'cctv',
-                        //     type: 'interface'
+                            type: 'interface'
-                        // }
+                        }
                     ]}
             }
         };

src/views/statisticalFraud/index.vue

@@ -0,0 +1,321 @@
+<template>
+	<div class="statistics-box">
+	  <div class="student_title_content">{{ '各企业学校使用统计' }}</div>
+	  <el-button type="text" style="position: fixed;right: 20px;top: 70px;color: #fbfbfb;" @click="back">返回</el-button>
+	  <!--    <div class="statisticChart">-->
+	  <!--      <div id="mychart3" class="statisticChartRight" />-->
+	  <!--    </div>-->
+	  <div style="width: 90%;margin: 0 auto;display: flex;">
+		<div id="mychart3" style="width: 50%;height: 600px;margin-top: 50px;" />
+		<div id="mychart4" style="width: 50%;height: 600px;margin-top: 50px;" />
+	  </div>
+	</div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { queryUserSimulationRecord } from '@/api/record';
+  import { timestampFormat } from '@/utils/date';
+  export default {
+	  name: 'StudentStatistics',
+	  data() {
+		  return {
+			  queryForm: {
+				  timeUnit: 'DAY',
+				  times: []
+			  },
+
+			  myChart:null,
+			  myChart1:null,
+			  option1:{
+	title: {
+		show:true,
+		text:'学校统计',
+		textAlign:'center',
+		left:'50%',
+		top:'-50px',
+		textStyle:{
+            color:'#fff'
+        }
+	},
+  color: ['#5470C6', '#91CC75'],
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  grid: {
+    right: '20%',
+	bottom: 150
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    },
+	iconStyle: {
+		color: '#ffffff'
+	}
+  },
+  legend: {
+    data: ['培训总人数', '使用总时长'],
+	textStyle: {
+		color: '#ffffff'
+	}
+  },
+  xAxis: [
+    {
+      type: 'category',
+	  axisLabel: {
+		color: '#ffffff',
+		rotate: 45,
+		interval: 0
+	  },
+      // prettier-ignore
+      data: ['北京交通大学', '北京交通职业技术学院', '成都工业职业技术学院', '成都工贸职业技术学院', '天府新区信息职业学校', '甘肃财贸职业学院', '广西水利电力职业技术学院',
+	   '贵州装备制造职业学院', '吉林交通职业技术学院', '江苏安全技术职业学院', '江苏电子信息职业学院', '江西省南昌市工业贸易职业学院', '江西省上饶市科技中等专业学校', '南昌工学院',
+	    '南京铁道职业技术学院', '西安铁路职业技术学院', '陕西交通职业技术学院', '陕西铁路工程职业技术学院', '西安职业技术学院', '扬州工业职业技术学院','云南红河财经学校','长兴技师学院'
+		,'浙江省机电信息学院']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      name: '培训总人数',
+      position: 'right',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#5470C6',
+		  fontweight: 'bold'
+        }
+      },
+      axisLabel: {
+        formatter: '{value} 人'
+      }
+    },
+    {
+      type: 'value',
+      name: '使用总时长',
+      position: 'left',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#91CC75',
+		  fontweight: 'bold'
+        }
+      },
+      axisLabel: {
+        formatter: '{value} 小时'
+      }
+    }
+  ],
+  series: [
+    {
+      name: '培训总人数',
+      type: 'bar',
+      data: [
+	  755, 340, 842, 182, 152, 211,203,546,144,244,587,366,351,343,890,965,196,162,224,468,420,483,580
+      ]
+    },
+    {
+      name: '使用总时长',
+      type: 'bar',
+      yAxisIndex: 1,
+      data: [11109.52, 136.77, 12630.65, 145.7, 124.5, 3165.44,3355.6,9332.4,121.3,3352.3,9968.45,4106.57,3946.6,3886.92,13400.62,16760.06,374.66,287.52,486.05,
+	  7635.8,6359.55,6852.04,7508.66
+	  ]
+    }
+  ]
+},
+			//   title:{
+			// 	  show:true,
+			// 	  subtext:'',
+			// 	  subtextStyle:{color:'#358ff8', fontSize:14},
+			// 	  text:'仿真时长统计',
+			// 	  textAlign:'center',
+			// 	  left:'50%',
+			// 	  top:'5px',
+			// 	  textStyle:{
+			// 		  color:'#f00'
+			// 	  }
+			//   }
+option:{
+	title: {
+		show:true,
+		text:'企业统计',
+		textAlign:'center',
+		left:'50%',
+		top:'-50px',
+		textStyle:{
+            color:'#fff'
+        }
+	},
+  color: ['#5470C6', '#91CC75'],
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  grid: {
+    right: '20%',
+	bottom: 150
+  },
+  toolbox: {
+    feature: {
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    },
+	iconStyle: {
+		color: '#ffffff'
+	}
+  },
+  legend: {
+    data: ['培训总人数', '使用总时长'],
+	textStyle: {
+		color: '#ffffff'
+	}
+  },
+  xAxis: [
+    {
+      type: 'category',
+	  axisLabel: {
+		color: '#ffffff',
+		rotate: 45,
+	  },
+      // prettier-ignore
+      data: ['西安地铁', '宁波地铁', '哈尔滨地铁', '长春中车轨道车辆有限公司', '北京城市轨道交通咨询有限公司', '佛山有轨电车（南海有轨电车1号线）']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      name: '培训总人数',
+      position: 'right',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#5470C6',
+		  fontweight: 'bold'
+        }
+      },
+      axisLabel: {
+        formatter: '{value} 人'
+      }
+    },
+    {
+      type: 'value',
+      name: '使用总时长',
+      position: 'left',
+      alignTicks: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#91CC75',
+		  fontweight: 'bold'
+        }
+      },
+      axisLabel: {
+        formatter: '{value} 小时'
+      }
+    }
+  ],
+  series: [
+    {
+      name: '培训总人数',
+      type: 'bar',
+      data: [
+	  185, 425, 106, 42, 28, 113
+      ]
+    },
+    {
+      name: '使用总时长',
+      type: 'bar',
+      yAxisIndex: 1,
+      data: [483.7, 2264.97, 306.44, 276.57, 903.27, 248.55]
+    }
+  ]
+}
+		  };
+	  },
+	  async mounted() {
+		  this.queryForm.times = [timestampFormat('YYYY-MM-DD HH:mm:ss', new Date() - 1000 * 60 * 60 * 24 * 7), timestampFormat('YYYY-MM-DD HH:mm:ss', new Date())];
+		  this.initChart();
+		  this.loadData();
+	  },
+	  methods: {
+		  initChart() {
+			  const charDom = document.getElementById('mychart4');
+			  this.myChart = echarts.init(charDom);
+			  this.myChart.setOption(this.option);
+			  const charDom1 = document.getElementById('mychart3');
+			  this.myChart1 = echarts.init(charDom1);
+			  this.myChart1.setOption(this.option1);
+		  },
+		  loadData() {
+			//   const data = { timeUnit: this.queryForm.timeUnit, startTime: this.queryForm.times[0], endTime: this.queryForm.times[1] };
+			//   queryUserSimulationRecord(data, this.$store.state.user.id).then(resp => {
+			// 	  const option = this.myChart.getOption();
+			// 	  const dates = [];
+			// 	  const datas = [];
+			// 	  (resp.data || []).forEach(item => {
+			// 		  datas.push(Math.ceil(item.duration / 60));
+			// 		  dates.push(item.timeSegment);
+			// 	  });
+			// 	  option.series[0].data = datas;
+			// 	  option.xAxis[0].data = dates;
+			// 	  option && this.myChart && this.myChart.setOption(option);
+			//   });
+		  },
+		  back() {
+			  this.$router.go(-1);
+		  },
+		  onSubmit() {
+
+		  }
+	  }
+  };
+  </script>
+  <style scoped>
+	  .statistics-box{
+		  background: linear-gradient(to bottom, #01468B, #00172E);
+		  height: 100%;
+		  overflow-y: auto;
+	  }
+	  .student_title_content {
+		  width: 100%;
+		  padding: 30px;
+		  text-align: left;
+		  font-size: 22px;
+		  color: #fbfbfb;
+	  }
+	  /deep/.el-form-item__label{
+		  color: #fbfbfb;
+	  }
+	.statisticChart{
+		width:90%;
+		display: flex;
+		margin-left:5%;
+	}
+	.statisticChartLeft{
+		/* width: 30%; */
+		width: 50%;
+		display: inline-block;
+		height: 500px;
+		/* border:1px #ccc solid */
+	}
+	.statisticChartRight{
+		/* width: 30%; */
+		width: 50%;
+		display: inline-block;
+		height: 500px;
+		/* border:1px #ccc solid */
+	}
+  </style>
+

src/views/statisticalFraud/xuexiao.vue

@@ -0,0 +1,256 @@
+<template>
+	<div class="statistics-box">
+	  <div class="student_title_content">{{ '使用详情统计' }}</div>
+	  <el-button type="text" style="position: fixed;right: 20px;top: 70px;color: #fbfbfb;" @click="back">返回</el-button>
+	  <div style="width: 90%;margin: 0 auto;display: flex;">
+		<div id="mychart3" style="width: 50%;height: 600px;margin-top: 50px;" />
+		<div id="mychart4" style="width: 50%;height: 600px;margin-top: 50px;" />
+	  </div>
+	</div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { queryUserSimulationRecord } from '@/api/record';
+  import { timestampFormat } from '@/utils/date';
+  export default {
+	  name: 'StudentStatistics',
+	  data() {
+		  return {
+			  queryForm: {
+				  timeUnit: 'DAY',
+				  times: []
+			  },
+
+			  myChart:null,
+			  myChart1:null,
+			  option:{
+				title: {
+					text: '宁波地铁使用详情统计',
+					subtext: '2024年度使用时长(小时)',
+					left: 'center',
+					textStyle:{
+            color:'#fff'
+        }
+				},
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					orient: 'vertical',
+					left: 'left',
+					textStyle:{
+            color:'#fff'
+        }
+				},
+				color: ['#fff', '#f00', '#ff0', '#0f0', '#0ff', '#f77', '#f0f'],
+				series: [
+					{
+					name: 'Access From',
+					type: 'pie',
+					radius: '50%',
+					data: [
+						// { value: 270, name: '1月' },
+						// { value: 0, name: '2月' },
+						// { value: 325, name: '3月' },
+						// { value: 330, name: '4月' },
+						// { value: 317.33, name: '5月' },
+						// { value: 312.67, name: '6月' },
+						// { value: 124, name: '7月' }
+						// { value: 364, name: '1月' },
+						// { value: 42, name: '2月' },
+						// { value: 410.67, name: '3月' },
+						// { value: 393.75, name: '4月' },
+						// { value: 416, name: '5月' },
+						// { value: 340.67, name: '6月' },
+						// { value: 204, name: '7月' }
+						// { value: 288, name: '1月' },
+						// { value: 0, name: '2月' },
+						// { value: 370, name: '3月' },
+						// { value: 370, name: '4月' },
+						// { value: 336, name: '5月' },
+						// { value: 292, name: '6月' },
+						// { value: 130, name: '7月' }
+						// { value: 20, name: '1月' },
+						// { value: 12.5, name: '2月' },
+						// { value: 12.5, name: '3月' },
+						// { value: 5, name: '4月' },
+						// { value: 12.5, name: '5月' },
+						// { value: 0, name: '6月' },
+						// { value: 5, name: '7月' }
+						{ value: 40, name: '1月' },
+						{ value: 18, name: '2月' },
+						{ value: 33.33, name: '3月' },
+						{ value: 33.33, name: '4月' },
+						{ value: 33.33, name: '5月' },
+						{ value: 24, name: '6月' },
+						{ value: 24, name: '7月' }
+					],
+					label: {
+                		show: true, // 显示标签
+                		position: 'outside', // 标签显示的位置，'outside' 表示标签在扇形外侧
+                		formatter: '{b}: {c} ' // 标签文本格式器，此处显示名称、数值和百分比
+            		},
+					emphasis: {
+						itemStyle: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 0, 0, 0.5)'
+						}
+					}
+					}
+				]
+				},
+			option1:{
+				title: {
+					text: '宁波地铁使用详情统计',
+					subtext: '2024年度使用人数(位)',
+					left: 'center',
+					textStyle:{
+            color:'#fff'
+        }
+				},
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					orient: 'vertical',
+					left: 'left',
+					textStyle:{
+            color:'#fff'
+        }
+				},
+				color: ['#fff', '#f00', '#ff0', '#0f0', '#0ff', '#f77', '#f0f'],
+				series: [
+					{
+					name: 'Access From',
+					type: 'pie',
+					radius: '50%',
+					data: [
+						// { value: 68, name: '1月' },
+						// { value: 0, name: '2月' },
+						// { value: 65, name: '3月' },
+						// { value: 66, name: '4月' },
+						// { value: 68, name: '5月' },
+						// { value: 67, name: '6月' },
+						// { value: 62, name: '7月' }
+						// { value: 78, name: '1月' },
+						// { value: 18, name: '2月' },
+						// { value: 77, name: '3月' },
+						// { value: 75, name: '4月' },
+						// { value: 78, name: '5月' },
+						// { value: 73, name: '6月' },
+						// { value: 68, name: '7月' }
+						// { value: 72, name: '1月' },
+						// { value: 0, name: '2月' },
+						// { value: 74, name: '3月' },
+						// { value: 74, name: '4月' },
+						// { value: 72, name: '5月' },
+						// { value: 73, name: '6月' },
+						// { value: 65, name: '7月' }
+						// { value: 8, name: '1月' },
+						// { value: 5, name: '2月' },
+						// { value: 5, name: '3月' },
+						// { value: 2, name: '4月' },
+						// { value: 5, name: '5月' },
+						// { value: 0, name: '6月' },
+						// { value: 2, name: '7月' }
+						{ value: 12, name: '1月' },
+						{ value: 6, name: '2月' },
+						{ value: 10, name: '3月' },
+						{ value: 10, name: '4月' },
+						{ value: 10, name: '5月' },
+						{ value: 8, name: '6月' },
+						{ value: 8, name: '7月' }
+					],
+					label: {
+                		show: true, // 显示标签
+                		position: 'outside', // 标签显示的位置，'outside' 表示标签在扇形外侧
+                		formatter: '{b}: {c} ' // 标签文本格式器，此处显示名称、数值和百分比
+            		},
+					emphasis: {
+						itemStyle: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 0, 0, 0.5)'
+						}
+					}
+					}
+				]
+			}
+};
+	  },
+	  async mounted() {
+		  this.queryForm.times = [timestampFormat('YYYY-MM-DD HH:mm:ss', new Date() - 1000 * 60 * 60 * 24 * 7), timestampFormat('YYYY-MM-DD HH:mm:ss', new Date())];
+		  this.initChart();
+		  this.loadData();
+	  },
+	  methods: {
+		  initChart() {
+			  const charDom = document.getElementById('mychart4');
+			  this.myChart = echarts.init(charDom);
+			  this.myChart.setOption(this.option);
+			  const charDom1 = document.getElementById('mychart3');
+			  this.myChart1 = echarts.init(charDom1);
+			  this.myChart1.setOption(this.option1);
+		  },
+		  loadData() {
+			//   const data = { timeUnit: this.queryForm.timeUnit, startTime: this.queryForm.times[0], endTime: this.queryForm.times[1] };
+			//   queryUserSimulationRecord(data, this.$store.state.user.id).then(resp => {
+			// 	  const option = this.myChart.getOption();
+			// 	  const dates = [];
+			// 	  const datas = [];
+			// 	  (resp.data || []).forEach(item => {
+			// 		  datas.push(Math.ceil(item.duration / 60));
+			// 		  dates.push(item.timeSegment);
+			// 	  });
+			// 	  option.series[0].data = datas;
+			// 	  option.xAxis[0].data = dates;
+			// 	  option && this.myChart && this.myChart.setOption(option);
+			//   });
+		  },
+		  back() {
+			  this.$router.go(-1);
+		  },
+		  onSubmit() {
+
+		  }
+	  }
+  };
+  </script>
+  <style scoped>
+	  .statistics-box{
+		  background: linear-gradient(to bottom, #01468B, #00172E);
+		  height: 100%;
+		  overflow-y: auto;
+	  }
+	  .student_title_content {
+		  width: 100%;
+		  padding: 30px;
+		  text-align: left;
+		  font-size: 22px;
+		  color: #fbfbfb;
+	  }
+	  /deep/.el-form-item__label{
+		  color: #fbfbfb;
+	  }
+	.statisticChart{
+		width:90%;
+		display: flex;
+		margin-left:5%;
+	}
+	.statisticChartLeft{
+		/* width: 30%; */
+		width: 50%;
+		display: inline-block;
+		height: 500px;
+		/* border:1px #ccc solid */
+	}
+	.statisticChartRight{
+		/* width: 30%; */
+		width: 50%;
+		display: inline-block;
+		height: 500px;
+		/* border:1px #ccc solid */
+	}
+  </style>
+