页面

zhsq_qk-admin/src/main/resources/application-druid.yml

@@ -6,9 +6,12 @@ spring:
     druid:
       # 主库数据源
       master:
-        url: jdbc:mysql://localhost:3306/zhsq_qk_2.0?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#        url: jdbc:mysql://localhost:3306/zhsq_qk_2.0?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
+#        username: root
+#        password: root
+        url: jdbc:mysql://192.168.10.15:63306/zhsq_qk_2.0?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
         username: root
-        password: root
+        password: sooka1a2b3c4d%...
       # 从库数据源
       slave:
         # 从数据源开关/默认关闭

zhsq_qk-ui/package.json

@@ -41,6 +41,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
+    "jquery": "2.2.1",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

zhsq_qk-ui/src/api/system/camera.js

@@ -42,3 +42,10 @@ export function delCamera(id) {
         method: 'delete'
     })
 }
+
+export function getCameraList() {
+  return request({
+    url: '/system/camera/selectCameraList',
+    method: 'get'
+  })
+}

zhsq_qk-ui/src/assets/images/TL_Tab.js

@@ -0,0 +1,56 @@
+	(function($){
+		$.fn.TL_Tab = function(options) {
+			var defaults = {
+				tab : ".df_67 ol li",
+				box : ".df_67 ul li",
+				events : "over",
+				num : 3,
+				speed : 300
+			};
+			var setting = $.extend(defaults, options);
+
+			var tl_tab = setting.tab;
+			var tl_box = setting.box;
+			var tl_events = setting.events;
+			var tl_num = setting.num;
+			var tl_speed = setting.speed;
+
+			var tl_time_out = null;
+
+			$(tl_box).css({
+				display: 'none'
+			});
+
+			$(tl_tab).removeClass('df_on');
+			$(tl_tab).eq(tl_num - 1).addClass('df_on');
+
+			$(tl_box).eq(tl_num - 1).css({
+				display: 'block'
+			});
+
+			if (tl_events === 'click') {
+				$(tl_tab).click(function () {
+					$(tl_tab).removeClass('df_on');
+					$(tl_tab).eq($(this).index()).addClass('df_on');
+					$(tl_box).stop().fadeOut(tl_speed);
+					$(tl_box).eq($(this).index()).stop().fadeIn(tl_speed);
+				});
+			}
+			if (tl_events === 'over') {
+				$(tl_tab).hover(function () {
+					var _this = this;
+					clearTimeout(tl_num);
+					tl_time_out = setTimeout(function () {
+						$(tl_tab).removeClass('df_on');
+						$(tl_tab).eq($(_this).index()).addClass('df_on');
+						$(tl_box).stop().fadeOut(tl_speed);
+						$(tl_box).eq($(_this).index()).stop().fadeIn(tl_speed);
+					}, 30);
+
+				}, function () {
+					clearTimeout(tl_time_out);
+				});
+			}
+
+		};
+	})(jQuery);

zhsq_qk-ui/src/assets/images/leftnav.js

@@ -0,0 +1,29 @@
+$(function() {
+	var Accordion = function(el, multiple) {
+		this.el = el || {};
+		this.multiple = multiple || false;
+
+		// Variables privadas
+		var links = this.el.find('.link');
+		// Evento
+		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
+	};
+
+	Accordion.prototype.dropdown = function(e) {
+		var $el = e.data.el;
+			$this = $(this);
+			$next = $this.next();
+
+		$next.slideToggle();
+		$this.parent().toggleClass('open');
+
+		if (!e.data.multiple) {
+			$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
+		}
+	};
+
+	var accordion = new Accordion($('#accordion'), false);
+	$('.submenu li').click(function () {
+		$(this).addClass('current').siblings('li').removeClass('current');
+	});
+});

zhsq_qk-ui/src/assets/images/qkq_body.css

@@ -0,0 +1,403 @@
+@charset "utf-8";
+
+/* CSS Document */
+html{ font-size: 13.33333vw; font-family: PingFangSC-Regular,Microsoft YaHei;}
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+p,
+blockquote,
+pre,
+hr,
+figure,
+table,
+caption,
+th,
+td,
+form,
+fieldset,
+legend,
+input,
+button,
+textarea,
+menu {
+    /* [disabled]margin:0; */
+    padding: 0;
+    font-family: "microsoft yahei", "simhei", "simsun";
+    color: #394351;
+    font-size: 16px;
+    margin: 0;
+    outline: 0;
+}
+
+body {
+    background-color: #f5f5f5;
+	position: relative;
+}
+
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+    display: block;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+caption,
+th {
+    font-weight: normal;
+}
+
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+    border: 0;
+}
+
+i,
+cite,
+em,
+var,
+address,
+dfn {
+    font-style: normal;
+}
+
+[hidefocus],
+summary {
+    outline: 0;
+}
+
+li {
+    list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+    font-size: 100%;
+    font-weight: normal
+}
+
+sup,
+sub {
+    font-size: 83%;
+}
+
+pre,
+code,
+kbd,
+samp {
+    font-family: inherit;
+}
+
+q:before,
+q:after {
+    content: none;
+}
+
+textarea {
+    overflow: auto;
+    resize: none;
+}
+
+label,
+summary {
+    cursor: default;
+}
+
+a,
+button {
+    cursor: pointer;
+}
+
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+    text-decoration: none;
+
+}
+
+a,
+a:hover {
+    color: #394351;
+}
+
+
+
+/* 全局通用 */
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden
+}
+
+.clearfix {
+    height: 1%;
+}
+
+input {
+    border: 0px;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button;
+    cursor: pointer
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0
+}
+
+input {
+    line-height: normal
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #9ea5af;
+    font-size: 14px;
+}
+
+.search_input_Big::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #ffae85;
+}
+
+ ::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #c2c6cb;
+    font-size: 14px;
+}
+
+ :-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #c2c6cb;
+    font-size: 14px;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+.clear{ clear:both;}
+.clearfix:after {
+    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
+   display: block;   /*加入的这个元素转换为块级元素。*/
+    clear: both;     /*清除左右两边浮动。*/
+    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
+   line-height: 0;    /*行高为0；*/
+    height: 0;     /*高度为0；*/
+   font-size:0;    /*字体大小为0；*/}
+
+.clearfix { *zoom:1;}   /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
+
+@font-face {
+  font-family: 'MyWebFont'; /* 给字体命名 */
+  src:url('../fonts/hkxzy.TTF')  format('truetype'), /* Safari, Android, iOS */
+}
+
+body {
+  font-family: 'MyWebFont', sans-serif; /* 使用字体，同时提供一个后备字体 */
+}
+/*
+@font-face{
+　　font-family:"hkxzy";
+　　src:url("../fonts/hkxzy.TTF");
+　}
+*/
+
+.map{
+	width: 100%;
+	height: 99.62vh;
+}
+.map img{
+	width: 100%;
+	height: 100%;
+}
+/***********************头部*************************/
+.header{
+	width: 100%;
+	background: url(qkq_topbg.png) no-repeat center;
+	height: 68px;
+	position: fixed;
+	top:0px;
+	left: 0px;
+	z-index: 1;
+}
+.header h1{
+	font-family: MyWebFont;
+	line-height: 56px;
+	font-size: 36px;
+	text-align: center;
+	background-image: linear-gradient(to bottom, #f4f1e8, #f0ddaa);
+	color: #ffffff;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+
+}
+
+/*中间内容*/
+.left_con{
+	position: fixed;
+	top:30px;
+	left: 20px;
+	z-index: 2;
+	background: url(qkq_leftbg.png) no-repeat left bottom;
+	width: 350px;
+	min-height: 85vh;
+}
+.left_con .top_txt{
+	padding-left: 15px;
+	padding-bottom: 10px;
+}
+.left_con .top_txt b{
+	padding-left: 20px;
+	background:url(qkq_dw.png) no-repeat left center;
+	font-size: 16px;
+	color: #fceec9;
+}
+.left_con .top_txt span{
+	font-size: 14px;
+	color: #fceec9;
+	margin-left: 6px;
+}
+.right_con{
+	position: fixed;
+	top:30px;
+	right: 20px;
+	z-index: 2;
+	background: url(qkq_rightbg.png) no-repeat left bottom;
+	width: 350px;
+	min-height: 85vh;
+}
+.right_con .top_txt{
+	padding-left: 50px;
+	padding-bottom: 10px;
+}
+.right_con .top_txt b{
+	font-size: 16px;
+	color: #fceec9;
+}
+.right_con .top_txt span{
+	font-size: 14px;
+	color: #fceec9;
+	margin-right: 6px;
+}
+.qkq_tit{
+	background: url(qkq_titbg1.png) no-repeat top left;
+    color: #d0e3fd;
+    font-size: 16px;
+    height: 30px;
+    padding: 15px 0px 0px 31px;
+    margin-bottom: 10px;
+    background-size: 100%;
+	position: relative;
+}
+.qkq_tit select{
+	float:right;
+	background: none;
+	border: 0px;
+	outline: 0px;
+	color: #deebff;
+	font-size: 12px;
+	height: 21px;
+	line-height: 21px;
+}
+.qkq_tit select option {
+background-color:#001339;
+color: #fff;
+	border: 0px;
+}
+
+/*底部*/
+.footer{
+	background: url(qkq_btmbg.png) no-repeat bottom;
+	width: 100%;
+	position: fixed;
+	bottom:0px;
+	left: 0px;
+	z-index: 1;
+	min-height: 51px;
+}
+
+
+
+
+

zhsq_qk-ui/src/assets/images/qkq_charts.js

@@ -0,0 +1,968 @@
+$(function () {
+	//	营商环境
+	// 基于准备好的dom，初始化echarts实例
+	var myChart = echarts.init(document.getElementById('yshj'));
+	option = {
+		tooltip: {},
+
+		radar: {
+			radius: "65%", //大小
+			nameGap: 1, // 图中工艺等字距离图的距离
+			center: ["40%", "40%"], // 图的位置
+			name: {
+				textStyle: {
+					color: "rgba(175, 190, 211, 1)",
+					fontSize: 10
+				},
+				formatter: function (name) {
+					return name;
+				}
+			},
+			indicator: [{
+					"name": '规上入统',
+					"max": "100"
+				}, {
+					"name": '大型企业',
+					"max": "100"
+				}, {
+					"name": '中型企业',
+					"max": "100"
+				}, {
+					"name": '小型企业',
+					"max": "100"
+				}, {
+					"name": '微型企业',
+					"max": "100"
+				}, {
+					"name": '汽配产业',
+					"max": "100"
+				},
+
+			],
+			axisLine: {
+				lineStyle: {
+
+					color: "rgba(2, 96, 176, 0.8)"
+				}
+			},
+			splitArea: {
+				show: false,
+				areaStyle: {
+					color: "rgba(255,0,0,0)" // 图表背景的颜色
+				}
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					width: 1,
+					color: "rgba(2, 96, 176, 0.8)" // 设置网格的颜色
+				}
+			}
+		},
+
+		series: [{
+			name: "营商环境分析",
+			type: "radar",
+			symbol: "angle",
+			itemStyle: {
+				normal: {
+					areaStyle: {
+						type: "default"
+					}
+				}
+			},
+			data: [{
+				symbol: "circle",
+				symbolSize: 5,
+				value: [70, 42, 63, 84, 75, 34],
+				areaStyle: {
+					color: "rgba(2, 96, 176, 0.8)"
+				},
+				itemStyle: {
+					normal: {
+						borderWidth: 1,
+						color: "RGBA(0, 34, 66, 1)",
+						borderColor: "rgba(2, 96, 176, 1)"
+					}
+				},
+				lineStyle: {
+					color: "rgba(2, 96, 176, 1)",
+					width: 1
+				}
+			}]
+		}]
+	}
+
+	if (option) {
+		myChart.setOption(option);
+	}
+
+
+
+	//	网格管理
+	// 基于准备好的dom，初始化echarts实例
+	var myChart = echarts.init(document.getElementById('wggl'));
+	//柱状图  渐变色双y轴
+
+	//可以鼠标滚动
+
+	//点击背景和点击图形触发不同的事件
+
+	let dataList = [{
+		name: '前程街道',
+		value: '56'
+	}, {
+		name: '富民街道',
+		value: '75'
+	}, {
+		name: '广兴街道',
+		value: '85'
+	}, {
+		name: '东风街道',
+		value: '78'
+	}, {
+		name: '锦绣街道',
+		value: '76'
+	}]
+
+
+	var option = {
+		grid: {
+			left: "10%", //距离左边的距离
+			right: "2%", //距离右边的距离
+			bottom: "10%", //距离下边的距离
+			top: "8%" //距离上边的距离
+		},
+		title: {
+			text: '',
+			left: 26,
+			top: 26,
+			textStyle: {
+				color: '#FFFFFF',
+				fontSize: 12,
+				fontWeight: 50000,
+				fontFamily: 'PingFang SC'
+			}
+		},
+
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				type: "shadow",
+				crossStyle: {
+					color: "#999"
+				}
+			},
+		},
+		xAxis: [{
+			type: "category",
+			data: ['前程街道', '富民街道', '广兴街道', '东风街道', '锦绣街道'],
+			axisLabel: {
+				textStyle: {
+					color: "#ffffff",
+					fontSize: 10,
+					fontFamily: "Microsoft YaHei"
+				}
+			},
+			axisLine: {
+				show: true
+			},
+			axisTick: {
+				show: false
+			}
+		}],
+		yAxis: [{
+				type: "value",
+				axisLabel: {
+					formatter: "{value}",
+					textStyle: {
+						color: "#fff",
+						fontSize: 12,
+						fontFamily: "Microsoft YaHei"
+					},
+				},
+				splitLine: {
+					show: false,
+					lineStyle: {
+						color: "#666"
+					}
+				},
+				axisLine: {
+					show: true
+				},
+				axisTick: {
+					show: false
+				}
+			},
+
+		],
+		dataZoom: [{
+			type: 'inside',
+			start: 0,
+			end: dataList.length > 15 ? 35 : 100
+		}],
+		series: [{
+				name: "",
+				type: "bar",
+				data: dataList,
+				barGap: '-100%',
+				barCategoryGap: '70%',
+				itemStyle: {
+					normal: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: 'rgba(39,116,212,1)'
+						}, {
+							offset: 1,
+							color: 'rgba(1,23,60,1)'
+						}])
+					},
+					emphasis: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: 'rgba(39,116,212,1)'
+						}, {
+							offset: 1,
+							color: 'rgba(1,23,60,1)'
+						}])
+					}
+				},
+			},
+
+		]
+	}
+
+
+
+	if (option) {
+		myChart.setOption(option);
+	}
+
+
+	//	经济运行
+
+	//$("#mySelect").select2();
+
+
+	var myChart = echarts.init(document.getElementById('jjyx'));
+
+	$("#mySelect").on('change', function () {
+		var selectedValue = $(this).val();
+
+
+
+		if (selectedValue === 'option1') {
+
+
+			// 2023
+			var zzx1 = [27, 38, 41, 21, 27];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [37, 40, 63, 61, 64];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		} else if (selectedValue === 'option2') {
+
+
+			// 2023
+			var zzx1 = [57, 18, 31, 61, 37];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [27, 60, 23, 11, 34];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		} else if (selectedValue === 'option3') {
+
+
+			// 2023
+			var zzx1 = [57, 18, 31, 61, 37];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [27, 60, 23, 11, 34];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		} else if (selectedValue === 'option4') {
+
+
+			// 2023
+			var zzx1 = [37, 18, 71, 61, 37];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [27, 80, 43, 11, 54];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		} else if (selectedValue === 'option5') {
+
+
+			// 2023
+			var zzx1 = [57, 18, 81, 61, 67];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [14, 62, 23, 11, 34];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		} else if (selectedValue === 'option6') {
+
+
+			// 2023
+			var zzx1 = [43, 18, 63, 27, 44];
+			var zx = zzx1.map((item) => {
+				return 100 - item;
+			});
+			// 2024
+			var wgx1 = [34, 26, 75, 44, 26];
+			var wg = wgx1.map((item) => {
+				return 100 - item;
+			});
+
+
+		}
+
+		var option = {
+			tooltip: {
+				trigger: "axis",
+				axisPointer: {
+					// 坐标轴指示器，坐标轴触发有效
+					type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+				},
+				formatter: function (e) {
+					// console.log(e);
+					var str =
+						e[6].axisValue +
+						"<br>" +
+						"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
+						e[6].color.colorStops[0].color +
+						";'></span>" +
+						"" +
+						e[6].seriesName +
+						" : " +
+						e[6].value +
+						"<br>" +
+						"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
+						e[8].color.colorStops[0].color +
+						";'></span>" +
+						"" +
+						e[8].seriesName +
+						" : " +
+						e[8].value;
+					return str;
+				},
+			},
+			grid: {
+				left: "2%",
+				right: "4%",
+				bottom: "5%",
+				top: "10%",
+				containLabel: true,
+			},
+			legend: {
+				data: ["2023年度", "2024年度"],
+
+				top: 1,
+				textStyle: {
+					color: "#deebff",
+					fontSize: 12,
+				},
+				itemWidth: 12,
+				itemHeight: 10,
+				itemGap: 35,
+				color: "#242424",
+				selectedMode: false,
+			},
+			xAxis: {
+				type: "category",
+				data: [
+					"第一季度",
+					"第二季度",
+					"第三季度",
+					"第四季度",
+				],
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#010710",
+					},
+				},
+				axisTick: {
+					show: true,
+				},
+				axisLabel: {
+					// interval: 0,
+					// rotate: 40,
+					textStyle: {
+						fontFamily: "Microsoft YaHei",
+						color: "#fff", // x轴颜色
+						fontWeight: "normal",
+						fontSize: "12",
+						lineHeight: 10,
+					},
+					interval: 0, //标签设置为全部显示
+					margin: 15,
+					lineHeight: 15,
+					// fontSize: 11,
+					//             formatter: function(params) {
+					//                 var a = params.substring(0, params.length - 5);
+					//                 //   console.log(params.substring(0, params.length - 3));
+					//                 var newParamsName = a + "/n";
+					//
+					//                 //将最终的字符串返回
+					//                 return newParamsName;
+					//             },
+				},
+			},
+
+			yAxis: {
+				min: 0,
+				max: 100,
+				type: "value",
+
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#010710",
+					},
+				},
+				splitLine: {
+					show: false,
+					lineStyle: {
+						color: "rgba(135,140,147,1)", //左侧显示线
+					},
+				},
+				axisTick: {
+					show: false,
+				},
+				axisLabel: {
+					formatter: "{value}",
+					textStyle: {
+						color: "#deebff",
+						fontSize: 12,
+					},
+				},
+			},
+			series: [
+				// 计划产值中间正方形
+				{
+					type: "pictorialBar",
+					symbol: "diamond",
+
+					symbolSize: [barWidth, 4],
+					symbolOffset: [-10, -2],
+					symbolPosition: "end",
+					z: 12,
+					color: "rgba(0,222,255,1)",
+					data: zzx1,
+				},
+				// 实际产值中间正方形
+				{
+					type: "pictorialBar",
+					symbol: "diamond",
+					symbolSize: [barWidth, 4],
+					symbolOffset: [10, -2],
+					symbolPosition: "end",
+					z: 12,
+					color: "rgba(59,237,222,1)",
+					data: wgx1,
+				},
+				//  计划产值底部正方形
+				{
+					type: "pictorialBar",
+					symbol: "diamond",
+					symbolSize: [barWidth, 3],
+					symbolOffset: [-10, 4],
+					z: 12,
+					color: "rgba(8,13,18,0)",
+					data: zzx1,
+				},
+				// 实际产值底部正方形
+				{
+					name: "",
+					type: "pictorialBar",
+					symbol: "diamond",
+					symbolSize: [barWidth, 3],
+					symbolOffset: [10, 4],
+					color: "rgba(8,13,18,0)",
+					z: 12,
+					data: wgx1,
+				},
+				// 计划产值上部正方形
+				{
+					data: [100, 100, 100, 100, 100],
+					type: "pictorialBar",
+
+					symbol: "diamond",
+					symbolSize: [barWidth, 4],
+					symbolOffset: [-10, -2],
+					color: "rgba(8,13,18,0)",
+
+					symbolPosition: "end",
+				},
+				// 实际产值上部正方形
+				{
+					data: [100, 100, 100, 100, 100],
+					type: "pictorialBar",
+
+					symbol: "diamond",
+					symbolSize: [barWidth, 4],
+					symbolOffset: [10, -2],
+					color: "rgba(8,13,18,0)",
+
+					symbolPosition: "end",
+				},
+				// 计划产值进度柱子
+				{
+					name: "2023年度",
+					type: "bar",
+					barWidth: barWidth,
+					// zlevel: 2,
+					stack: "1",
+					itemStyle: {
+						normal: {
+							opacity: 0.7,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: "rgba(0,222,255,1)",
+							}, {
+								offset: 1,
+								color: "rgba(0,222,255,0)",
+							}, ]),
+							barBorderRadius: 0,
+						},
+					},
+					label: {
+						show: true,
+						position: ["-18", "-18"],
+						color: "#00f8ff",
+						fontSize: 12,
+					},
+					data: zzx1,
+				},
+				// 计划产值底部柱子
+				{
+					data: zx,
+					type: "bar",
+
+					barWidth: barWidth,
+					stack: "1",
+
+					zlevel: -1,
+					itemStyle: {
+						normal: {
+							opacity: 0.7,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: "rgba(8,13,18,0)",
+							}, {
+								offset: 1,
+								color: "rgba(8,13,18,0)",
+							}, ]),
+							barBorderRadius: 0,
+						},
+					},
+				},
+				// 实际产值进度柱子
+				{
+					name: "2024年度",
+					type: "bar",
+					stack: "2",
+					barWidth: barWidth,
+					itemStyle: {
+						normal: {
+							opacity: 0.7,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: "rgba(59,237,222,1)",
+							}, {
+								offset: 1,
+								color: "rgba(59,237,222,0)",
+							}, ]),
+							barBorderRadius: 0,
+						},
+					},
+					label: {
+						show: true,
+						position: ["18", "-18"],
+						color: "#00f8ff",
+						fontSize: 12,
+					},
+					data: wgx1,
+				},
+				// 实际产值底部柱子
+				{
+					data: wg,
+					type: "bar",
+					barWidth: barWidth,
+					stack: "2",
+
+					zlevel: -1,
+					itemStyle: {
+						normal: {
+							opacity: 0.7,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: "rgba(8,13,18,0.4)",
+							}, {
+								offset: 1,
+								color: "rgba(8,13,18,0)",
+							}, ]),
+							barBorderRadius: 0,
+						},
+					},
+				},
+			],
+		};
+
+
+
+
+
+
+
+
+
+		myChart.setOption(option);
+
+	})
+
+
+
+	// 2023
+	var zzx1 = [27, 38, 41, 21, 27];
+	var zx = zzx1.map((item) => {
+		return 100 - item;
+	});
+	// 2024
+	var wgx1 = [37, 40, 63, 61, 64];
+	var wg = wgx1.map((item) => {
+		return 100 - item;
+	});
+
+
+
+
+	var barWidth = 15;
+	option = {
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				// 坐标轴指示器，坐标轴触发有效
+				type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+			},
+			formatter: function (e) {
+				// console.log(e);
+				var str =
+					e[6].axisValue +
+					"<br>" +
+					"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
+					e[6].color.colorStops[0].color +
+					";'></span>" +
+					"" +
+					e[6].seriesName +
+					" : " +
+					e[6].value +
+					"<br>" +
+					"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
+					e[8].color.colorStops[0].color +
+					";'></span>" +
+					"" +
+					e[8].seriesName +
+					" : " +
+					e[8].value;
+				return str;
+			},
+		},
+		grid: {
+			left: "2%",
+			right: "4%",
+			bottom: "5%",
+			top: "10%",
+			containLabel: true,
+		},
+		legend: {
+			data: ["2023年度", "2024年度"],
+
+			top: 1,
+			textStyle: {
+				color: "#deebff",
+				fontSize: 12,
+			},
+			itemWidth: 12,
+			itemHeight: 10,
+			itemGap: 35,
+			color: "#242424",
+			selectedMode: false,
+		},
+		xAxis: {
+			type: "category",
+			data: [
+				"第一季度",
+				"第二季度",
+				"第三季度",
+				"第四季度",
+			],
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#010710",
+				},
+			},
+			axisTick: {
+				show: true,
+			},
+			axisLabel: {
+				// interval: 0,
+				// rotate: 40,
+				textStyle: {
+					fontFamily: "Microsoft YaHei",
+					color: "#fff", // x轴颜色
+					fontWeight: "normal",
+					fontSize: "12",
+					lineHeight: 10,
+				},
+				interval: 0, //标签设置为全部显示
+				margin: 15,
+				lineHeight: 15,
+				// fontSize: 11,
+				//             formatter: function(params) {
+				//                 var a = params.substring(0, params.length - 5);
+				//                 //   console.log(params.substring(0, params.length - 3));
+				//                 var newParamsName = a + "/n";
+				//
+				//                 //将最终的字符串返回
+				//                 return newParamsName;
+				//             },
+			},
+		},
+
+		yAxis: {
+			min: 0,
+			max: 100,
+			type: "value",
+
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: "#010710",
+				},
+			},
+			splitLine: {
+				show: false,
+				lineStyle: {
+					color: "rgba(135,140,147,1)", //左侧显示线
+				},
+			},
+			axisTick: {
+				show: false,
+			},
+			axisLabel: {
+				formatter: "{value}",
+				textStyle: {
+					color: "#deebff",
+					fontSize: 12,
+				},
+			},
+		},
+		series: [
+			// 计划产值中间正方形
+			{
+				type: "pictorialBar",
+				symbol: "diamond",
+
+				symbolSize: [barWidth, 4],
+				symbolOffset: [-10, -2],
+				symbolPosition: "end",
+				z: 12,
+				color: "rgba(0,222,255,1)",
+				data: zzx1,
+			},
+			// 实际产值中间正方形
+			{
+				type: "pictorialBar",
+				symbol: "diamond",
+				symbolSize: [barWidth, 4],
+				symbolOffset: [10, -2],
+				symbolPosition: "end",
+				z: 12,
+				color: "rgba(59,237,222,1)",
+				data: wgx1,
+			},
+			//  计划产值底部正方形
+			{
+				type: "pictorialBar",
+				symbol: "diamond",
+				symbolSize: [barWidth, 3],
+				symbolOffset: [-10, 4],
+				z: 12,
+				color: "rgba(8,13,18,0)",
+				data: zzx1,
+			},
+			// 实际产值底部正方形
+			{
+				name: "",
+				type: "pictorialBar",
+				symbol: "diamond",
+				symbolSize: [barWidth, 3],
+				symbolOffset: [10, 4],
+				color: "rgba(8,13,18,0)",
+				z: 12,
+				data: wgx1,
+			},
+			// 计划产值上部正方形
+			{
+				data: [100, 100, 100, 100, 100],
+				type: "pictorialBar",
+
+				symbol: "diamond",
+				symbolSize: [barWidth, 4],
+				symbolOffset: [-10, -2],
+				color: "rgba(8,13,18,0)",
+
+				symbolPosition: "end",
+			},
+			// 实际产值上部正方形
+			{
+				data: [100, 100, 100, 100, 100],
+				type: "pictorialBar",
+
+				symbol: "diamond",
+				symbolSize: [barWidth, 4],
+				symbolOffset: [10, -2],
+				color: "rgba(8,13,18,0)",
+
+				symbolPosition: "end",
+			},
+			// 计划产值进度柱子
+			{
+				name: "2023年度",
+				type: "bar",
+				barWidth: barWidth,
+				// zlevel: 2,
+				stack: "1",
+				itemStyle: {
+					normal: {
+						opacity: 0.7,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: "rgba(0,222,255,1)",
+						}, {
+							offset: 1,
+							color: "rgba(0,222,255,0)",
+						}, ]),
+						barBorderRadius: 0,
+					},
+				},
+				label: {
+					show: true,
+					position: ["-18", "-18"],
+					color: "#00f8ff",
+					fontSize: 12,
+				},
+				data: zzx1,
+			},
+			// 计划产值底部柱子
+			{
+				data: zx,
+				type: "bar",
+
+				barWidth: barWidth,
+				stack: "1",
+
+				zlevel: -1,
+				itemStyle: {
+					normal: {
+						opacity: 0.7,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: "rgba(8,13,18,0)",
+						}, {
+							offset: 1,
+							color: "rgba(8,13,18,0)",
+						}, ]),
+						barBorderRadius: 0,
+					},
+				},
+			},
+			// 实际产值进度柱子
+			{
+				name: "2024年度",
+				type: "bar",
+				stack: "2",
+				barWidth: barWidth,
+				itemStyle: {
+					normal: {
+						opacity: 0.7,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: "rgba(59,237,222,1)",
+						}, {
+							offset: 1,
+							color: "rgba(59,237,222,0)",
+						}, ]),
+						barBorderRadius: 0,
+					},
+				},
+				label: {
+					show: true,
+					position: ["18", "-18"],
+					color: "#00f8ff",
+					fontSize: 12,
+				},
+				data: wgx1,
+			},
+			// 实际产值底部柱子
+			{
+				data: wg,
+				type: "bar",
+				barWidth: barWidth,
+				stack: "2",
+
+				zlevel: -1,
+				itemStyle: {
+					normal: {
+						opacity: 0.7,
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+							offset: 0,
+							color: "rgba(8,13,18,0.4)",
+						}, {
+							offset: 1,
+							color: "rgba(8,13,18,0)",
+						}, ]),
+						barBorderRadius: 0,
+					},
+				},
+			},
+		],
+	};
+
+	if (option) {
+		myChart.setOption(option);
+	}
+
+
+
+
+});

zhsq_qk-ui/src/assets/images/qkq_index.css

@@ -0,0 +1,341 @@
+@charset "utf-8";
+@font-face {
+  font-family: 'MyWebFont2'; /* 给字体命名 */
+  src:url('../fonts/FZHZGBJW.TTF')  format('truetype'), /* Safari, Android, iOS */
+}
+
+/*土地资源*/
+.qkq_tdzy{
+	margin-top: 20px;
+	margin-bottom: 30px;
+}
+.qkq_tdzy_con{
+	display: flex;
+	flex-direction: row;
+	justify-content:space-between;
+	width: 96%;
+	margin: 0px auto;
+}
+.qkq_tdzy .dt_txt{
+	text-align: center;
+	padding-top: 32px;
+}
+.qkq_tdzy .dt_txt h2{
+	font-family: MyWebFont2;
+	font-size: 20px;
+	font-weight: 900;
+	color: #6affff;
+	margin-bottom: 3px;
+}
+.qkq_tdzy .dt_txt h3{
+	font-size: 14px;
+	color: #6affff;
+	margin-bottom: 3px;
+}
+.qkq_tdzy .dt_txt h4{
+	font-size: 14px;
+	color: #fff;
+	margin-bottom: 8px;
+}
+.qkq_tdzy .dt_txt h5{
+	font-size: 10px;
+	color: #fff;
+}
+.qkq_tdzy .dt_con{
+	background: url(qkq_tdzybg.png) no-repeat center;
+	width: 110px;
+	height: 130px;
+	text-align: center;
+	background-size: 100% 100%;
+	position: relative;
+}
+.qkq_tdzy .dt_con h2{
+	color: #fcce17;
+	font-size: 18px;
+	font-weight: 900;
+	padding-top: 30px;
+}
+.qkq_tdzy .dt_con h3{
+	color: #fcce17;
+	font-size: 14px;
+	margin-bottom: 3px;
+}
+.qkq_tdzy .dt_con h4{
+	color: #fff;
+	font-size: 12px;
+}
+.qkq_tdzy .dt_con .dt_con_b{
+	background: url(qkq_tdzybg2.png) no-repeat center;
+	background-size: 100% 100%;
+	width: 42px;
+	height: 42px;
+	position: absolute;
+	left: 31%;
+	bottom:-13px;
+	text-align: center;
+}
+.qkq_tdzy .dt_con .dt_con_b h4{
+	font-size: 9px;
+    margin-top: 10px;
+	color: #ffe265;
+}
+.qkq_tdzy .dt_con .dt_con_b p{
+	color: #6bd8fc;
+	font-size: 9px;
+}
+
+/*营商环境*/
+.qkq_yshj_con{
+	display: flex;
+	flex-direction: row;
+}
+.qkq_yshj_con .qkq_yshj_list p{
+	font-size: 12px;
+	color: #fff;
+	line-height: 22px;
+	position: relative;
+	padding-left: 13px;
+}
+.qkq_yshj_con .qkq_yshj_list p:after{
+	content: " ";
+    display: block;
+    width: 6px;
+	height: 6px;
+	border-radius: 5px;
+	background: #0260b0;
+    position: absolute;
+    /* pointer-events: all; */
+    top: 9px;
+    left: 0px;
+}
+.qkq_yshj_con .qkq_yshj_list span{
+	padding-left: 10px;
+}
+#yshj{
+	width: 225px;
+	height: 170px;
+}
+
+
+/*网格管理*/
+#wggl{
+	width:345px;
+	height: 200px;
+}
+
+/*党建引领*/
+.qkq_djyl{
+	margin-bottom: 15px;
+}
+.qkq_djyl_con{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
+.qkq_djyl_con img{
+	height: 100px;
+    margin-top: 20px;
+}
+.qkq_djyl_con .qkq_list{
+	width: 175px;
+}
+.qkq_djyl_con p{
+	background: url(qkq_djyl_x.png) no-repeat bottom;
+	height: 32px;
+	line-height: 32px;
+	font-size: 14px;
+	color: #fff;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+.qkq_djyl_con p span{
+	padding-left: 14px;
+	background: url(qkq_djyl_icon.png) no-repeat left center;
+}
+.qkq_djyl_con p i{
+	text-align: right;
+	display: inline-block;
+}
+.blue{
+	color: #01b2f4!important;
+}
+.green{
+	color: #01f49b!important;
+}
+.org{
+	color: #f4b00d!important;
+}
+
+/*经济运行*/
+#jjyx{
+	width: 345px;
+	height: 180px;
+	margin-bottom: 15px;
+}
+/*事件信息*/
+.qkq_jjyx_list{
+
+}
+.scro_list{
+	height: 190px;
+	overflow-y: scroll;
+}
+.scro_list::-webkit-scrollbar{
+	width: 0px;
+	height: 0px;
+}
+.qkq_jjyx_list dt{
+	background: rgba(3,119,227,0.1);
+	padding: 0px 10px;
+}
+.qkq_jjyx_list dd{
+	padding: 0px 10px;
+}
+.qkq_jjyx_list dt span,.qkq_jjyx_list dd span{
+	font-size: 14px;
+	color: #fff;
+	display: inline-block;
+	height: 30px;
+	line-height: 30px;
+}
+.qkq_jjyx_list dt span:nth-child(1),.qkq_jjyx_list dd span:nth-child(1){
+	width: 41%;
+}
+.qkq_jjyx_list dt span:nth-child(2),.qkq_jjyx_list dd span:nth-child(2){
+	width: 26%;
+}
+.qkq_jjyx_list dt span:nth-child(3),.qkq_jjyx_list dd span:nth-child(3){
+	width: 13%;
+}
+.qkq_jjyx_list dt span:nth-child(4),.qkq_jjyx_list dd span:nth-child(4){
+	width: 15%;
+}
+.qkq_jjyx_list dd span.zt{
+	background: url(qkq_listbg.png) no-repeat center;
+	background-size: 100% auto;
+	text-align: center;
+	font-size: 10px;
+	color: #0f81ec;
+}
+
+
+/*中间内容*/
+.qkq_mapcon{
+	position: fixed;
+	bottom:20%;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
+}
+
+.qkq_mapcon .qkq_map{
+	width: 100%;
+    height: 507px;
+    position: absolute;
+    top: 0px;
+}
+.qkq_mapcon .qkq_map a{
+	display: block;
+	position: absolute;
+	background: url(qkq_iconcon.png) no-repeat center;
+	width: 143px;
+	height: 167px;
+	transition: transform 0.7s ease-in-out; /* 设置过渡效果 */
+  transform: translateY(0); /* 初始状态不移动 */
+}
+.qkq_mapcon .qkq_map a:hover{
+	background: url(qkq_iconcon_on.png) no-repeat center;
+	transform: translateY(-10px); /* 鼠标划过时向上移动20像素 */
+}
+.qkq_mapcon .qkq_map a i{
+	display: block;
+    text-align: center;
+    padding-top: 27px;
+}
+.qkq_mapcon .qkq_map a span{
+	display: block;
+    text-align: center;
+    padding-top: 50px;
+	color: #fff;
+	font-size: 14px;
+}
+.qkq_mapcon .qkq_map a:nth-child(1){
+	top:158px;
+	left: 90px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(1):hover{
+	top:148px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(2){
+	top: 200px;
+	left: -72px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(2):hover{
+	top: 190px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(3){
+	top: 352px;
+	left: -46px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(3):hover{
+	top: 342px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(4){
+	top: 415px;
+	left: 140px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(4):hover{
+	top: 405px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(5){
+	top: 393px;
+	right: 277px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(5):hover{
+	top: 383px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(6){
+	top: 342px;
+	right: 91px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(6):hover{
+	top: 332px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(7){
+	top: 241px;
+	right: -57px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(7):hover{
+	top: 231px;
+}
+*/
+.qkq_mapcon .qkq_map a:nth-child(8){
+	top: 161px;
+	right: 90px;
+}
+/*
+.qkq_mapcon .qkq_map a:nth-child(8):hover{
+	top: 151px;
+}
+*/
+
+
+
+
+
+
+

zhsq_qk-ui/src/assets/images/qkq_sprh.css

@@ -0,0 +1,451 @@
+@charset "utf-8";
+
+.left_con,.right_con{
+	min-height: 80vh;
+}
+
+.bj_left{
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 350px;
+    height: 100%;
+}
+.bj_right{
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    width: 350px;
+    height: 100%;
+}
+.bj_bottom{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    width:100%;
+    height: 210px;
+}
+.bj_left img,.bj_right img,.bj_bottom img{
+    width: 100%;
+    height: 100%;
+}
+.qkq_tdzy{
+  width: 100%;
+  height: 45px;
+  position: relative;
+}
+/***********************设备tab*******************************/
+.facility_tab{
+	width:284px;
+	overflow: hidden;
+    height:68vh;
+    margin: 0 auto;
+}
+.facility_tab .div_tab{
+	width:100%;
+	display: flex;
+	flex-direction: row;
+	justify-content:space-between;
+    background:rgb(0 52 101 / 64%);
+    margin: 0 0 10px 0;
+}
+.facility_tab .div_tab a{
+	display:block;
+	font-size:14px;
+	color:#fff;
+	width:144px;
+	height: 32px;
+	text-align:center;
+	line-height:32px;
+}
+.facility_tab .div_tab a.df_on{
+    background: url(sprh_03.png) no-repeat left bottom  rgb(0 55 145 / 17%);
+    background-size: 100% 100%;
+}
+.selectDate {
+    font-size: 12px;
+    line-height: 1.64;
+    color: #fff;
+    position:absolute;
+    top: 20px;
+    right: 0;
+  }
+
+  .icon_more {
+    width: 10px;
+    height:4px;
+    display: inline-block;
+    text-align: center;
+    margin: 0 0 0 5px;
+    cursor: pointer;
+  }
+  .icon_more img{
+    width: 100%;
+    height: 100%;
+  }
+  .selectDate ._moreMenu {
+    position: absolute;
+    right: 0px;
+    width: 88px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid #0e3964;
+    top: 20px;
+    display: none;
+    z-index: 99;
+  }
+  .selectDate ._moreMenu ul {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .selectDate ._moreMenu ul li {
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    font-size: 12px;
+    color: #fff;
+  }
+  .selectDate ._moreMenu ul li:hover {
+    background-color:rgb(0 52 101 / 64%);
+  }
+
+  .accordion {
+    width: 99%;
+    margin: 0 auto;
+}
+
+.accordion .link {
+  cursor: pointer;
+  display: block;
+  padding: 10px;
+  color: #d0e3fd;
+  font-size: 14px;
+  background: rgb(4 40 72 / 80%);
+  position: relative;
+  -webkit-transition: all 0.4s ease;
+  -o-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+
+.accordion li:last-child .link {
+    border-bottom: 0;
+}
+.accordion li{
+    cursor: pointer;
+    margin: 0 0 10px 0;
+}
+.accordion li i {
+    position: absolute;
+    top: 5px;
+    left: 12px;
+    font-size: 18px;
+    color: #595959;
+    -webkit-transition: all 0.4s ease;
+    -o-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+
+.accordion li i.chevron-down {
+    right: 12px;
+    left: auto;
+    width: 13px;
+    height: 6px;
+}
+.accordion li i.chevron-down img{
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * Submenu
+ -----------------------------*/
+.submenu {
+    display: none;
+}
+
+.submenu li {
+  margin: 0;
+  padding: 0 0 0 15px;
+}
+.submenu li.single{
+  background:rgb(4 40 72 / 50%);
+
+}
+.submenu a {
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+    display: block;
+    text-decoration: none;
+    font-size: 12px;
+    color: #fff;
+    background: url(sprh-list.png) no-repeat left center;
+  padding: 0 0 0 10px;
+    -webkit-transition: all 0.25s ease;
+    -o-transition: all 0.25s ease;
+    transition: all 0.25s ease;
+}
+
+.footer_nav_left{
+  /*background: url(./sprh_19.png) no-repeat;*/
+  background-size: 100% 100%;
+  width: 443px;
+  height: 200px;
+  position: absolute;
+    left: 36px;
+    bottom: 0;
+}
+.footer_nav_left:hover{
+  /*background: url(./sprh_19-on.png) no-repeat;*/
+}
+.sprh-left {
+  min-height: 79vh;
+}
+.sbzs{
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  margin: 15px auto;
+}
+.sbzs p{
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+.sbzs span{
+  width: 20px;
+  height: 28px;
+  display: block;
+  background: rgb(19 81 175 / 37%);
+  border: solid 1px #1351af;
+  margin: 0 5px;
+  text-align: center;
+  line-height: 28px;
+  font-size: 17px;
+  font-family:'MyWebFont2';
+  color: #fff;
+}
+
+.sb_cont{
+  display: flex;
+  justify-content:center;
+}
+.sb_in{
+  width: 144px;
+  text-align: center;
+}
+.zxsb{
+  /*background: url(xzsb.png) no-repeat left center;*/
+  font-size: 14px;
+  color: #daf4ff;
+  padding: 0 0 0 15px;
+}
+.zxsb_sl{
+  font-size: 22px;
+  font-weight: bold;
+  background-image: linear-gradient(180deg, #e6fcff, #3dbdff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  padding: 0px 0 0 28px;
+}
+.zxsb_sl i,.lxsb_sl i{
+  font-size: 12px;
+  color: #fff;
+}
+.lxsb{
+  /*background: url(./lxsb.png) no-repeat left center;*/
+  font-size: 14px;
+  color: #daf4ff;
+  padding: 0 0 0 15px;
+}
+.lxsb_sl{
+  font-size: 22px;
+  font-weight: bold;
+  background-image: linear-gradient(180deg, #edffec, #45b43c);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  padding: 0px 0 0 28px;
+}
+
+/* 底部导航 */
+
+.nav-bottom{
+  width: 100%;
+  position: absolute;
+  bottom: 10px;
+  height: 100px;
+}
+.nav-bottom-left{
+  position: absolute;
+  left: 0;
+padding-left: 20px;
+}
+.nav-bottom-left :first-child{
+  position: absolute;
+  z-index: 1;
+}
+.nav-bottom-left :nth-child(2){
+  position: absolute;
+  z-index: 2;
+  left: 200px;
+  top: 10px;
+}
+.nav-bottom-left :nth-child(3){
+  position: absolute;
+  z-index: 3;
+  left:380px;
+  top: 20px;
+}
+.nav-bottom-left :nth-child(4){
+  position: absolute;
+  z-index: 4;
+  left:560px;
+  top: 30px;
+}
+.nav-li-left,.nav-li-right{
+  width: 325px;
+  height: 40px;
+  color: #d0e3fd;
+  font-family: 'MyWebFont';
+}
+.nav-li-left{
+  transform: rotate(353deg);
+  background: url(../images/nav-background-left.png) no-repeat;
+
+}
+.nav-li-left span{
+  margin-left: 35px;
+  line-height: 40px;
+  cursor: pointer;
+  transition: all .5s;
+}
+.nav-li-left :hover{
+  filter: brightness(400%);
+  text-shadow: 0 0 20px #faea12;
+  transform: translateY(-3px);
+
+}
+.nav-home-middle{
+  position: absolute;
+  left: 50%;
+  z-index: 999;
+  transform: translateX(-50%);
+  cursor: pointer;
+  text-align: center;
+
+}
+.nav-home-middle a{
+  font-size: 14px;
+  color: #fff;
+  display: block;
+}
+.nav-home-middle img{
+  width: 161px;
+  height: 57px;
+  transition: all .5s;
+}
+.nav-home-middle:hover img{
+  transform: translateY(-10px);
+  filter: brightness(120%);
+}
+
+
+
+.nav-bottom-right{
+  position: absolute;
+  right: 0;
+  padding-right: 20px;
+}
+.nav-bottom-right :first-child{
+    position: absolute;
+    right: 0;
+    z-index: 1;
+}
+.nav-bottom-right :nth-child(2){
+    position: absolute;
+    z-index: 2;
+    right: 200px;
+    top: 10px;
+}
+.nav-bottom-right :nth-child(3){
+    position: absolute;
+    z-index: 3;
+    right:380px;
+    top: 20px;
+}
+.nav-bottom-right :nth-child(4){
+    position: absolute;
+    z-index: 4;
+    right:560px;
+    top: 30px;
+}
+.nav-li-right,.nav-li-right{
+    width: 325px;
+    height: 40px;
+    color: #d0e3fd;
+    font-family: 'MyWebFont';
+}
+.nav-li-right{
+    transform: rotate(-353deg);
+    background: url(../images/nav-background-right.png) no-repeat;
+
+}
+.nav-li-right.on{
+    transform: rotate(-353deg);
+    background: url(../images/nav-background-right-on.png) no-repeat;
+
+}
+.nav-li-right span{
+    margin-right: 35px;
+    line-height: 40px;
+    cursor: pointer;
+    transition: all .5s;
+}
+.nav-li-right :hover{
+    filter: brightness(400%);
+    text-shadow: 0 0 20px #faea12;
+    transform: translateY(-3px);
+
+}
+
+
+
+
+
+
+.center-bar{
+    width: 1024px;
+    height: 110px;
+    position: absolute;
+    top: 65px;
+    display: flex;
+    z-index: 999;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.center-bar h4, .center-bar h5{
+    color: #d0e3fd;
+    font-weight: bolder;
+}
+.center-list{
+  color: #d0e3fd;
+  width: 180px;
+  height: 80px;
+  background: url(../images/num-img.png) no-repeat top;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+
+
+

zhsq_qk-ui/src/assets/images/qkq_sprh_charts.js

@@ -0,0 +1,345 @@
+$(function () {
+
+// 视频融合--资源分布
+// 基于准备好的dom，初始化echarts实例
+var myChart = echarts.init(document.getElementById('sprh-zyfb'));
+let data = [{
+       value: 120,
+       label: '东兴网格'
+   }, {
+       value: 142,
+       label: '胜利网格'
+   }, {
+       value: 110,
+       label: '裕民网格'
+   },
+   {
+       value: 132,
+       label: '首期网格'
+   },
+   {
+       value: 132,
+       label: '民生网格  '
+   }
+];
+option = {
+   grid: {
+       top: 10,
+       left: 33,
+       right: 20,
+       bottom: 5,
+       containLabel: true
+   },
+   xAxis: {
+       type: 'value',
+       show: false
+   },
+   yAxis: {
+       show: true,
+       inverse: true,
+       type: 'category',
+       axisLine: {
+           show: false
+       }
+   },
+   series: [{
+       name: 'label',
+       type: 'bar',
+       barWidth: 10,
+       yAxisIndex: 0,
+       label: {
+           show: true,
+           position: 2,
+           color: '#fff',
+           fontSize: 12
+       },
+       data: data.map((item) => {
+           return {
+               value: 0,
+               label: {
+                   formatter() {
+                       return item.label;
+                   }
+               }
+           };
+       })
+   }, {
+       name: 'value',
+       type: 'bar',
+       barWidth: 10,
+       barMinHeight:10, // 最小高度
+       yAxisIndex: 0,
+       label: {
+           show: true,
+           position: 'right',
+           color: '#00d5e1',
+           fontSize: 12,
+           formatter({
+               value
+           }) {
+               return `${value}人`;
+           }
+       },
+       itemStyle: {
+           barBorderRadius: 3
+       },
+       data: data.map(({
+           value
+       }, index) => {
+           let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+               offset: 1,
+               color: '#004eaf' // 0% 处的颜色
+           }, {
+               offset: 0,
+               color: '#089aa2' // 100% 处的颜色
+           }], false)
+           return {
+               value,
+               label: {
+                   color
+               },
+               itemStyle: {
+                   color
+               }
+           };
+       })
+   }]
+};
+
+if(option){
+myChart.setOption(option);
+}
+
+
+// 视频融合--在线设备
+// 基于准备好的dom，初始化echarts实例
+var myChart = echarts.init(document.getElementById('sprh-zxfb'));
+const dataArr = [
+   {
+       value: 61,
+       name: '在线',
+   },
+];
+const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+   {
+       offset: 0,
+       color: '#0d4470', // 0% 处的颜色
+   },
+   {
+       offset: 1,
+       color: '#0659c9', // 100% 处的颜色
+   },
+]);
+const colorSet = [
+   [0.61, color],
+   [1, '#15337C'],
+];
+const rich = {
+   white: {
+       fontSize:10,
+       color: '#0454bf',
+       fontWeight: '500',
+   },
+   bule: {
+       fontSize: 22,
+       fontFamily: 'DINBold',
+       color: '#0454bf',
+       fontWeight: '700',
+   },
+   radius: {
+       width: 350,
+       height: 80,
+       // lineHeight:80,
+       borderWidth: 1,
+       borderColor: '#051c48',
+       fontSize: 50,
+       color: '#0454bf',
+       backgroundColor: '#051c48',
+       borderRadius: 20,
+       textAlign: 'center',
+   },
+   size: {
+       height: 400,
+       padding: [50, 0, 0, 0],
+   },
+};
+option = {
+   tooltip: {
+       formatter: '{a} <br/>{b} : {c}%',
+   },
+
+   series: [
+       {
+           type: 'gauge',
+           radius: '90%',
+           startAngle: '225',
+           endAngle: '-45',
+           pointer: {
+               show: false,
+           },
+           detail: {
+               formatter: function (value) {
+                   var num = Math.round(value);
+                   return '{bule|' + num + '}{white|%}';
+               },
+               rich: rich,
+               offsetCenter: ['0%', '0%'],
+           },
+
+           data: dataArr,
+           title: {
+               show: true,
+               color: '#0454bf',
+               offsetCenter: ['0', '75%'],
+               fontSize:14
+           },
+           axisLine: {
+               show: true,
+               lineStyle: {
+                   color: colorSet,
+                   width: 20,
+                   shadowOffsetX: 0,
+                   shadowOffsetY: 0,
+                   opacity: 1,
+               },
+           },
+           axisTick: {
+               show: false,
+           },
+           splitLine: {
+               show: false,
+               length: 35,
+               lineStyle: {
+                   color: '#051c48',
+                   width: 2,
+                   type: 'solid',
+               },
+           },
+           axisLabel: {
+               show: false,
+           },
+       },
+   ],
+};
+
+if(option){
+myChart.setOption(option);
+}
+
+// 视频融合--离线设备
+// 基于准备好的dom，初始化echarts实例
+var myChart = echarts.init(document.getElementById('sprh-lxfb'));
+const dataArr1 = [
+   {
+       value: 39,
+       name: '离线',
+   },
+];
+const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+   {
+       offset: 0,
+       color: '#976204', // 0% 处的颜色
+   },
+   {
+       offset: 1,
+       color: '#e1b905', // 100% 处的颜色
+   },
+]);
+const colorSet1 = [
+   [0.39, color1],
+   [1, '#15337C'],
+];
+const rich1 = {
+   white: {
+       fontSize:10,
+       color: '#ae8609',
+       fontWeight: '500',
+   },
+   bule: {
+       fontSize: 22,
+       fontFamily: 'DINBold',
+       color: '#ae8609',
+       fontWeight: '700',
+   },
+   radius: {
+       width: 350,
+       height: 80,
+       // lineHeight:80,
+       borderWidth: 1,
+       borderColor: '#051c48',
+       fontSize: 50,
+       color: '#ae8609',
+       backgroundColor: '#051c48',
+       borderRadius: 20,
+       textAlign: 'center',
+   },
+   size: {
+       height: 400,
+       padding: [50, 0, 0, 0],
+   },
+};
+option = {
+   tooltip: {
+       formatter: '{a} <br/>{b} : {c}%',
+   },
+
+   series: [
+       {
+           type: 'gauge',
+           radius: '90%',
+           startAngle: '225',
+           endAngle: '-45',
+           pointer: {
+               show: false,
+           },
+           detail: {
+               formatter: function (value) {
+                   var num = Math.round(value);
+                   return '{bule|' + num + '}{white|%}';
+               },
+               rich: rich1,
+               offsetCenter: ['0%', '0%'],
+           },
+
+           data: dataArr1,
+           title: {
+               show: true,
+               color: '#ae8609',
+               offsetCenter: ['0', '75%'],
+               fontSize:14
+           },
+           axisLine: {
+               show: true,
+               lineStyle: {
+                   color: colorSet1,
+                   width: 20,
+                   shadowOffsetX: 0,
+                   shadowOffsetY: 0,
+                   opacity: 1,
+               },
+           },
+           axisTick: {
+               show: false,
+           },
+           splitLine: {
+               show: false,
+               length: 35,
+               lineStyle: {
+                   color: '#051c48',
+                   width: 2,
+                   type: 'solid',
+               },
+           },
+           axisLabel: {
+               show: false,
+           },
+       },
+   ],
+};
+
+if(option){
+myChart.setOption(option);
+}
+
+
+});

zhsq_qk-ui/src/assets/images/qkq_yshj_charts.js

@@ -0,0 +1,490 @@
+$(function () {
+	
+    var myChart = echarts.init(document.getElementById('sprh-bjqstj'));
+    var monthData = [];
+   var lineData = [];
+   for (var i = 1; i <= 12; i++) {
+       monthData.push(i + '月');
+       var lineNumber = Math.floor(Math.random() * 10000);
+       lineData.push(lineNumber);
+   }
+   
+   let option = {
+      
+       tooltip: {
+           trigger: 'axis',
+           axisPointer: {
+               type: 'shadow',
+           },
+       },
+       grid: {
+           top: '5%',
+           left: '15%',
+           right: '5%',
+           bottom: '25%',
+           // containLabel: true
+       },
+       xAxis: [
+           {
+               type: 'category',
+               boundaryGap: false,
+               axisLine: {
+                   show: true, //隐藏X轴轴线
+                   lineStyle: {
+                       color: '#502297',
+                       width: 1,
+                       type: 'dashed',
+                   },
+               },
+               splitLine: {
+                   show: true,
+                   interval: 'auto',
+                   lineStyle: {
+                       color: ['#502297'],
+                       type: 'dashed',
+                   },
+               },
+               axisLabel: {
+                   show: true,
+                   textStyle: {
+                       color: '#FFFFFF', //X轴文字颜色
+                       fontSize: 12,
+                   },
+                   margin: 12,
+                   interval: 0,
+               },
+               axisTick: {
+                   show: false,
+               },
+               data: monthData,
+           },
+       ],
+       yAxis: [
+           {
+               splitNumber: 6,
+               splitLine: {
+                   show: true,
+                   interval: 'auto',
+                   lineStyle: {
+                       color: ['#502297'],
+                       type: 'dashed',
+                   },
+               },
+               axisTick: {
+                   show: false,
+               },
+               axisLine: {
+                   lineStyle: {
+                       color: '#502297',
+                       width: 1,
+                       type: 'dashed',
+                   },
+               },
+               axisLabel: {
+                   show: true,
+                   textStyle: {
+                       color: '#ffffff',
+                   },
+               },
+           },
+       ],
+       series: [
+           {
+               name: '成绩',
+               type: 'line',
+               symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+               showAllSymbol: true,
+               smooth: true,
+               symbolSize: 8,
+               lineStyle: {
+                   normal: {
+                       color: '#FE7B00', // 线条颜色
+                   },
+                   borderColor: '#ffffff',
+               },
+               itemStyle: {
+                   color: '#ffffff',
+                   borderColor: '#FE7B00',
+                   borderWidth: 2,
+               },
+   
+               areaStyle: {
+                   //区域填充样式
+                   normal: {
+                       //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                       color: new echarts.graphic.LinearGradient(
+                           0,
+                           0,
+                           0,
+                           1,
+                           [
+                               {
+                                   offset: 0,
+                                   color: 'rgba(125, 14, 255, 0.4)',
+                               },
+                               {
+                                   offset: 1,
+                                   color: 'rgba(116, 0, 216, 0.1)',
+                               },
+                           ],
+                           false
+                       ),
+                   },
+               },
+               data: lineData,
+           },
+       ],
+   };
+     
+   if(option){
+   myChart.setOption(option);
+   }
+// 视频融合--在线设备
+// 基于准备好的dom，初始化echarts实例
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
+ var datas = [{
+        "value": 36,
+        "name": "特种设备安全管.."
+    },
+    {
+        "value": 54,
+        "name": "特种设备使用登.."
+    },
+    {
+        "value": 29,
+        "name": "特种设备安全管.."
+    },
+    {
+        "value": 25,
+        "name": "一孩、二孩、三孩.."
+    },
+    {
+        "value": 45,
+        "name": "失业登记"
+    },
+    {
+        "value": 29,
+        "name": "医师执业注册（.."
+    },
+    {
+        "value": 25,
+        "name": "残疾人证新办"
+    },
+    {
+        "value": 35,
+        "name": "护士执业注册(.."
+    },
+    {
+        "value": 55,
+        "name": "失业登记"
+    },
+    {
+        "value": 65,
+        "name": "一孩、二孩、三孩.. "
+    },
+    
+]
+var maxArr = (new Array(datas.length)).fill(100);
+option = {
+    grid: {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+        containLabel: true
+    },
+    tooltip: {
+        trigger: 'item',
+        axisPointer: {
+            type: 'none'
+        },
+        formatter: function(params) {
+            return params[0].name + ' : ' + params[0].value
+        }
+    },
+    xAxis: {
+        show: false,
+        type: 'value'
+    },
+    yAxis: [{
+        type: 'category',
+        inverse: true,
+        axisLabel: {
+            show: true,
+            align: 'right',
+            textStyle: {
+                fontSize: 14,
+                color: '#ffffff',
+                rich: {
+                    index: {
+                        color: '#9d9d9d',
+                        fontWeight: 'bold',
+                        fontStyle: 'italic'
+                    },
+                    index1: {
+                        color: '#f8777b',
+                        fontWeight: 'bold',
+                        fontStyle: 'italic'
+                    },
+                    index2: {
+                        color: '#ffa145',
+                        fontWeight: 'bold',
+                        fontStyle: 'italic'
+                    },
+                    index3: {
+                        color: '#6ade8d',
+                        fontWeight: 'bold',
+                        fontStyle: 'italic'
+                    },
+                    name: {
+                        width: 7 * 14,
+                        align: 'left',
+                        textAlign: 'left'
+                    }
+                }
+            },
+            formatter: (name) => {
+                var index = (datas.map(item => item.name)).indexOf(name) + 1;
+                return [
+                    '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+                    '{name|' + name + '}'
+                ].join(' ')
+            }
+        },
+        splitLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLine: {
+            show: false
+        },
+        data: datas.map(item => item.name)
+    }, {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+            textStyle: {
+                color: '#3196fa',
+                fontSize: '12'
+            },
+            formatter: '{value}'
+        },
+        data: datas.map(item => item.value)
+    }],
+    series: [{
+            name: '值',
+            type: 'bar',
+            zlevel: 1,
+            itemStyle: {
+                normal: {
+                    barBorderRadius:5,
+                    color: '#3196fa',
+                },
+            },
+            barWidth: 10,
+            data: datas
+        },
+        {
+            name: '背景',
+            type: 'bar',
+            barWidth: 10,
+            barGap: '-100%',
+            data: maxArr,
+            itemStyle: {
+                normal: {
+                    color: '#042039',
+                    barBorderRadius:5,
+                }
+            },
+        },
+    ]
+};
+  
+if(option){
+myChart.setOption(option);
+}
+
+// 视频融合--离线设备
+// 基于准备好的dom，初始化echarts实例
+if(option){
+    myChart.setOption(option);
+    }
+ // 视频融合--在线设备
+ // 基于准备好的dom，初始化echarts实例
+  // 基于准备好的dom，初始化echarts实例
+  var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
+  var datas = [{
+         "value": 36,
+         "name": "民办学校的举办.."
+     },
+     {
+         "value": 54,
+         "name": "失业登记.."
+     },
+     {
+         "value": 29,
+         "name": "民办学校的终止.."
+     },
+     {
+         "value": 25,
+         "name": "医师执业注册(.."
+     },
+     {
+         "value": 45,
+         "name": "一孩、二孩、三孩.."
+     },
+     {
+         "value": 29,
+         "name": "药品零售企业许.."
+     },
+     {
+         "value": 25,
+         "name": "护士执业注册"
+     },
+     {
+         "value": 35,
+         "name": "残疾人证新办"
+     },
+     {
+         "value": 55,
+         "name": "医疗广告审查"
+     },
+     {
+         "value": 65,
+         "name": "变更施工单位项.."
+     },
+     
+ ]
+ var maxArr = (new Array(datas.length)).fill(100);
+ option = {
+     grid: {
+         left: 0,
+         right: 0,
+         bottom: 0,
+         top: 0,
+         containLabel: true
+     },
+     tooltip: {
+         trigger: 'item',
+         axisPointer: {
+             type: 'none'
+         },
+         formatter: function(params) {
+             return params[0].name + ' : ' + params[0].value
+         }
+     },
+     xAxis: {
+         show: false,
+         type: 'value'
+     },
+     yAxis: [{
+         type: 'category',
+         inverse: true,
+         axisLabel: {
+             show: true,
+             align: 'right',
+             textStyle: {
+                 fontSize: 14,
+                 color: '#ffffff',
+                 rich: {
+                     index: {
+                         color: '#9d9d9d',
+                         fontWeight: 'bold',
+                         fontStyle: 'italic'
+                     },
+                     index1: {
+                         color: '#f8777b',
+                         fontWeight: 'bold',
+                         fontStyle: 'italic'
+                     },
+                     index2: {
+                         color: '#ffa145',
+                         fontWeight: 'bold',
+                         fontStyle: 'italic'
+                     },
+                     index3: {
+                         color: '#6ade8d',
+                         fontWeight: 'bold',
+                         fontStyle: 'italic'
+                     },
+                     name: {
+                         width: 7 * 14,
+                         align: 'left',
+                         textAlign: 'left'
+                     }
+                 }
+             },
+             formatter: (name) => {
+                 var index = (datas.map(item => item.name)).indexOf(name) + 1;
+                 return [
+                     '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+                     '{name|' + name + '}'
+                 ].join(' ')
+             }
+         },
+         splitLine: {
+             show: false
+         },
+         axisTick: {
+             show: false
+         },
+         axisLine: {
+             show: false
+         },
+         data: datas.map(item => item.name)
+     }, {
+         type: 'category',
+         inverse: true,
+         axisTick: 'none',
+         axisLine: 'none',
+         show: true,
+         axisLabel: {
+             textStyle: {
+                 color: '#3196fa',
+                 fontSize: '12'
+             },
+             formatter: '{value}%'
+         },
+         data: datas.map(item => item.value)
+     }],
+     series: [{
+             name: '值',
+             type: 'bar',
+             zlevel: 1,
+             itemStyle: {
+                 normal: {
+                     barBorderRadius:5,
+                     color: '#3196fa',
+                 },
+             },
+             barWidth: 10,
+             data: datas
+         },
+         {
+             name: '背景',
+             type: 'bar',
+             barWidth: 10,
+             barGap: '-100%',
+             data: maxArr,
+             itemStyle: {
+                 normal: {
+                     color: '#042039',
+                     barBorderRadius:5,
+                 }
+             },
+         },
+     ]
+ };
+   
+ if(option){
+ myChart.setOption(option);
+ }
+ 
+
+});

zhsq_qk-ui/src/router/index.js

@@ -40,6 +40,30 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: '/sprh',
+  //   name: 'sprh',
+  //   component: () => import('@/views/fusion/sprh'),
+  //   meta: {
+  //     title: '城市运行一网统管指挥中心',
+  //     icon: ['eye-open'] // 添加图标
+  //   }
+  // },
+  {
+    path: '/sprh',
+    component: () => import('@/views/fusion/sprh'),
+    hidden: true
+  },
+  {
+    path: '/yshj',
+    component: () => import('@/views/fusion/yshj'),
+    hidden: true
+  },
+  {
+    path: '/weather',
+    component: () => import('@/views/fusion/index'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),

zhsq_qk-ui/src/views/fusion/demo.vue

@@ -0,0 +1,52 @@
+
+<template>
+
+</template>
+
+<script setup>
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+
+    let path = window.location.pathname
+    // alert(path)
+    console.log('window.path',window)
+    let paths = [{
+      path:'/sprh1',
+      redirect:'/sprh'
+    },{
+      path:'/yshj1',
+      redirect:'/yshj'
+    },{
+      path:'/weather',
+      redirect:'/index'
+    }];
+    let redirect = '';
+    for (let i = 0; i < paths.length; i++) {
+      if(paths[i].path === path){
+        redirect = paths[i].redirect;
+      }
+    }
+
+    // 前端大屏新窗口 跳转
+      let routeUrl = this.$router.resolve({
+        path: redirect
+      });
+      this.$store.dispatch("tagsView/delView", this.$route);
+      // 返回上一页面
+      this.$router.go(-1);
+
+    //新窗口打开页面
+      window.open(routeUrl.href, '_blank');
+    //原窗口保持原来的页面
+      return 0;
+    // }
+  },
+}
+</script>
+<style scoped lang="scss">
+
+</style>

zhsq_qk-ui/src/views/fusion/sprh.vue

@@ -0,0 +1,635 @@
+<template>
+  <div>
+    <div class="map">
+      <img src="@/assets/images/sprh-map.png" />
+    </div>
+    <!-- 阴影背景 -->
+    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png" /></div>
+    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png" /></div>
+    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png" /></div>
+    <!--头部开始-->
+    <div class="header">
+      <h1>城市运行一网统管指挥中心</h1>
+    </div>
+    <!--头部结束-->
+    <!--左侧开始-->
+    <div class="left_con sprh-left">
+      <div class="top_txt">
+        <b>汽开区</b>
+        <span>小雨</span>
+        <span>9~16℃</span>
+      </div>
+      <!-- 设备tab开始-->
+      <div class="facility_tab">
+        <div class="div_tab">
+          <a>单屏</a>
+          <a>电视墙</a>
+        </div>
+        <div class="clear"></div>
+        <div class="tab_cont">
+          <div class="qkq_tdzy">
+            <div class="qkq_tit ">设备列表</div>
+            <div class="selectDate">
+              <span class="_selectData">程锦街道</span>
+              <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
+              <div class="_moreMenu" v-if="dropdownVisible">
+                <ul>
+                  <li class="change">东风街道</li>
+                  <li>程锦街道</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <ul id="accordion" class="accordion">
+            <li v-for="(camera, index) in cameras" :key="index">
+              <div class="link">{{ camera.cameraName }}</div>
+            </li>
+          </ul>
+        </div>
+        <div class="tab_cont"></div>
+      </div>
+      <!-- 设备tab结束-->
+    </div>
+    <!--左侧结束-->
+    <!--右侧开始-->
+    <div class="right_con sprh-left">
+      <div class="top_txt">
+        <span>2024.04.20</span>
+        <span>星期六</span>
+        <b>11:16:58</b>
+      </div>
+      <!-- 资源分布-->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">资源分布</div>
+        <div class="selectDate">
+          <span class="_selectData">程锦街道</span>
+          <a class="icon_more" @click="toggleDropdown($event)"><img src="@/assets/images/down.png"/></a>
+          <div class="_moreMenu" v-if="dropdownVisible">
+            <ul>
+              <li class="change">东风街道</li>
+              <li>程锦街道</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div id="sprh-zyfb" style="margin:10px auto; width: 350px; height:240px;"></div>
+      <!-- 资源分布-->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">设备实时在线情况</div>
+      </div>
+      <div class="sbzs">
+        <p>设备总数：</p>
+        <span>1</span>
+        <span>6</span>
+        <span>4</span>
+        <span>0</span>
+        <p>个</p>
+      </div>
+      <div class="sb_cont">
+        <div class="sb_in">
+          <div id="sprh-zxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
+          <span class="zxsb">在线设备</span>
+          <h2 class="zxsb_sl">1234<i>个</i></h2>
+        </div>
+        <div class="sb_in">
+          <div id="sprh-lxfb" style="width:130px; height:150px;margin: 0 auto;"></div>
+          <span class="lxsb">离线设备</span>
+          <h2 class="lxsb_sl">234<i>个</i></h2>
+        </div>
+      </div>
+    </div>
+    <!--右侧结束-->
+    <!--底部开始-->
+    <div class="footer">
+      <div class="nav-bottom">
+        <div class="nav-bottom-left">
+          <div class="nav-li-left">
+            <span>经济运行</span>
+          </div>
+          <div class="nav-li-left">
+            <span>城市管理</span>
+          </div>
+          <div class="nav-li-left">
+            <span>交通治理</span>
+          </div>
+          <div class="nav-li-left">
+            <span>基层治理</span>
+          </div>
+        </div>
+        <div class="nav-home-middle">
+          <img src="@/assets/images/home-btn.png" />
+          <a>返回首页</a>
+        </div>
+        <div class="nav-bottom-right">
+          <div class="nav-li-right">
+            <span>营商环境</span>
+          </div>
+          <div class="nav-li-right">
+            <span>政务运行</span>
+          </div>
+          <div class="nav-li-right">
+            <span>安全应急</span>
+          </div>
+          <div class="nav-li-right on">
+            <span>视频融合</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--底部开始-->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import $ from 'jquery'
+import jQuery from 'jquery'
+import "@/assets/images/qkq_body.css";
+import "@/assets/images/qkq_index.css";
+import "@/assets/images/qkq_sprh.css";
+import {getCameraList} from "@/api/system/camera";
+
+
+
+export default {
+  name: "sprh",
+  data() {
+    return {
+      dropdownVisible: false,
+      cameras: []
+    };
+      // 可根据实际情况添加更多设备列表
+  },
+  created() {
+  },
+  mounted() {
+    this.resourceDistribution();
+    this.deviceOnline();
+    this.deviceOffline();
+    this.cameraList();
+  },
+
+  methods: {
+    cameraList() {
+      getCameraList().then(response => {
+        this.cameras = response.data;
+      })
+    },
+    toggleDropdown(event) {
+      this.dropdownVisible = !this.dropdownVisible;
+    },
+    resourceDistribution() {
+      //资源分布
+      var myChart = echarts.init(document.getElementById('sprh-zyfb'));
+      let data = [{
+        value: 120,
+        label: '东兴网格'
+      }, {
+        value: 142,
+        label: '胜利网格'
+      }, {
+        value: 110,
+        label: '裕民网格'
+      },
+        {
+          value: 132,
+          label: '首期网格'
+        },
+        {
+          value: 132,
+          label: '民生网格  '
+        }
+      ];
+      let option = {
+        grid: {
+          top: 10,
+          left: 33,
+          right: 20,
+          bottom: 5,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false
+        },
+        yAxis: {
+          show: true,
+          inverse: true,
+          type: 'category',
+          axisLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'label',
+          type: 'bar',
+          barWidth: 10,
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 2,
+            color: '#fff',
+            fontSize: 12
+          },
+          data: data.map((item) => {
+            return {
+              value: 0,
+              label: {
+                formatter() {
+                  return item.label;
+                }
+              }
+            };
+          })
+        }, {
+          name: 'value',
+          type: 'bar',
+          barWidth: 10,
+          barMinHeight: 10, // 最小高度
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 'right',
+            color: '#00d5e1',
+            fontSize: 12,
+            formatter({
+                        value
+                      }) {
+              return `${value}人`;
+            }
+          },
+          itemStyle: {
+            barBorderRadius: 3
+          },
+          data: data.map(({
+                            value
+                          }, index) => {
+            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+              offset: 1,
+              color: '#004eaf' // 0% 处的颜色
+            }, {
+              offset: 0,
+              color: '#089aa2' // 100% 处的颜色
+            }], false)
+            return {
+              value,
+              label: {
+                color
+              },
+              itemStyle: {
+                color
+              }
+            };
+          })
+        }]
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
+    deviceOnline() {
+      // 视频融合--在线设备
+// 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('sprh-zxfb'));
+      const dataArr = [
+        {
+          value: 61,
+          name: '在线',
+        },
+      ];
+      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: '#0d4470', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#0659c9', // 100% 处的颜色
+        },
+      ]);
+      const colorSet = [
+        [0.61, color],
+        [1, '#15337C'],
+      ];
+      const rich = {
+        white: {
+          fontSize: 10,
+          color: '#0454bf',
+          fontWeight: '500',
+        },
+        bule: {
+          fontSize: 22,
+          fontFamily: 'DINBold',
+          color: '#0454bf',
+          fontWeight: '700',
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: '#051c48',
+          fontSize: 50,
+          color: '#0454bf',
+          backgroundColor: '#051c48',
+          borderRadius: 20,
+          textAlign: 'center',
+        },
+        size: {
+          height: 400,
+          padding: [50, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%',
+            startAngle: '225',
+            endAngle: '-45',
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return '{bule|' + num + '}{white|%}';
+              },
+              rich: rich,
+              offsetCenter: ['0%', '0%'],
+            },
+
+            data: dataArr,
+            title: {
+              show: true,
+              color: '#0454bf',
+              offsetCenter: ['0', '75%'],
+              fontSize: 14
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet,
+                width: 20,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: '#051c48',
+                width: 2,
+                type: 'solid',
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
+    deviceOffline() {
+      // 视频融合--离线设备
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('sprh-lxfb'));
+      const dataArr1 = [
+        {
+          value: 39,
+          name: '离线',
+        },
+      ];
+      const color1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: '#976204', // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: '#e1b905', // 100% 处的颜色
+        },
+      ]);
+      const colorSet1 = [
+        [0.39, color1],
+        [1, '#15337C'],
+      ];
+      const rich1 = {
+        white: {
+          fontSize: 10,
+          color: '#ae8609',
+          fontWeight: '500',
+        },
+        bule: {
+          fontSize: 22,
+          fontFamily: 'DINBold',
+          color: '#ae8609',
+          fontWeight: '700',
+        },
+        radius: {
+          width: 350,
+          height: 80,
+          // lineHeight:80,
+          borderWidth: 1,
+          borderColor: '#051c48',
+          fontSize: 50,
+          color: '#ae8609',
+          backgroundColor: '#051c48',
+          borderRadius: 20,
+          textAlign: 'center',
+        },
+        size: {
+          height: 400,
+          padding: [50, 0, 0, 0],
+        },
+      };
+      let option = {
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%',
+            startAngle: '225',
+            endAngle: '-45',
+            pointer: {
+              show: false,
+            },
+            detail: {
+              formatter: function (value) {
+                var num = Math.round(value);
+                return '{bule|' + num + '}{white|%}';
+              },
+              rich: rich1,
+              offsetCenter: ['0%', '0%'],
+            },
+
+            data: dataArr1,
+            title: {
+              show: true,
+              color: '#ae8609',
+              offsetCenter: ['0', '75%'],
+              fontSize: 14
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: colorSet1,
+                width: 20,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                opacity: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: 35,
+              lineStyle: {
+                color: '#051c48',
+                width: 2,
+                type: 'solid',
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+    }
+  }
+};
+
+// import '@/assets/images/TL_Tab.js';
+(function($){
+  $.fn.TL_Tab = function(options) {
+    var defaults = {
+      tab : ".df_67 ol li",
+      box : ".df_67 ul li",
+      events : "over",
+      num : 3,
+      speed : 300
+    };
+    var setting = $.extend(defaults, options);
+
+    var tl_tab = setting.tab;
+    var tl_box = setting.box;
+    var tl_events = setting.events;
+    var tl_num = setting.num;
+    var tl_speed = setting.speed;
+
+    var tl_time_out = null;
+
+    $(tl_box).css({
+      display: 'none'
+    });
+
+    $(tl_tab).removeClass('df_on');
+    $(tl_tab).eq(tl_num - 1).addClass('df_on');
+
+    $(tl_box).eq(tl_num - 1).css({
+      display: 'block'
+    });
+
+    if (tl_events === 'click') {
+      $(tl_tab).click(function () {
+        $(tl_tab).removeClass('df_on');
+        $(tl_tab).eq($(this).index()).addClass('df_on');
+        $(tl_box).stop().fadeOut(tl_speed);
+        $(tl_box).eq($(this).index()).stop().fadeIn(tl_speed);
+      });
+    }
+    if (tl_events === 'over') {
+      $(tl_tab).hover(function () {
+        var _this = this;
+        clearTimeout(tl_num);
+        tl_time_out = setTimeout(function () {
+          $(tl_tab).removeClass('df_on');
+          $(tl_tab).eq($(_this).index()).addClass('df_on');
+          $(tl_box).stop().fadeOut(tl_speed);
+          $(tl_box).eq($(_this).index()).stop().fadeIn(tl_speed);
+        }, 30);
+
+      }, function () {
+        clearTimeout(tl_time_out);
+      });
+    }
+
+  };
+})(jQuery);
+
+
+// import '@/assets/images/leftnav.js';
+$(function() {
+  var Accordion = function(el, multiple) {
+    this.el = el || {};
+    this.multiple = multiple || false;
+
+    // Variables privadas
+    var links = this.el.find('.link');
+    // Evento
+    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
+  };
+
+  Accordion.prototype.dropdown = function(e) {
+    var $el = e.data.el;
+    let $this = $(this);
+    let $next = $this.next();
+
+    $next.slideToggle();
+    $this.parent().toggleClass('open');
+
+    if (!e.data.multiple) {
+      $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
+    }
+  };
+
+  var accordion = new Accordion($('#accordion'), false);
+  $('.submenu li').click(function () {
+    $(this).addClass('current').siblings('li').removeClass('current');
+  });
+});
+
+//切换单屏电视墙
+$(function() {
+  $(this.$el).find('.facility_tab .div_tab a').TL_Tab({
+    tab: ".facility_tab .div_tab a",
+    box: ".facility_tab .tab_cont",
+    events: "click",
+    num: 1,
+    speed: 10
+  });
+});
+
+
+
+
+</script>
+
+<style>
+/* 添加你的CSS样式 */
+
+</style>

zhsq_qk-ui/src/views/fusion/yshj.vue

@@ -0,0 +1,785 @@
+<template>
+  <div>
+    <div class="map">
+      <img src="@/assets/images/qkq_mapbg.png"/>
+    </div>
+    <!-- 阴影背景 -->
+    <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
+    <div class="bj_right"><img src="@/assets/images/sprhbj-right.png"/></div>
+    <div class="bj_bottom"><img src="@/assets/images/sprhbj-bottom.png"/></div>
+    <!--头部开始-->
+    <div class="header">
+      <h1>城市运行一网统管指挥中心</h1>
+    </div>
+    <!--头部结束-->
+    <!-- 中间开始 -->
+    <div class="center-bar">
+      <div class="center-list">
+        <h4>事项可网办率</h4>
+        <h5>94.85%</h5>
+      </div>
+      <div class="center-list">
+        <h4>办件率</h4>
+        <h5>869件</h5>
+      </div>
+      <div class="center-list">
+        <h4>锁定提前办结效率</h4>
+        <h5>98.57%</h5>
+      </div>
+      <div class="center-list">
+        <h4>承诺提前办结效率</h4>
+        <h5>94.85%</h5>
+      </div>
+      <div class="center-list">
+        <h4>逾期率</h4>
+        <h5>0%</h5>
+      </div>
+      <div class="center-list">
+        <h4>平均办理时间</h4>
+        <h5>0天1小时36分</h5>
+      </div>
+    </div>
+    <!-- 中间结束 -->
+    <!--左侧开始-->
+    <div class="left_con">
+      <div class="top_txt">
+        <b>汽开区</b>
+        <span>小雨</span>
+        <span>9~16℃</span>
+      </div>
+      <!-- 土地资源 -->
+      <!-- 区域办件量TOP -->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit">区域办件量TOP</div>
+        <div class="selectDate">
+          <span class="_selectData">程锦街道</span>
+          <a class="icon_more" @click="smalClick(this)"
+          ><img src="@/assets/images/down.png"
+          /></a>
+          <div class="_moreMenu">
+            <ul>
+              <li class="change">东风街道</li>
+              <li>程锦街道</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div
+        id="sprh-zyfb"
+        style="margin: 10px auto; width: 350px; height: 240px"
+      ></div>
+      <!-- 区域办件量TOP -->
+      <!-- 办件趋势统计 -->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">办件趋势统计</div>
+      </div>
+      <div
+        id="sprh-bjqstj"
+        style="margin: 10px auto; width: 350px; height: 300px"
+      ></div>
+      <!-- 办件趋势统计 -->
+    </div>
+    <!--左侧结束-->
+    <!--右侧开始-->
+    <div class="right_con">
+      <div class="top_txt">
+        <span>2024.04.20</span>
+        <span>星期六</span>
+        <b>11:16:58</b>
+      </div>
+      <!-- 事项办件量Top10 -->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">事项办件量Top10</div>
+      </div>
+      <div
+        id="sprh-sxbjl10"
+        style="margin: 10px auto; width: 350px; height: 260px"
+      ></div>
+      <!-- 事项办件量Top10 -->
+      <!-- 事项办件率Top10 -->
+      <div class="qkq_tdzy">
+        <div class="qkq_tit ">事项办件率Top10</div>
+      </div>
+      <div
+        id="sprh-sxbjl-top"
+        style="margin: 10px auto; width: 350px; height: 260px"
+      ></div>
+      <!-- 事项办件率Top10 -->
+    </div>
+    <!--右侧结束-->
+    <!--底部开始-->
+    <div class="footer">
+      <div class="nav-bottom">
+        <div class="nav-bottom-left">
+          <div class="nav-li-left">
+            <span>经济运行</span>
+          </div>
+          <div class="nav-li-left">
+            <span>城市管理</span>
+          </div>
+          <div class="nav-li-left">
+            <span>交通治理</span>
+          </div>
+          <div class="nav-li-left">
+            <span>基层治理</span>
+          </div>
+        </div>
+        <div class="nav-home-middle">
+          <img src="@/assets/images/home-btn.png"/>
+          <a>返回首页</a>
+        </div>
+        <div class="nav-bottom-right">
+          <div class="nav-li-right on">
+            <span>营商环境</span>
+          </div>
+          <div class="nav-li-right">
+            <span>政务运行</span>
+          </div>
+          <div class="nav-li-right">
+            <span>安全应急</span>
+          </div>
+          <div class="nav-li-right">
+            <span>视频融合</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--底部开始-->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import $ from 'jquery'
+import jQuery from 'jquery'
+import "@/assets/images/qkq_body.css";
+import "@/assets/images/qkq_index.css";
+import "@/assets/images/qkq_sprh.css";
+
+
+
+export default {
+  name: "yshj",
+  data() {
+    return {
+
+    }
+  },
+
+  created() {
+  },
+  mounted() {
+    this.regionTop();
+    this.trend();
+    this.matterUpTop();
+    this.matterTop();
+  },
+  methods: {
+    smalClick(val) {
+      var node = $(val).next();
+      if (node.is(":hidden")) {
+        //如果node是隐藏的则显示node元素，否则隐藏
+        node.show();
+      } else {
+        node.hide();
+      }
+    },
+
+    regionTop() {
+      //区域办件量
+      var myChart = echarts.init(document.getElementById('sprh-zyfb'));
+      let data = [{
+        value: 120,
+        label: '东兴网格'
+      }, {
+        value: 142,
+        label: '胜利网格'
+      }, {
+        value: 110,
+        label: '裕民网格'
+      },
+        {
+          value: 132,
+          label: '首期网格'
+        },
+        {
+          value: 132,
+          label: '民生网格  '
+        }
+      ];
+      let option = {
+        grid: {
+          top: 10,
+          left: 33,
+          right: 20,
+          bottom: 5,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          show: false
+        },
+        yAxis: {
+          show: true,
+          inverse: true,
+          type: 'category',
+          axisLine: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'label',
+          type: 'bar',
+          barWidth: 10,
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 2,
+            color: '#fff',
+            fontSize: 12
+          },
+          data: data.map((item) => {
+            return {
+              value: 0,
+              label: {
+                formatter() {
+                  return item.label;
+                }
+              }
+            };
+          })
+        }, {
+          name: 'value',
+          type: 'bar',
+          barWidth: 10,
+          barMinHeight: 10, // 最小高度
+          yAxisIndex: 0,
+          label: {
+            show: true,
+            position: 'right',
+            color: '#00d5e1',
+            fontSize: 12,
+            formatter({
+                        value
+                      }) {
+              return `${value}人`;
+            }
+          },
+          itemStyle: {
+            barBorderRadius: 3
+          },
+          data: data.map(({
+                            value
+                          }, index) => {
+            let color = new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
+              offset: 1,
+              color: '#004eaf' // 0% 处的颜色
+            }, {
+              offset: 0,
+              color: '#089aa2' // 100% 处的颜色
+            }], false)
+            return {
+              value,
+              label: {
+                color
+              },
+              itemStyle: {
+                color
+              }
+            };
+          })
+        }]
+      };
+
+      if (option) {
+        myChart.setOption(option);
+      }
+    },
+
+    trend(){
+      //办件趋势
+      var myChart = echarts.init(document.getElementById('sprh-bjqstj'));
+      var monthData = [];
+      var lineData = [];
+      for (var i = 1; i <= 12; i++) {
+        monthData.push(i + '月');
+        var lineNumber = Math.floor(Math.random() * 10000);
+        lineData.push(lineNumber);
+      }
+
+      let option = {
+
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        grid: {
+          top: '5%',
+          left: '15%',
+          right: '5%',
+          bottom: '25%',
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: '#502297',
+                width: 1,
+                type: 'dashed',
+              },
+            },
+            splitLine: {
+              show: true,
+              interval: 'auto',
+              lineStyle: {
+                color: ['#502297'],
+                type: 'dashed',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#FFFFFF', //X轴文字颜色
+                fontSize: 12,
+              },
+              margin: 12,
+              interval: 0,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: monthData,
+          },
+        ],
+        yAxis: [
+          {
+            splitNumber: 6,
+            splitLine: {
+              show: true,
+              interval: 'auto',
+              lineStyle: {
+                color: ['#502297'],
+                type: 'dashed',
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#502297',
+                width: 1,
+                type: 'dashed',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '成绩',
+            type: 'line',
+            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            smooth: true,
+            symbolSize: 8,
+            lineStyle: {
+              normal: {
+                color: '#FE7B00', // 线条颜色
+              },
+              borderColor: '#ffffff',
+            },
+            itemStyle: {
+              color: '#ffffff',
+              borderColor: '#FE7B00',
+              borderWidth: 2,
+            },
+
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: 'rgba(125, 14, 255, 0.4)',
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(116, 0, 216, 0.1)',
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: lineData,
+          },
+        ],
+      };
+
+      if(option){
+        myChart.setOption(option);
+      }
+    },
+    matterUpTop(){
+      var myChart = echarts.init(document.getElementById('sprh-sxbjl10'));
+      var datas = [{
+        "value": 36,
+        "name": "特种设备安全管.."
+      },
+        {
+          "value": 54,
+          "name": "特种设备使用登.."
+        },
+        {
+          "value": 29,
+          "name": "特种设备安全管.."
+        },
+        {
+          "value": 25,
+          "name": "一孩、二孩、三孩.."
+        },
+        {
+          "value": 45,
+          "name": "失业登记"
+        },
+        {
+          "value": 29,
+          "name": "医师执业注册（.."
+        },
+        {
+          "value": 25,
+          "name": "残疾人证新办"
+        },
+        {
+          "value": 35,
+          "name": "护士执业注册(.."
+        },
+        {
+          "value": 55,
+          "name": "失业登记"
+        },
+        {
+          "value": 65,
+          "name": "一孩、二孩、三孩.. "
+        },
+
+      ]
+      var maxArr = (new Array(datas.length)).fill(100);
+      let option = {
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'item',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: function(params) {
+            return params[0].name + ' : ' + params[0].value
+          }
+        },
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLabel: {
+            show: true,
+            align: 'right',
+            textStyle: {
+              fontSize: 14,
+              color: '#ffffff',
+              rich: {
+                index: {
+                  color: '#9d9d9d',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index1: {
+                  color: '#f8777b',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index2: {
+                  color: '#ffa145',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index3: {
+                  color: '#6ade8d',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                name: {
+                  width: 7 * 14,
+                  align: 'left',
+                  textAlign: 'left'
+                }
+              }
+            },
+            formatter: (name) => {
+              var index = (datas.map(item => item.name)).indexOf(name) + 1;
+              return [
+                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+                '{name|' + name + '}'
+              ].join(' ')
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          data: datas.map(item => item.name)
+        }, {
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#3196fa',
+              fontSize: '12'
+            },
+            formatter: '{value}'
+          },
+          data: datas.map(item => item.value)
+        }],
+        series: [{
+          name: '值',
+          type: 'bar',
+          zlevel: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius:5,
+              color: '#3196fa',
+            },
+          },
+          barWidth: 10,
+          data: datas
+        },
+          {
+            name: '背景',
+            type: 'bar',
+            barWidth: 10,
+            barGap: '-100%',
+            data: maxArr,
+            itemStyle: {
+              normal: {
+                color: '#042039',
+                barBorderRadius:5,
+              }
+            },
+          },
+        ]
+      };
+
+      if(option){
+        myChart.setOption(option);
+      }
+    },
+    matterTop(){
+      var myChart = echarts.init(document.getElementById('sprh-sxbjl-top'));
+      var datas = [{
+        "value": 36,
+        "name": "民办学校的举办.."
+      },
+        {
+          "value": 54,
+          "name": "失业登记.."
+        },
+        {
+          "value": 29,
+          "name": "民办学校的终止.."
+        },
+        {
+          "value": 25,
+          "name": "医师执业注册(.."
+        },
+        {
+          "value": 45,
+          "name": "一孩、二孩、三孩.."
+        },
+        {
+          "value": 29,
+          "name": "药品零售企业许.."
+        },
+        {
+          "value": 25,
+          "name": "护士执业注册"
+        },
+        {
+          "value": 35,
+          "name": "残疾人证新办"
+        },
+        {
+          "value": 55,
+          "name": "医疗广告审查"
+        },
+        {
+          "value": 65,
+          "name": "变更施工单位项.."
+        },
+
+      ]
+      var maxArr = (new Array(datas.length)).fill(100);
+      let option = {
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'item',
+          axisPointer: {
+            type: 'none'
+          },
+          formatter: function(params) {
+            return params[0].name + ' : ' + params[0].value
+          }
+        },
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: [{
+          type: 'category',
+          inverse: true,
+          axisLabel: {
+            show: true,
+            align: 'right',
+            textStyle: {
+              fontSize: 14,
+              color: '#ffffff',
+              rich: {
+                index: {
+                  color: '#9d9d9d',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index1: {
+                  color: '#f8777b',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index2: {
+                  color: '#ffa145',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                index3: {
+                  color: '#6ade8d',
+                  fontWeight: 'bold',
+                  fontStyle: 'italic'
+                },
+                name: {
+                  width: 7 * 14,
+                  align: 'left',
+                  textAlign: 'left'
+                }
+              }
+            },
+            formatter: (name) => {
+              var index = (datas.map(item => item.name)).indexOf(name) + 1;
+              return [
+                '{' + (index > 3 ? 'index' : 'index' + index) + '|' + index + '}',
+                '{name|' + name + '}'
+              ].join(' ')
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          data: datas.map(item => item.name)
+        }, {
+          type: 'category',
+          inverse: true,
+          axisTick: 'none',
+          axisLine: 'none',
+          show: true,
+          axisLabel: {
+            textStyle: {
+              color: '#3196fa',
+              fontSize: '12'
+            },
+            formatter: '{value}%'
+          },
+          data: datas.map(item => item.value)
+        }],
+        series: [{
+          name: '值',
+          type: 'bar',
+          zlevel: 1,
+          itemStyle: {
+            normal: {
+              barBorderRadius:5,
+              color: '#3196fa',
+            },
+          },
+          barWidth: 10,
+          data: datas
+        },
+          {
+            name: '背景',
+            type: 'bar',
+            barWidth: 10,
+            barGap: '-100%',
+            data: maxArr,
+            itemStyle: {
+              normal: {
+                color: '#042039',
+                barBorderRadius:5,
+              }
+            },
+          },
+        ]
+      };
+
+      if(option){
+        myChart.setOption(option);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Your CSS styles here */
+</style>

zhsq_qk-ui/src/views/system/camera/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="归属派出所" prop="ascriptionStation">
+      <el-form-item label="摄像头名称" prop="cameraName">
         <el-input
-          v-model="queryParams.ascriptionStation"
-          placeholder="请输入归属派出所"
+          v-model="queryParams.cameraName"
+          placeholder="请输入摄像头名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -83,6 +83,7 @@
 
     <el-table v-loading="loading" :data="cameraList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="名称" align="center" prop="cameraName"/>
       <el-table-column label="归属派出所" align="center" prop="policeName"/>
       <el-table-column label="点位具体位置" align="center" prop="address"/>
       <el-table-column label="经度" align="center" prop="longitude"/>
@@ -125,6 +126,9 @@
     <!-- 添加或修改摄像头对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="摄像头名称" prop="cameraName">
+          <el-input v-model="form.cameraName" placeholder="请输入摄像头名称"/>
+        </el-form-item>
         <el-form-item label="归属派出所" prop="policeName">
           <el-select v-model="form.policeName" filterable placeholder="请选择项目名称" @change="onChange">
             <el-option
@@ -194,7 +198,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        ascriptionStation: null,
+        cameraName: null,
         address: null,
         longitude: null,
         latitude: null,