Главная Обзор Помощь
Регистрация Войти
duhongyu
/
AnYang_UI
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Запросы на слияние 0 Коммиты 471 Релизы 0 Вики
Просмотр исходного кода

大屏

zhaomin лет назад: 4
Родитель
aaf6b670b1
Сommit
d14a22d9c5
4 измененных файлов с 458 добавлено и 211 удалено
Единый вид Показать статистику Diff
  1. 42 160
      WebChartNew/1.html
  2. 2 2
      WebChartNew/css/test-1920.css
  3. 118 19
      WebChartNew/index.html
  4. 296 30
      WebChartNew/js/index.js

+ 42 - 160
WebChartNew/1.html
Просмотреть файл

5 
 		<title></title>
 5 
 		<title></title>
6 
 	</head>
 6 
 	</head>
7 
 	<body>
 7 
 	<body>
8 
-		<div id="main" style="width: 80%;height: 400px;"></div>
8 
+		<!-- <input class="input" type="file" name="upFile" id="upFile" multiple="multiple" style="display: none;">
9 
+		<input class="input btns" type="button" value="上传" id="scwj" /> -->
10 
+		<!-- <canvas id="canvas" style="border:2px solid black;" width="200" height="200"> -->
11 
+		<div></div>
9 
 	</body>
 12 
 	</body>
10 
 	<script src="js/echarts.min.js"></script>
 13 
 	<script src="js/echarts.min.js"></script>
14 
+	<script src="js/jquery.min.js"></script>
11 
 	<script>
 15 
 	<script>
12 
-		// let str='<tr><td class="renkList_name" rowspan="3">综合满意度</td><td rowspan="3">40</td><td class="renkList_name">权重</td>'+
13 
-		// '<td>40</td><td>权重分数*（1－不满意工单量/承办工单量）</td><td rowspan="3">'+40*(1-rowJson.dissatisfied/rowJson.workordrcount)+'</td></tr><tr><td class="renkList_name">承办工单量</td><td>'+
14 
-		// rowJson.workordrcount+'</td><td>权重分数*（1－不满意率）</td></tr>'+'<tr><td class="renkList_name">不满意工单量</td><td>'+
15 
-		// rowJson.dissatisfied+'</td><td>'+formula+'</td></tr>';
16 
-		// $('.rankListDetial tbody').html(str);
17 
-		let channelChart = echarts.init(document.getElementById('main'));
18 
-		var xdata = ['苏州市', '无锡市', '南京市','苏州市', '无锡市', '南京市'];
19 
-		var data = [70, 0, 0,0, 0, 80];
20 
-		var maxArr = [100, 100, 100];
21 
-		option = {
22 
-		   tooltip: {
23 
-		   	trigger: 'item',
24 
-		   	textStyle: {
25 
-		   		color: '#ffe400',
26 
-		   		fontSize: '14',
27 
-		   		fontWeight: '500'
28 
-		   	},
29 
-		   	position: 'top',
30 
-		   	backgroundColor: 'rgba(250,250,250,0)',
31 
-		   	transitionDuration: 0.4,
32 
-		   	formatter: function(params) {
33 
-		   		return '<div style="background-image: url(images/reminder_box2.png);width:50px;height:33px;line-height:30px;background-size: 100% 100%;text-align:center;">' +
34 
-		   			 params.value+ '</div>';
35 
-		   	}
36 
-		   },
37 
-		    grid: {
38 
-		        left: "4%",
39 
-		        right: "4%",
40 
-		        bottom: "3%",
41 
-		        top: "15%",
42 
-		        containLabel: true
43 
-		    },
44 
-		    xAxis: {
45 
-		    	// type: "category",
46 
-		    	triggerEvent: true,
47 
-		    	boundaryGap: true,
48 
-		    	data: ['坐席数量', '签入', '通话中', '话后处理', '置忙', '置闲', '离线'],
49 
-		    	axisLabel: {
50 
-		    		//坐标轴刻度标签的相关设置。
51 
-		    		interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
52 
-		    		//	margin:15,
53 
-		    		textStyle: {
54 
-		    			color: "#fff",
55 
-		    			fontStyle: "normal",
56 
-		    			fontSize: 10
57 
-		    		}
58 
-		    	},
59 
-		    	axisTick: {
60 
-		    		//坐标轴刻度相关设置。
61 
-		    		show: false
62 
-		    	},
63 
-		    	axisLine: {
64 
-		    		//坐标轴轴线相关设置
65 
-		    		lineStyle: {
66 
-		    			color: "#036376"
67 
-		    		}
68 
-		    	},
69 
-		    	splitLine: {
70 
-		    		//坐标轴在 grid 区域中的分隔线。
71 
-		    		show: false,
72 
-		    		lineStyle: {
73 
-		    			color: "rgba(77, 128, 254, 0.2)"
74 
-		    		}
75 
-		    	}
76 
-		    },
77 
-		   yAxis: [{
78 
-		   	nameTextStyle: {
79 
-		   		color: "#f4f5f5",
80 
-		   		padding: [0, 0, 10, -5],
81 
-		   		fontSize: 14
82 
-		   	},
83 
-		   	axisLabel: {
84 
-		   		color: "#f4f5f5",
85 
-		   		fontSize: 14
86 
-		   	},
87 
-		   	axisTick: {
88 
-		   		lineStyle: {
89 
-		   			color: "#687f8a",
90 
-		   			width: 1
91 
-		   		},
92 
-		   		show: true
93 
-		   	},
94 
-		   	splitLine: {
95 
-		   		show: true,
96 
-		   		lineStyle: {
97 
-		   			color: "#687f8a",
98 
-		   			type: "dashed"
99 
-		   		}
100 
-		   	},
101 
-		   	axisLine: {
102 
-		   		lineStyle: {
103 
-		   			color: "#687f8a",
104 
-		   			width: 1,
105 
-		   			type: "solid"
106 
-		   		},
107 
-		   		show: true,
108 
-		   		// "symbol":['none', 'arrow'],
109 
-		   		symbol: ['none',
110 
-		   			'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'
111 
-		   		],
112 
-		   		symbolOffset: 5,
113 
-		   		symbolSize: [35, 38],
114 
-		   	},
115 
-		   	name: "条"
116 
-		   }],
117 
-		    // color: ["#e54035"],
118 
-		    series: [{
119 
-		            name: "数量",
120 
-		            barMinHeight: 10,
121 
-		            type: "pictorialBar",
122 
-		            barCategoryGap: "60%",
123 
-		            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
124 
-		            symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
125 
-		            itemStyle: {
126 
-		                normal: {
127 
-		                    //barBorderRadius: 5,
128 
-		                    //渐变色
129 
-		                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
130 
-		                            offset: 0,
131 
-		                            color: "#01EAED"
132 
-		                        },
133 
-		                        {
134 
-		                            offset: 0.5,
135 
-		                            color: "#02C4DD"
136 
-		                        },
137 
-		                        {
138 
-		                            offset: 1,
139 
-		                            color: "#029ED9"
140 
-		                        }
141 
-		                    ])
142 
-		                }
143 
-		            },
144 
-		            label: {
145 
-		            	normal: {
146 
-		            		show: false
147 
-		            	}
148 
-		            },
149 
-					emphasis: {
150 
-						itemStyle: {
151 
-							color: new echarts.graphic.LinearGradient(
152 
-								0, 0, 0, 1,
153 
-								[{
154 
-										offset: 0,
155 
-										color: '#fde301'
156 
-									},
157 
-									{
158 
-										offset: 1,
159 
-										color: '#0a2f3e'
160 
-									}
161 
-								]
162 
-							)
163 
-						}
164 
-					},
165 
-		            data: data,
166 
-		            z: 10
167 
-		        }
168 
-		    ]
169 
-		}
170 
-		channelChart.setOption(option);
16 
+		$.ajax({
17 
+			url: 'http://192.168.5.46:28000/imgurlinfosl ',
18 
+			type: "POST",
19 
+			data: {},
20 
+			/**
21 
+			 *必须false才会自动加上正确的Content-Type
22 
+			 */
23 
+			contentType: false,
24 
+			/**
25 
+			 * 必须false才会避开jQuery对 formdata 的默认处理
26 
+			 * XMLHttpRequest会对 formdata 进行正确的处理
27 
+			 */
28 
+			processData: false,
29 
+			success: function(result) {
30 
+			}
31 
+		});
32 
+		// var canvas = document.getElementById('canvas');
33 
+		// var ctx = canvas.getContext('2d');
34 
+		// var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
35 
+		//   '<foreignObject width="100%" height="100%">' +
36 
+		//   '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
37 
+		//   '<em>I</em> like ' +
38 
+		//   '<span style="color:white; text-shadow:0 0 2px blue;">' +
39 
+		//   'cheese</span>' +
40 
+		//   '</div>' +
41 
+		//   '</foreignObject>' +
42 
+		//   '</svg>';
43 
+		// var DOMURL = window.URL || window.webkitURL || window;
44 
+		// var img = new Image();
45 
+		// var svg = new Blob([data], {type: 'image/svg+xml'});
46 
+		// var url = DOMURL.createObjectURL(svg);
47 
+		// img.onload = function() {
48 
+		// 	ctx.drawImage(img, 0, 0);
49 
+		// 	DOMURL.revokeObjectURL(url);
50 
+		// }
51 
+		// img.src = url;
52 
+
171 
 	</script>
 53 
 	</script>
172 
 </html>
 54 
 </html>

+ 2 - 2
WebChartNew/css/test-1920.css
Просмотреть файл

811 
 .time p span{
 811 
 .time p span{
812 
 	color: #ffe000;
 812 
 	color: #ffe000;
813 
 }
 813 
 }
814 
-#keywordPie{
814 
+#keywordPie,#keywordPie2,#keywordPie3{
815 
 	position: absolute;
 815 
 	position: absolute;
816 
 	top: 75px;
 816 
 	top: 75px;
817 
 	right: 77px;
 817 
 	right: 77px;
1128 
 	font-weight: 600;
 1128 
 	font-weight: 600;
1129 
 	cursor: pointer;
 1129 
 	cursor: pointer;
1130 
 }
 1130 
 }
1131 
-.workAct:hover{
1131 
+.workAct{
1132 
 	color:#00f6ff ;
 1132 
 	color:#00f6ff ;
1133 
 	cursor: pointer;
 1133 
 	cursor: pointer;
1134 
 }
 1134 
 }

+ 118 - 19
WebChartNew/index.html
Просмотреть файл

326 
 									<th data-field="knowledgeover" data-align="center" data-formatter="getKnowledgeNo">未及时提交量</th>
 326 
 									<th data-field="knowledgeover" data-align="center" data-formatter="getKnowledgeNo">未及时提交量</th>
327 
 									<th data-field="secrecy" data-align="center" data-formatter="minusPoints">公民信息保密</th>
 327 
 									<th data-field="secrecy" data-align="center" data-formatter="minusPoints">公民信息保密</th>
328 
 									<th data-field="divulge" data-align="center" data-formatter="minusPoints">工单处理保密</th>
 328 
 									<th data-field="divulge" data-align="center" data-formatter="minusPoints">工单处理保密</th>
329 
-									<th data-field="cityinformation" data-align="center" data-formatter="minusPoints">市媒体宣传</th>
329 
+									<th data-field="cityinformation" data-align="center" data-formatter="extraPoints">市媒体宣传</th>
330 
 									<th data-field="knowledgerate" data-align="center" data-formatter="extraPoints">省媒体宣传</th>
 330 
 									<th data-field="knowledgerate" data-align="center" data-formatter="extraPoints">省媒体宣传</th>
331 
 									<th data-field="inspection" data-align="center" data-formatter="extraPoints">市领导视察</th>
 331 
 									<th data-field="inspection" data-align="center" data-formatter="extraPoints">市领导视察</th>
332 
 									<th data-field="extension" data-align="center" data-formatter="extraPoints">全市推广或收入市平台汇报材料</th>
 332 
 									<th data-field="extension" data-align="center" data-formatter="extraPoints">全市推广或收入市平台汇报材料</th>
442 
 						<ul class="state-share">
 442 
 						<ul class="state-share">
443 
 							<li pos="1">
 443 
 							<li pos="1">
444 
 								<div>
 444 
 								<div>
445 
-									<span style="text-align: left;">1</span>
446 
-									<span style="text-align: right;">督办</span>
445 
+									<span pos="1" style="text-align: left;">1</span>
446 
+									<span pos="1" style="text-align: right;">督办</span>
447 
 								</div>
 447 
 								</div>
448 
 								<div>
 448 
 								<div>
449 
-									<p>
449 
+									<p pos="1">
450 
 										<label class="db"></label>
 450 
 										<label class="db"></label>
451 
 										<label>数量</label>
 451 
 										<label>数量</label>
452 
 									</p>
 452 
 									</p>
453 
-									<p>
453 
+									<p pos="1">
454 
 										<label class="bdrate"></label>
 454 
 										<label class="bdrate"></label>
455 
 										<label>百分比</label>
 455 
 										<label>百分比</label>
456 
 									</p>
 456 
 									</p>
458 
 							</li>
 458 
 							</li>
459 
 							<li pos="2">
 459 
 							<li pos="2">
460 
 								<div>
 460 
 								<div>
461 
-									<span style="text-align: left;">2</span>
462 
-									<span style="text-align: right;">直办</span>
461 
+									<span pos="2" style="text-align: left;">2</span>
462 
+									<span pos="2" style="text-align: right;">直办</span>
463 
 								</div>
 463 
 								</div>
464 
 								<div>
 464 
 								<div>
465 
-									<p>
465 
+									<p pos="2">
466 
 										<label class="zb"></label>
 466 
 										<label class="zb"></label>
467 
 										<label></label>
 467 
 										<label></label>
468 
 									</p>
 468 
 									</p>
469 
-									<p>
469 
+									<p pos="2">
470 
 										<label class="zbrate"></label>
 470 
 										<label class="zbrate"></label>
471 
 										<label>百分比</label>
 471 
 										<label>百分比</label>
472 
 									</p>
 472 
 									</p>
474 
 							</li>
 474 
 							</li>
475 
 							<li pos="3">
 475 
 							<li pos="3">
476 
 								<div>
 476 
 								<div>
477 
-									<span style="text-align: left;">3</span>
478 
-									<span style="text-align: right;">转办</span>
477 
+									<span pos="3" style="text-align: left;">3</span>
478 
+									<span pos="3" style="text-align: right;">转办</span>
479 
 								</div>
 479 
 								</div>
480 
 								<div>
 480 
 								<div>
481 
-									<p>
481 
+									<p pos="3">
482 
 										<label class="zub"></label>
 482 
 										<label class="zub"></label>
483 
 										<label>数量</label>
 483 
 										<label>数量</label>
484 
 									</p>
 484 
 									</p>
485 
-									<p>
485 
+									<p pos="3">
486 
 										<label class="zubrate"></label>
 486 
 										<label class="zubrate"></label>
487 
 										<label>百分比</label>
 487 
 										<label>百分比</label>
488 
 									</p>
 488 
 									</p>
490 
 							</li>
 490 
 							</li>
491 
 							<li pos="4">
 491 
 							<li pos="4">
492 
 								<div>
 492 
 								<div>
493 
-									<span style="text-align: left;">4</span>
494 
-									<span style="text-align: right;">催办</span>
493 
+									<span pos="4" style="text-align: left;">4</span>
494 
+									<span pos="4" style="text-align: right;">催办</span>
495 
 								</div>
 495 
 								</div>
496 
 								<div>
 496 
 								<div>
497 
-									<p>
497 
+									<p pos="4">
498 
 										<label class="cb"></label>
 498 
 										<label class="cb"></label>
499 
 										<label>数量</label>
 499 
 										<label>数量</label>
500 
 									</p>
 500 
 									</p>
501 
-									<p>
501 
+									<p pos="4">
502 
 										<label class="cbrate"></label>
 502 
 										<label class="cbrate"></label>
503 
 										<label>百分比</label>
 503 
 										<label>百分比</label>
504 
 									</p>
 504 
 									</p>
533 
 									<th data-field="UserName" data-align="center">受理人</th>
 533 
 									<th data-field="UserName" data-align="center">受理人</th>
534 
 									<th data-field="TypeName" data-align="center">类型</th>
 534 
 									<th data-field="TypeName" data-align="center">类型</th>
535 
 									<th data-field="DeptName" data-align="center">承办单位</th>
 535 
 									<th data-field="DeptName" data-align="center">承办单位</th>
536 
-									<th data-field="F_ComContent" data-align="center" data-width="250"  data-formatter="getDeptname">工单内容</th>
536 
+									<th data-field="F_ComContent" data-align="center" data-width="150"  data-formatter="getDeptnameC">工单内容</th>
537 
 									<th data-field="KeyName" data-align="center">问题分类</th>
 537 
 									<th data-field="KeyName" data-align="center">问题分类</th>
538 
 								</tr>
 538 
 								</tr>
539 
 							</thead>
 539 
 							</thead>
796 
 									<th data-field="UserName" data-align="center">受理人</th>
 796 
 									<th data-field="UserName" data-align="center">受理人</th>
797 
 									<th data-field="TypeName" data-align="center">类型</th>
 797 
 									<th data-field="TypeName" data-align="center">类型</th>
798 
 									<th data-field="DeptName" data-align="center">承办单位</th>
 798 
 									<th data-field="DeptName" data-align="center">承办单位</th>
799 
-									<th data-field="F_ComContent" data-align="center" data-width="250"  data-formatter="getDeptname">工单内容</th>
799 
+									<th data-field="F_ComContent" data-align="center" data-width="250"  data-formatter="getDeptnameC">工单内容</th>
800 
 									<th data-field="KeyName" data-align="center">问题分类</th>
 800 
 									<th data-field="KeyName" data-align="center">问题分类</th>
801 
 								</tr>
 801 
 								</tr>
802 
 							</thead>
 802 
 							</thead>
805 
 						</table>
 805 
 						</table>
806 
 					</div>
 806 
 					</div>
807 
 				</div>
 807 
 				</div>
808 
+				<div class="knowledgeBase">
809 
+					<img src="./images/secondary_img/close.png" alt="" class="close_iconT">
810 
+					<div class="head_name">
811 
+						<img src="./images/secondary_img/title_right.png" class="title_left">
812 
+						<h3>安阳市12345热线知识库列表</h3>
813 
+						<img src="./images/secondary_img/title_left.png" class="title_right">
814 
+					</div>
815 
+					<div style="width: 100%;padding: 10px;">
816 
+					    <table id="orderlist3" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
817 
+					        <thead>
818 
+					            <tr>
819 
+					                <th data-field="F_Descript" data-formatter="GetCont" data-align="center">文本描述</th>
820 
+					                <th data-field="F_Level" data-align="center" data-formatter="States">级别</th>
821 
+					                <th data-field="F_DeptName" data-align="center">承办单位</th>
822 
+					                <th data-field="F_CreateTime"  data-align="center">添加时间</th>
823 
+					                <th data-field="F_CreateUserName" data-align="center">添加人</th>
824 
+					                <th data-field="F_SubmitUserName" data-align="center">提交人</th>
825 
+					                <th data-field="F_SubmitTime" data-align="center">提交时间</th>
826 
+					                <th data-field="F_LimitTime"  data-align="center">时限</th>
827 
+					                <th data-field="F_WorkOrderId" data-formatter="Dispose" data-align="center" class="operation_list">操作</th>
828 
+					            </tr>
829 
+					        </thead>
830 
+					        <tbody class="list"></tbody>
831 
+					    </table>
832 
+					</div>
833 
+				</div>
834 
+				<div class="acceptCont">
835 
+					<img src="./images/secondary_img/close.png" alt="" class="close_iconT">
836 
+					<div class="head_name">
837 
+						<img src="./images/secondary_img/title_right.png" class="title_left">
838 
+						<h3>安阳市12345热线平台办理情况</h3>
839 
+						<img src="./images/secondary_img/title_left.png" class="title_right">
840 
+					</div>
841 
+					<div class="key_content">
842 
+						<div class="count-share">
843 
+							<div style="width: 100%;padding: 10px;height: 800px;">
844 
+								<table id="acceptContlist" data-row-style="rowStyle" data-query-params="queryParams"
845 
+									data-pagination="true">
846 
+									<thead>
847 
+										<tr>
848 
+											<th data-formatter="Code" data-align="center">序号</th>
849 
+											<th data-field="deptname" data-align="center" data-formatter="getDeptnameP">名称</th>
850 
+											<th data-field="total" data-align="center">数量</th>
851 
+											<th data-field="rate" data-align="center">百分比</th>
852 
+										</tr>
853 
+									</thead>
854 
+									<tbody class="list">
855 
+									</tbody>
856 
+								</table>
857 
+							</div>
858 
+						</div>
859 
+						<div class="pie_statistics">
860 
+							<h3>问题分类统计</h3>
861 
+							<div id="keywordPie2" style="width:1100px;height:803px;"></div>
862 
+						</div>
863 
+					</div>
864 
+				</div>
865 
+				<div class="acceptCont2">
866 
+					<img src="./images/secondary_img/close.png" alt="" class="close_iconT">
867 
+					<div class="head_name">
868 
+						<img src="./images/secondary_img/title_right.png" class="title_left">
869 
+						<h3>安阳市12345热线平台办理情况</h3>
870 
+						<img src="./images/secondary_img/title_left.png" class="title_right">
871 
+					</div>
872 
+					<div class="key_content">
873 
+						<div class="count-share">
874 
+							<div style="width: 100%;padding: 10px;height: 800px;">
875 
+								<table id="acceptContlist2" data-row-style="rowStyle" data-query-params="queryParams"
876 
+									data-pagination="true">
877 
+									<thead>
878 
+										<tr>
879 
+											<th data-formatter="Code" data-align="center">序号</th>
880 
+											<th data-field="KeyName" data-align="center" data-formatter="getCompanyNameP2" >名称</th>
881 
+											<th data-field="Count" data-align="center">数量</th>
882 
+											<th data-field="Rate" data-align="center">百分比</th>
883 
+										</tr>
884 
+									</thead>
885 
+									<tbody class="list">
886 
+									</tbody>
887 
+								</table>
888 
+							</div>
889 
+						</div>
890 
+						<div class="pie_statistics">
891 
+							<h3>问题分类统计</h3>
892 
+							<div class="time">
893 
+								<p style="text-align: right;margin-left: 30px;" class="statisticsTime">
894 
+									2021-5-16 00:00:00 至 2021-7-13 23:59:59
895 
+								</p>
896 
+								<p>
897 
+									总计：<span class="total">10238</span> 件
898 
+									<span>&nbsp;4&nbsp;</span> 级
899 
+									<span class="classTotal">&nbsp;10&nbsp;</span> 类
900 
+									<span class="prot">&nbsp;1566&nbsp;</span> 项问题分类
901 
+								</p>
902 
+							</div>
903 
+							<div id="keywordPie3" style="width:1100px;height:803px;"></div>
904 
+						</div>
905 
+					</div>
906 
+				</div>
808 
 			</div>
 907 
 			</div>
809 
 	</body>
 908 
 	</body>
810 
 	<script src="js/main.js"></script>
 909 
 	<script src="js/main.js"></script>

Разница между файлами не показана из-за своего большого размера
+ 296 - 30
WebChartNew/js/index.js