no message

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
+        "@kjgl77/datav-vue3": "^1.5.0",
         "axios": "^1.1.3",
         "cesium-navigation-es6": "^3.0.8",
         "dayjs": "^1.11.7",
@@ -29,6 +30,7 @@
         "vite-plugin-cesium": "^1.2.18",
         "vue": "^3.2.25",
         "vue-router": "^4.0.16",
+        "vue-seamless-scroll": "^1.1.23",
         "vue3-print-nb": "^0.1.4"
       },
       "devDependencies": {
@@ -65,6 +67,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.4.tgz",
@@ -107,6 +120,122 @@
         "@floating-ui/core": "^1.0.1"
       }
     },
+    "node_modules/@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "node_modules/@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "node_modules/@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "node_modules/@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@kjgl77/datav-vue3": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@kjgl77/datav-vue3/-/datav-vue3-1.5.0.tgz",
+      "integrity": "sha512-uCUj9dNP2qX43/XRrnuyXV8W2zCMflyrNAJH1zBw+Umq8KxlXcmWbR1AMg70at2b0nBK2Ov+oQkjqoeb2hWC2g==",
+      "dependencies": {
+        "@jiaminghi/c-render": "^0.4.3",
+        "@jiaminghi/charts": "^0.2.18",
+        "@jiaminghi/color": "^1.1.3",
+        "@vueuse/core": "^10.0.2",
+        "lodash-es": "^4.17.21"
+      }
+    },
+    "node_modules/@kjgl77/datav-vue3/node_modules/@types/web-bluetooth": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
+    },
+    "node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/core": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
+      "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.1.2",
+        "@vueuse/shared": "10.1.2",
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/metadata": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
+      "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@kjgl77/datav-vue3/node_modules/@vueuse/shared": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
+      "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@kjgl77/datav-vue3/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -681,6 +810,11 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
     "node_modules/consolidate": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.16.0.tgz",
@@ -1604,6 +1738,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -2075,6 +2214,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
+      "dependencies": {
+        "comutils": "^1.1.9"
+      }
+    },
     "node_modules/vue/node_modules/@babel/parser": {
       "version": "7.18.11",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.11.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@kjgl77/datav-vue3": "^1.5.0",
     "axios": "^1.1.3",
     "cesium-navigation-es6": "^3.0.8",
     "dayjs": "^1.11.7",
@@ -28,6 +29,7 @@
     "vite-plugin-cesium": "^1.2.18",
     "vue": "^3.2.25",
     "vue-router": "^4.0.16",
+    "vue-seamless-scroll": "^1.1.23",
     "vue3-print-nb": "^0.1.4"
   },
   "devDependencies": {
@@ -46,6 +48,7 @@
     "optimizeDeps": {
       "include": [
         "@element-plus/icons-vue",
+        "@kjgl77/datav-vue3",
         "axios",
         "cesium-navigation-es6",
         "dayjs",
@@ -66,6 +69,7 @@
         "shapefile",
         "vue",
         "vue-router",
+        "vue-seamless-scroll",
         "vue3-print-nb"
       ]
     }

src/App.vue

@@ -10,6 +10,13 @@
 </script>
 
 <style lang="scss">
+	.ScriconList{
+		margin-top: 6rem;
+		height: 20rem;
+		width: 20rem;
+		background:url('@/assets/images/info.png') no-repeat;
+		background-size: 100% 100%;
+	}
 	.lk-status-bar{
 		z-index: 15;
 	}

src/main.js

@@ -24,6 +24,11 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import md5 from "js-md5"
 import {createPinia} from 'pinia'
 import * as echarts from "echarts";
+import DataVVue3 from '@kjgl77/datav-vue3'
+
+
+
+
 
 //全局弹出框组件
 import jtpopup from './components/jt-popup/jt-popup.vue'
@@ -40,6 +45,7 @@ import * as jt3dSDK from '/public/jt3dSDK/jt3d.es.js';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
 
+
 // import 'amfe-flexible';//rem适配
 
 import Print from 'vue3-print-nb'; //引入打印模块
@@ -74,6 +80,12 @@ app.component("jt-echarts",jtecharts)
 app.use(router);
 app.use(ElementPlus);
 app.use(Print);
+app.use(DataVVue3)
+
+
+
+
+
 
 
 app.mount('#app');

src/views/Table/components/BasicInfor.vue

@@ -3,7 +3,10 @@
 	<div class="Background">
 		<div class="imgback"></div>
 		<div class="ref000" style="font-size: 10rem; ">
-			系统建设应坚持“先进、可靠、实用、落地”的原则，实行“整体规划、分步实施；统一标准、加强管理；先进实用、政策落地”的建设方针。
+			沂水县，隶属于山东省临沂市，是临沂市北部次中心，生态型山水城市，位于鲁中南地区、沂蒙山腹地，居沂河、沭河上游。东邻莒县，西与沂源、蒙阴交界，南与沂南毗连，北与安丘、临朐接壤。土地总面积2434.8平方千米，在全省县级行政区划面积中列第二位。辖2个街道、16个乡镇、1个经济开发区、1个沂蒙风情旅游景区，359个农村社区。县政府驻沂城街道。根据第七次人口普查数据，截至2020年11月1日零时，沂水县常住人口为967570人。
+			2020年，沂水县生产总值为444.14亿元，同比增长4%。其中第一产业增加值为46.72亿元，同比增长3.7%；第二产业增加值为168.76亿元，同比增长6.8%；第三产业增加值为228.66亿元，同比增长1.9%。
+			2014年6月12日，被中国国家旅游局评为“全国旅游标准化示范县”，成为山东省首个旅游标准化示范县。同年7月，临沂沂水被确认为中国地名文化遗产"千年古县"。2018年9月25日，获得商务部“2018年电子商务进农村综合示范县”荣誉称号。2018年10月，入选2018年度全国投资潜力百强县市、绿色发展百强县市、科技创新百强县市、全国新型城镇化质量百强县市。入选2019年度全国新型城镇化质量百强县市。2020年山东省四星级新型智慧城市建设预试点城市。2020年7月，被省政府评为“高质量发展先进县”。
+			项目区位于沂水县院东头镇范围内，涉及埠前庄村、单家庄村等23个行政村。项目区北至碌碡岔村，南至埠前庄村、东至埠前庄村、西至桃棵子村。地理坐标为东经118°23′54″—118°28′54″，35°41′13″—35°41′47″。
 		</div>
 	</div>
 
@@ -72,71 +75,75 @@
 		overflow-y:auto
 	}
 	.Titles{
-		width: 100%;
-		
+		margin-left: 10rem;
+		margin-top: 10rem;
+		width: 340rem;
+		height: 100rem;
 		
 	}
 
 	.leftTitle {
 		
-		width: 170rem;
+		width: 150rem;
 		display: inline-block;
+		
 	}
 
 	.topIcon {
-		margin-top: 15rem;
+		margin-top: 10rem;
 		
 		height: 44rem;
-		width: 170rem;
+		width: 100%;
 		background: url('@/assets/images/icon.png') no-repeat;
-		background-size: 30%, 30%;
+		background-size: 25%, 25%;
 	}
 
 	.bottomIcon {
 		
-		margin-top: 15rem;
+		margin-top: 10rem;
 		height: 44rem;
-		width: 170rem;
+		width: 100%;
 		background: url('@/assets/images/bottom.png') no-repeat;
-		background-size: 30%, 30%;
+		background-size:25%, 25%;
 	}
 
 	.topRightIcon {
 		
-		margin-top: 15rem;
+		margin-top: 10rem;
 		height: 44rem;
-		width: 170rem;
+		width: 100%;
 		background: url('@/assets/images/rightTop.png') no-repeat;
-		background-size: 30%, 30%;
+		background-size:25%, 25%;
 	}
 
 	.bottomRightIcon {
 		
-		margin-top: 15rem;
+		margin-top: 10rem;
 		height: 44rem;
-		width: 170rem;
+		width:100%;
 		background: url('@/assets/images/rightBottom.png') no-repeat;
-		background-size: 30%, 30%;
+		background-size: 25%, 25%;
 	}
 
 	.rightTitle {
-		width: 170rem;
+	    margin-left: 20rem;
+		width: 150rem;
 		float: right;
 		display: inline-block
 	}
 
 	.fontInfo {
-		height: 60%;
-		font-size: 24rem;
+		height: 40%;
+		font-size: 16rem;
 		color: rgb(200, 250, 255);
-		margin-left: 40rem;
+		margin-left: 20rem;
 		font-weight: bold;
 
 	}
 
 	.font {
-		font-size: 16rem;
+		font-size: 14rem;
 		color: rgb(200, 250, 255);
-		margin-left: 40rem;
+		margin-left: 20rem;
 	}
 </style>

src/views/Table/components/TianluEngin.vue

@@ -42,286 +42,6 @@
 			
 		},
 		methods: {
-			/* getCirlPoint(x0, y0, r, angle) {
-				let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
-				let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
-				return {
-					x: x1,
-					y: y1
-				}
-			},
-			typeCharts() {
-				this.option = this.getOption();
-				// var chartDom = document.getElementById('echarts');
-				// var myChart = echarts.init(chartDom);
-				// myChart.setOption(option, true);
-			},
-			getOption(data) {
-				let angle = 30;
-				let option = {
-					title: {
-						text: '{a|' + '企业' + '}',
-						x: 'center',
-						y: 'center',
-						textStyle: {
-							rich: {
-								a: {
-									fontSize: 20,
-									color: '#29EEF3'
-					   },
-
-								c: {
-									fontSize: 16,
-									color: '#ffffff',
-									// padding: [5,0]
-								}
-							}
-						}
-					},
-					series: [{
-							name: "ring5",
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								return {
-									type: 'arc',
-									shape: {
-										cx: api.getWidth() / 2,
-										cy: api.getHeight() / 2,
-										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
-										startAngle: (0 + angle) * Math.PI / 180,
-										endAngle: (90 + angle) * Math.PI / 180
-									},
-									style: {
-										stroke: "#0CD3DB",
-										fill: "transparent",
-										lineWidth: 1.5
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: "ring5",
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								return {
-									type: 'arc',
-									shape: {
-										cx: api.getWidth() / 2,
-										cy: api.getHeight() / 2,
-										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
-										startAngle: (180 + angle) * Math.PI / 180,
-										endAngle: (270 + angle) * Math.PI / 180
-									},
-									style: {
-										stroke: "#0CD3DB",
-										fill: "transparent",
-										lineWidth: 1.5
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: "ring5",
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								return {
-									type: 'arc',
-									shape: {
-										cx: api.getWidth() / 2,
-										cy: api.getHeight() / 2,
-										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
-										startAngle: (270 + -angle) * Math.PI / 180,
-										endAngle: (40 + -angle) * Math.PI / 180
-									},
-									style: {
-										stroke: "#0CD3DB",
-										fill: "transparent",
-										lineWidth: 1.5
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: "ring5",
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								return {
-									type: 'arc',
-									shape: {
-										cx: api.getWidth() / 2,
-										cy: api.getHeight() / 2,
-										r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
-										startAngle: (90 + -angle) * Math.PI / 180,
-										endAngle: (220 + -angle) * Math.PI / 180
-									},
-									style: {
-										stroke: "#0CD3DB",
-										fill: "transparent",
-										lineWidth: 1.5
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: "ring5",
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								let x0 = api.getWidth() / 2;
-								let y0 = api.getHeight() / 2;
-								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
-								let point = {
-									x:30,
-									y:40
-								}
-								return {
-									type: 'circle',
-									shape: {
-										cx: point.x,
-										cy: point.y,
-										r: 4
-									},
-									style: {
-										stroke: "#0CD3DB", //粉
-										fill: "#0CD3DB"
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: "ring5", //绿点
-							type: 'custom',
-							coordinateSystem: "none",
-							renderItem: function(params, api) {
-								let x0 = api.getWidth() / 2;
-								let y0 = api.getHeight() / 2;
-								let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
-								let point = {
-									x:30,
-									y:40
-								}
-								return {
-									type: 'circle',
-									shape: {
-										cx: point.x,
-										cy: point.y,
-										r: 4
-									},
-									style: {
-										stroke: "#0CD3DB", //绿
-										fill: "#0CD3DB"
-									},
-									silent: true
-								};
-							},
-							data: [0]
-						},
-						{
-							name: '覆盖率',
-							type: 'pie',
-							radius: ['58%', '45%'],
-							silent: true,
-							clockwise: true,
-							startAngle: 90,
-							z: 0,
-							zlevel: 0,
-							label: {
-								normal: {
-									position: "center",
-
-								}
-							},
-							data: [{
-									value: 79,
-									name: "",
-									itemStyle: {
-										normal: {
-											color: { // 完成的圆环的颜色
-												colorStops: [{
-													offset: 0,
-													color: '#4FADFD' // 0% 处的颜色
-												}, {
-													offset: 1,
-													color: '#28E8FA' // 100% 处的颜色
-												}]
-											},
-										}
-									}
-								},
-								{
-									value: 100 - this.value,
-									name: "",
-									label: {
-										normal: {
-											show: false
-										}
-									},
-									itemStyle: {
-										normal: {
-											color: "#173164"
-										}
-									}
-								}
-							]
-						},
-						{
-							name: "",
-							type: "gauge",
-							radius: "58%",
-							center: ['50%', '50%'],
-							startAngle: 0,
-							endAngle: 359.9,
-							splitNumber: 8,
-							hoverAnimation: true,
-							axisTick: {
-								show: false
-							},
-							splitLine: {
-								length: 60,
-								lineStyle: {
-									width: 5,
-									color: "#061740"
-								}
-							},
-							axisLabel: {
-								show: false
-							},
-							pointer: {
-								show: false
-							},
-							axisLine: {
-								lineStyle: {
-									opacity: 0
-								}
-							},
-							detail: {
-								show: false
-							},
-							data: [{
-								value: 0,
-								name: ""
-							}]
-						},
-
-					]
-
-				};
-				return option;
-			} */
 
 		},
 
@@ -341,19 +61,19 @@
 		position: absolute;
 	}
 	.fonts{
-		font-size: 24rem;
+		font-size: 16rem;
 		text-align: center;
 		color: rgb(200, 250, 255);
 		
 	}
 	.bottomFonts{
 		margin-top: 90rem;
-		font-size: 18rem;
+		font-size: 16rem;
 		color: rgb(200, 250, 255);
 	}
 
 	.text {
-		margin-top: 10rem;
+		margin-top: 20rem;
 		height: 170rem;
 		width: 200rem;
 		margin-left: 130rem;
@@ -373,7 +93,7 @@
 	.leftTop {
 		margin-top: 30rem;
 		color: rgb(200, 250, 255);
-		font-size: 24rem;
+		font-size: 20rem;
 		font-weight: bold;
 	}
 
@@ -390,7 +110,7 @@
 	.rightTop {
 		margin-top: 30rem;
 		color: rgb(200, 250, 255);
-		font-size: 24rem;
+		font-size: 20rem;
 		font-weight: bold;
 	}
 	

src/views/Table/components/WaterLevelChart.vue

@@ -1,7 +1,9 @@
 <template>
-  	<div style="display: inline-block;float:left ;height: 170rem;width: 160rem;">
-  		<jt-echarts style="width: 100%;height: 100%;margin-top:25rem" :chartData="option"></jt-echarts>
+  	<div style="display: inline-block;float:left ;height: 160rem;width: 160rem;">
+  		<jt-echarts style="width: 100%;height: 100%;margin-top:20rem" :chartData="option"></jt-echarts>
+		<div class="fonts">灌溉覆盖率</div>
   	</div>
+	 
   	<div class="text">
   		<div class="left">
   			<div class="leftTop">15.7亩</div>
@@ -50,13 +52,13 @@
   						name: '完成',
   						type: 'liquidFill',
   						radius: '130rem',
-  						data: [0.80],
+  						data: [1],
   						label: {
   							normal: {
   								color: '#27e5f1',
   								insideColor: '#fff',
   								textStyle: {
-  									fontSize: "40rem",
+  									fontSize: "30rem",
   									fontWeight: 'bold',
   								}
   							}
@@ -97,7 +99,7 @@
 
   <style scoped>
   	.text {
-  		margin-top: 10rem;
+  		margin-top: 30rem;
   		height: 170rem;
   		width: 165rem;
 
@@ -113,7 +115,7 @@
   	.leftTop {
   		margin-top: 10rem;
   		color: rgb(200, 250, 255);
-  		font-size: 24rem;
+  		font-size: 20rem;
   		font-weight: bold;
   	}
 
@@ -129,7 +131,7 @@
 	.rightTop {
 		margin-top: 10rem;
 		color: rgb(200, 250, 255);
-		font-size: 24rem;
+		font-size: 20rem;
 		font-weight: bold;
 	}
 	
@@ -137,4 +139,8 @@
 		color: rgb(200, 250, 255);
 		font-size: 16rem;
 	}
+	.fonts{
+		color: rgb(200, 250, 255);
+		font-size: 16rem;
+	}
   </style>

src/views/test/components/ScrolledList.vue

@@ -0,0 +1,61 @@
+<script setup>
+	
+</script>
+
+<template>
+   <div class="tables">
+	     <dv-scroll-board :config="config" style="width:340rem;height:220rem" @click="clickInfo" />
+   </div>
+  
+</template>
+
+<script>
+	
+	export default {
+		data() {
+			return {
+				// viewersName: '', //视角标签名称
+				// ImgurlList: [], //截图地址列表
+				config:{
+					header: ['设备名称', '设备类型', '设备状态','详情'],
+					 data: [
+					   ['设备一', 'A200', '正常'],
+					   ['设备二', 'C100', '正常'],
+					   ['设备三', 'B300', '正常'],
+					   ['设备四', 'E500', '正常'],
+					   ['设备五', 'B400', '正常'],
+					   ['设备六', 'F300', '正常'],
+					 ],
+					align:['center'],
+					headerBGC:'rgba(61, 198, 255, 0.4)',
+					oddRowBGC:'rgba(0, 37, 98, 0.4)',
+					
+				
+				}
+				
+			}
+		},
+		methods: {
+			clickInfo(config){
+				console.log()
+				
+			}
+			
+			
+		},
+		mounted() {
+			this.config.data = this.config.data.map((item) => {
+			        item.push("<div style='color:#08C8B7' class='ScriconList'></div>");
+			        return item;
+			      })
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.tables{
+	margin-top: 10rem;
+}
+
+	
+</style>

src/views/test/components/SeedlingMonitor.vue

@@ -1,4 +1,4 @@
-<script setup>
+<!--<script setup>
 	import videofarm1 from '@/assets/video/videofarm1.mp4';
 	import videofarm2 from '@/assets/video/videofarm2.mp4';
 	import nongye from '@/assets/images/farm.jpg';
@@ -84,9 +84,10 @@
 		width: 100%;
 		height: 100%;
 		border-radius: 20rem;
-		border-style: solid;
-		border-width: 1rem ;
-		border-color:rgb(200, 250, 255,0.3);
+	
+		
+		
+		background-color: black;
 	}
 
 	.rightContent {
@@ -151,3 +152,54 @@
 		background-size: 11%, 11%;
 	}
 </style>
+-->
+<template>
+  <div id="data-view">
+    <!-- 轮播列表 -->
+    <div>
+      <div class="title"><i class="el-icon-location-information"></i>{{title}}</div>
+      <scrollBoard
+       :config="config"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import scrollBoard from "./ScrolledList.vue"
+export default {
+  components: { scrollBoard },
+  mounted() {
+    this.config.data = [
+      ["行1列1", "行1列2", "行1列3"],
+      ["行2列1", "行2列2", "行2列3"],
+      ["行3列1", "行3列2", "行3列3"],
+      ["行4列1", "行4列2", "行4列3"],
+      ["行5列1", "行5列2", "行5列3"],
+      ["行6列1", "行6列2", "行6列3"],
+      ["行7列1", "行7列2", "行7列3"],
+      ["行8列1", "行8列2", "行8列3"],
+    ];
+    this.config.header = ["品种", "销量", "供销商", "详情"],
+       this.config.datat = this.scrollList.map((item) => {
+        item.push("<i style='color:#08C8B7' class='el-icon-view'></i>");
+        return item;
+      });
+  },
+  data() {
+    return {
+      scrollList: [], //轮播列表内容
+	  config:{
+		  data:[],
+		  header:[]
+	  },
+      headerList: [], //轮播表头数据
+      title: "最新一周供货情况", //轮播列表标题
+    };
+  },
+};
+</script>
+<style  scoped>
+
+</style>
+
+

src/views/test/components/SoilMoisture.vue

@@ -283,262 +283,262 @@
 
 <style>
 </style> -->
-  <template>
-  	<div id="mains" style="display: inline-block;height: 200rem;width: 320rem;margin-top:20rem"></div>
-  </template>
-  <script>
-  	export default {
-  		data() {
-  			return {
+<template>
+	<div id="mains" style="display: inline-block;height: 200rem;width: 320rem;margin-top:20rem"></div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
 
-  			}
-  		},
-  		mounted() {
-  			var chartDom = document.getElementById('mains');
-  			var myChart = this.$echarts.init(chartDom);
+			}
+		},
+		mounted() {
+			var chartDom = document.getElementById('mains');
+			var myChart = this.$echarts.init(chartDom);
 
-  			let option = {
-  				color: ['#39e07f', '#1581ff', '#2ed0e7', '#ff9a9a', '#ffad31'],
-  				/* title: {
-  				   text: 'Gradient Stacked Area Chart'
-  				 }, */
-  				tooltip: {
-  					trigger: 'axis',
+			let option = {
+				color: ['#39e07f', '#1581ff', '#2ed0e7', '#ff9a9a', '#ffad31'],
+				/* title: {
+				   text: 'Gradient Stacked Area Chart'
+				 }, */
+				tooltip: {
+					trigger: 'axis',
 					backgroundColor: "rgba(255,255,255,0.6)",
 					borderColor: "rgba(255,255,255,0.6)", //设置边框颜色
 					textStyle: {
 						color: "rgba(0,0,0,0.8)" //设置文字颜色
 					},
-  					axisPointer: {
-  						type: 'cross',
-  						label: {
-  							backgroundColor: '#6a7985'
-  						}
-  					}
-  				},
-  				legend: {
-  					data: ['土壤温度(℃)', '土壤湿度(%RH)', '土壤PH', '土壤水势(kpa)', '电导率(us/cm)'],
-  					// 图例
-  					textStyle: {
-  						color: 'rgb(200,255,255)' //字体颜色
-  					},
-  					padding: 0,
-  				},
-  				toolbox: {
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#6a7985'
+						}
+					}
+				},
+				legend: {
+					data: ['土壤温度(℃)', '土壤湿度(%RH)', '土壤PH', '土壤水势(kpa)', '电导率(us/cm)'],
+					// 图例
+					textStyle: {
+						color: 'rgb(200,255,255)' //字体颜色
+					},
+					padding: 0,
+				},
+				toolbox: {
 
-  				},
-  				grid: {
-  					left: '3%',
-  					right: '4%',
-  					bottom: '3%',
-  					containLabel: true
-  				},
-  				xAxis: [{
-  						type: 'category',
-  						boundaryGap: false,
-  						axisLabel: {
-  							formatter: "{value}",
-  							color: "#e2e9ff",
-  						},
-  						axisLine: {
-  							lineStyle: {
-  								color: "lightgray",
-  								width: 1
-  							}
-  						},
-  						data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
-  					},
+				},
+				grid: {
+					left: '3%',
+					right: '4%',
+					bottom: '3%',
+					containLabel: true
+				},
+				xAxis: [{
+						type: 'category',
+						boundaryGap: false,
+						axisLabel: {
+							formatter: "{value}",
+							color: "#e2e9ff",
+						},
+						axisLine: {
+							lineStyle: {
+								color: "lightgray",
+								width: 1
+							}
+						},
+						data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
+					},
 
 
-  				],
-  				yAxis: [{
-  					type: 'value',
-  					splitLine: {
-  						lineStyle: {
-  							color: "rgba(255,255,255,0.12)",
-  						},
-  					},
+				],
+				yAxis: [{
+					type: 'value',
+					splitLine: {
+						lineStyle: {
+							color: "rgba(255,255,255,0.12)",
+						},
+					},
 
-  					axisLabel: {
-  						formatter: "{value}",
-  						color: "#e2e9ff",
-  					},
-  					axisLine: {
-  						show: true,
-  						lineStyle: {
-  							color: "lightgray",
-  							width: 1
-  						}
-  					},
-  					axisTick: {
-  						show: true
-  					}, //隐藏纵坐标刻度小线条
-  				}],
-  				series: [{
-  						name: '土壤温度(℃)',
-  						type: 'line',
 
-  						smooth: true,
-  						lineStyle: {
-  							width: 2
-  						},
-  						lable: {
-  							show: true,
-  							position: 'top'
-  						},
-  						showSymbol: false,
-  						areaStyle: {
-  							opacity: 0.4,
-  							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-  									offset: 0,
-  									color: 'rgb(128, 255, 165)'
-  								},
-  								{
-  									offset: 1,
-  									color: 'rgb(1, 191, 236)'
-  								}
-  							])
-  						},
-  						emphasis: {
-  							focus: 'series'
-  						},
-  						data: [200, 600, 219, 264, 500, 340, 250]
-  					},
-  					{
-  						name: '土壤湿度(%RH)',
-  						type: 'line',
+					axisLabel: {
+						show:false
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: "lightgray",
+							width: 1
+						}
+					},
+					axisTick: {
+						show: true
+					}, //隐藏纵坐标刻度小线条
+				}],
+				series: [{
+						name: '土壤温度(℃)',
+						type: 'line',
 
-  						smooth: true,
-  						lineStyle: {
-  							width: 2
-  						},
-  						lable: {
-  							show: true,
-  							position: 'top'
-  						},
-  						showSymbol: false,
-  						areaStyle: {
-  							opacity: 0.4,
-  							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-  									offset: 0,
-  									color: 'rgb(0, 221, 255)'
-  								},
-  								{
-  									offset: 1,
-  									color: 'rgb(77, 119, 255)'
-  								}
-  							])
-  						},
-  						emphasis: {
-  							focus: 'series'
-  						},
-  						data: [120, 400, 350, 500, 220, 340, 310]
-  					},
-  					{
-  						name: '土壤水势(kpa)',
-  						type: 'line',
+						smooth: true,
+						lineStyle: {
+							width: 2
+						},
+						lable: {
+							show: true,
+							position: 'top'
+						},
+						showSymbol: false,
+						areaStyle: {
+							opacity: 0.4,
+							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgb(128, 255, 165)'
+								},
+								{
+									offset: 1,
+									color: 'rgb(1, 191, 236)'
+								}
+							])
+						},
+						emphasis: {
+							focus: 'series'
+						},
+						data: [200, 600, 219, 264, 500, 340, 250]
+					},
+					{
+						name: '土壤湿度(%RH)',
+						type: 'line',
 
-  						smooth: true,
-  						lable: {
-  							show: true,
-  							position: 'top'
-  						},
-  						lineStyle: {
-  							width: 2
-  						},
-  						showSymbol: false,
-  						areaStyle: {
-  							opacity: 0.4,
-  							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-  									offset: 0,
-  									color: 'rgb(55, 162, 255)'
-  								},
-  								{
-  									offset: 1,
-  									color: 'rgb(116, 21, 219)'
-  								}
-  							])
-  						},
-  						emphasis: {
-  							focus: 'series'
-  						},
-  						data: [220, 402, 231, 134, 190, 230, 120]
-  					},
-  					{
-  						name: '土壤PH',
-  						type: 'line',
+						smooth: true,
+						lineStyle: {
+							width: 2
+						},
+						lable: {
+							show: true,
+							position: 'top'
+						},
+						showSymbol: false,
+						areaStyle: {
+							opacity: 0.4,
+							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgb(0, 221, 255)'
+								},
+								{
+									offset: 1,
+									color: 'rgb(77, 119, 255)'
+								}
+							])
+						},
+						emphasis: {
+							focus: 'series'
+						},
+						data: [120, 400, 350, 500, 220, 340, 310]
+					},
+					{
+						name: '土壤水势(kpa)',
+						type: 'line',
 
-  						smooth: true,
-  						lable: {
-  							show: true,
-  							position: 'top'
-  						},
-  						lineStyle: {
-  							width: 2
-  						},
-  						showSymbol: false,
-  						areaStyle: {
-  							opacity: 0.4,
-  							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-  									offset: 0,
-  									color: '#ff9a9a'
-  								},
-  								{
-  									offset: 1,
-  									color: '#ff9a9a'
-  								}
-  							])
-  						},
-  						emphasis: {
-  							focus: 'series'
-  						},
-  						data: [220, 302, 181, 234, 210, 290, 150]
-  					},
-  					{
-  						name: '电导率(us/cm)',
-  						type: 'line',
+						smooth: true,
+						lable: {
+							show: true,
+							position: 'top'
+						},
+						lineStyle: {
+							width: 2
+						},
+						showSymbol: false,
+						areaStyle: {
+							opacity: 0.4,
+							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgb(55, 162, 255)'
+								},
+								{
+									offset: 1,
+									color: 'rgb(116, 21, 219)'
+								}
+							])
+						},
+						emphasis: {
+							focus: 'series'
+						},
+						data: [220, 402, 231, 134, 190, 230, 120]
+					},
+					{
+						name: '土壤PH',
+						type: 'line',
+
+						smooth: true,
+						lable: {
+							show: true,
+							position: 'top'
+						},
+						lineStyle: {
+							width: 2
+						},
+						showSymbol: false,
+						areaStyle: {
+							opacity: 0.4,
+							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: '#ff9a9a'
+								},
+								{
+									offset: 1,
+									color: '#ff9a9a'
+								}
+							])
+						},
+						emphasis: {
+							focus: 'series'
+						},
+						data: [220, 302, 181, 234, 210, 290, 150]
+					},
+					{
+						name: '电导率(us/cm)',
+						type: 'line',
 
-  						lable: {
-  							show: true,
-  							position: 'top'
-  						},
-  						smooth: true,
-  						lineStyle: {
-  							width: 2
-  						},
-  						showSymbol: false,
-  						label: {
-  							show: true,
-  							position: 'top'
-  						},
-  						areaStyle: {
-  							opacity: 0.4,
-  							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-  									offset: 0,
-  									color: 'rgb(255, 191, 0)'
-  								},
-  								{
-  									offset: 1,
-  									color: 'rgb(255, 191, 0)'
-  								}
-  							])
-  						},
-  						emphasis: {
-  							focus: 'series'
-  						},
-  						data: [220, 302, 181, 234, 210, 290, 150]
-  					}
-  				]
+						lable: {
+							show: true,
+							position: 'top'
+						},
+						smooth: true,
+						lineStyle: {
+							width: 2
+						},
+						showSymbol: false,
+						label: {
+							show: true,
+							position: 'top'
+						},
+						areaStyle: {
+							opacity: 0.4,
+							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+									offset: 0,
+									color: 'rgb(255, 191, 0)'
+								},
+								{
+									offset: 1,
+									color: 'rgb(255, 191, 0)'
+								}
+							])
+						},
+						emphasis: {
+							focus: 'series'
+						},
+						data: [220, 302, 181, 234, 210, 290, 150]
+					}
+				]
 
-  			}
-  			myChart.setOption(option);
-  		}
-  	}
-  </script>
-  <style scoped>
-  	.mains {
-  		width: 100rem;
-  		height: 220rem;
-  		margin-top: 15rem;
-  	}
-  </style>
+			}
+			myChart.setOption(option);
+		}
+	}
+</script>
+<style scoped>
+	.mains {
+		width: 100rem;
+		height: 220rem;
+		margin-top: 15rem;
+	}
+</style>

src/views/test/test.vue

@@ -8,6 +8,7 @@
 
 	import SoilMoisture from "../test/components/SoilMoisture.vue"
 	import SeedingMonitor from "../test/components/SeedlingMonitor.vue"
+	import ScrolledList from "../test/components/ScrolledList.vue"
 </script>
 
 <template>
@@ -21,7 +22,9 @@
 	</jt-popup2>
 	
 	<jt-popup2 title="苗情监测" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" >
-		<SeedingMonitor></SeedingMonitor>
+		<!-- <SeedingMonitor></SeedingMonitor> -->
+		<ScrolledList></ScrolledList>
+		
 	</jt-popup2>
 	
 	<jt-popup3  title="环境变化">