projects/src/main/java/com/rtrh/projects/web/controller/statics/AnalysisScreenController.java

@@ -91,7 +91,8 @@ public class AnalysisScreenController extends BaseController {
 		model.put("ZJLY", ZJLY);
 		List<TSystable> JSXZ = tSysTableService.getByKind(SysTableKind.JSXZ);
 		model.put("JSXZ", JSXZ);
-		return new ModelAndView("/vmodules/statics/analysisScreen_two.jsp");
+//		return new ModelAndView("/vmodules/statics/analysisScreen_two.jsp");
+		return new ModelAndView("/vmodules/statics/analysisScreen_four.jsp");
 	}
 
 	/**

projects/src/main/webapp/asset/css/indexScreen.css

@@ -0,0 +1,854 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+.hami-container {
+  width: calc(100vw);
+  height: calc(100vh);
+  background-color: #000;
+  margin: 0 auto;
+}
+.header {
+  width: calc(100vw);
+  height: calc(140 / 1080 * calc(100vh));
+  box-sizing: border-box;
+  display: flex;
+}
+.header .header-bgc {
+  position: absolute;
+  z-index: 1;
+  width: calc(1920 / 1920 * calc(100vw));
+  height: calc(140 / 1080 * calc(100vh));
+}
+.header .left {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  color: #96e7ff;
+  align-items: baseline;
+}
+.header .left .left-time {
+  margin-left: calc(144 / 1920 * calc(100vw));
+  margin-top: calc(16 / 1080 * calc(100vh));
+  font-size: calc(30 / 1920 * calc(100vw));
+}
+.header .left .left-date {
+  margin-left: calc(10 / 1920 * calc(100vw));
+  margin-top: calc(28 / 1080 * calc(100vh));
+  font-size: calc(14 / 1920 * calc(100vw));
+}
+.header .center {
+  position: relative;
+  z-index: 2;
+}
+.header .center p {
+  color: white;
+  font-size: calc(44 / 1920 * calc(100vw));
+  margin-left: calc(388 / 1920 * calc(100vw));
+  margin-top: calc(30 / 1080 * calc(100vh));
+  font-family: "思源黑体 CN Bold Bold";
+}
+.header .right {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  margin-left: calc(469 / 1920 * calc(100vw));
+}
+.header .right img {
+  width: calc(24 / 1920 * calc(100vw));
+  height: calc(24 / 1920 * calc(100vw));
+  display: block;
+}
+.header .right img:first-child {
+  margin-top: calc(24 / 1080 * calc(100vh));
+}
+.header .right img:last-child {
+  margin-left: calc(23 / 1920 * calc(100vw));
+  margin-top: calc(24 / 1080 * calc(100vh));
+}
+.border-contaier img {
+  display: block;
+  position: absolute;
+}
+.border-contaier .img1 {
+  width: calc(108 / 1920 * calc(100vw));
+  height: calc(1080 / 1080 * calc(100vh));
+  top: 0;
+  left: 0;
+}
+.border-contaier .img2 {
+  top: 0;
+  width: calc(108 / 1920 * calc(100vw));
+  height: calc(1080 / 1080 * calc(100vh));
+  right: 0;
+}
+.border-contaier .img3 {
+  width: calc(1920 / 1920 * calc(100vw));
+  height: calc(50 / 1080 * calc(100vh));
+  bottom: 0;
+}
+.main {
+  height: calc(763 / 1080 * calc(100vh));
+  display: flex;
+  position: relative;
+  top: calc(-22 / 1080 * calc(100vh));
+  margin-left: calc(112 / 1920 * calc(100vw));
+}
+.main .main-left .left-img {
+  width: calc(510 / 1920 * calc(100vw));
+  height: calc(763 / 1080 * calc(100vh));
+}
+.main .main-left .left-content {
+  position: absolute;
+  z-index: 2;
+}
+.main .main-left .left-content .left-content-top {
+  width: calc(420 / 1920 * calc(100vw));
+  margin-top: calc(79 / 1080 * calc(100vh));
+  margin-left: calc(50 / 1920 * calc(100vw));
+  display: flex;
+  justify-content: center;
+}
+.main .main-left .left-content .left-content-top .left-echarts {
+  width: calc(88 / 1920 * calc(100vw));
+  height: calc(112 / 1080 * calc(100vh));
+  margin-right: calc(6 / 1920 * calc(100vw));
+  background-color: none;
+  background-color: transparent !important;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-top
+  .left-echarts:first-child:after {
+  content: "";
+  display: block;
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 50%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-top
+  .left-echarts:nth-child(2):after {
+  content: "";
+  display: block;
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  margin-left: calc(20 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 50%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-top
+  .left-echarts:nth-child(3):after {
+  content: "";
+  display: block;
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  margin-left: calc(20 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 50%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-top
+  .left-echarts:nth-child(4):after {
+  content: "";
+  display: block;
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  margin-left: calc(22 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 50%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main .main-left .left-content .left-content-center .img {
+  width: calc(420 / 1920 * calc(100vw));
+  height: calc(48 / 1080 * calc(100vh));
+  margin-top: calc(35 / 1080 * calc(100vh));
+  margin-left: calc(54 / 1920 * calc(100vw));
+}
+.main .main-left .left-content .left-content-bottom {
+  margin-top: calc(21 / 1080 * calc(100vh));
+}
+.main .main-left .left-content .left-content-bottom .left-content-bottom-data {
+  display: flex;
+  margin-bottom: calc(6 / 1080 * calc(100vh));
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  img {
+  position: absolute;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-left {
+  color: #fff;
+  width: calc(88 / 1920 * calc(100vw));
+  height: calc(88 / 1080 * calc(100vh));
+  margin-left: calc(67 / 1920 * calc(100vw));
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-left
+  p {
+  text-align: center;
+  width: calc(42 / 1920 * calc(100vw));
+  height: calc(32 / 1080 * calc(100vh));
+  font-size: calc(20 / 1920 * calc(100vw));
+  margin-top: calc(28 / 1080 * calc(100vh));
+  margin-left: calc(23 / 1080 * calc(100vh));
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 40%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-left
+  img {
+  width: calc(88 / 1920 * calc(100vw));
+  height: calc(88 / 1080 * calc(100vh));
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-img {
+  position: absolute;
+  width: calc(132 / 1920 * calc(100vw));
+  height: calc(76 / 1080 * calc(100vh));
+  top: calc(7 / 1080 * calc(100vh));
+  z-index: 1;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-container {
+  width: calc(132 / 1920 * calc(100vw));
+  height: calc(76 / 1080 * calc(100vh));
+  position: relative;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  p {
+  margin: 0;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-content {
+  width: calc(66 / 1920 * calc(100vw));
+  height: calc(50 / 1080 * calc(100vh));
+  margin-left: calc(40 / 1920 * calc(100vw));
+  margin-top: calc(15 / 1080 * calc(100vh));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data {
+  width: auto;
+  font-size: calc(24 / 1920 * calc(100vw));
+  color: white;
+  font-weight: 600;
+  font-family: Arial, Arial;
+}
+.main
+  .main-left
+  .left-content
+  .left-content-bottom
+  .left-content-bottom-data
+  .data-des {
+  width: auto;
+  font-size: calc(14 / 1920 * calc(100vw));
+  color: rgba(255, 255, 255, 0.5);
+  font-family: PingFangSC, PingFang SC;
+  white-space: nowrap;
+}
+.main .main-center {
+  margin-left: calc(18 / 1920 * calc(100vw));
+  margin-right: calc(16 / 1920 * calc(100vw));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.main .main-center .main-center-top {
+  width: calc(548 / 1920 * calc(100vw));
+  height: calc(375 / 1080 * calc(100vh));
+  position: relative;
+}
+.main .main-center .main-center-top p {
+  margin: 0;
+}
+.main .main-center .main-center-top .main-total-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+.main .main-center .main-center-top .main-total-data .data {
+  color: white;
+  font-size: calc(44 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  margin-top: calc(69 / 1080 * calc(100vh));
+  background-image: linear-gradient(to bottom, #fff 40%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main .main-center .main-center-top .main-total-data .data-des {
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+}
+.main .main-center .main-center-top .main-money-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+.main .main-center .main-center-top .main-money-data .data {
+  color: white;
+  font-size: calc(44 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  margin-top: calc(6 / 1080 * calc(100vh));
+  background-image: linear-gradient(to bottom, #fff 40%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main .main-center .main-center-top .main-money-data .data-des {
+  color: white;
+  font-size: calc(16 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+}
+.main .main-center .main-center-top .center-img {
+  width: calc(548 / 1920 * calc(100vw));
+  height: calc(432 / 1080 * calc(100vh));
+  position: absolute;
+  top: calc(-30 / 1080 * calc(100vh));
+}
+.main .main-center .main-center-bottom {
+  display: flex;
+  position: relative;
+}
+.main .main-center .main-detail-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.main .main-center .main-detail-container .main-detail-top {
+  position: relative;
+  width: calc(148 / 1920 * calc(100vw));
+  height: calc(36 / 1080 * calc(100vh));
+  text-align: center;
+  line-height: calc(36 / 1080 * calc(100vh));
+}
+.main .main-center .main-detail-container .main-detail-top img {
+  width: calc(148 / 1920 * calc(100vw));
+  height: calc(36 / 1080 * calc(100vh));
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.main .main-center .main-detail-container .main-detail-top p {
+  margin: 0;
+  position: relative;
+  z-index: 2;
+  color: #fff;
+  font-size: calc(20 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+}
+.main .main-center .main-detail-container .main-detail-bottom {
+  position: relative;
+  color: #fff;
+  width: calc(160 / 1920 * calc(100vw));
+  height: calc(220 / 1080 * calc(100vh));
+  vertical-align: bottom;
+}
+.main .main-center .main-detail-container .main-detail-bottom p {
+  margin: 0;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-top {
+  text-align: center;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-top
+  .data {
+  font-size: calc(20 / 1920 * calc(100vw));
+  margin-top: calc(7 / 1080 * calc(100vh));
+  position: relative;
+  z-index: 2;
+  background-image: linear-gradient(to bottom, #d0fffe 40%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-top
+  .data-des {
+  font-size: calc(12 / 1920 * calc(100vw));
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: calc(10 / 1080 * calc(100vh));
+  position: relative;
+  z-index: 2;
+}
+.main .main-center .main-detail-container .main-detail-bottom .line {
+  width: calc(136 / 1920 * calc(100vw));
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    rgba(0, 96, 242, 0),
+    rgba(40, 129, 250, 0.4),
+    rgba(135, 215, 255, 0.74),
+    rgba(172, 206, 253, 0.4),
+    rgba(255, 255, 255, 0)
+  );
+  margin-bottom: calc(5 / 1920 * calc(100vh));
+  margin-top: calc(8 / 1920 * calc(100vh));
+  margin-left: calc(10 / 1920 * calc(100vw));
+}
+.main .main-center .main-detail-container .main-detail-bottom .bgc-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(160 / 1920 * calc(100vw));
+  height: calc(235 / 1080 * calc(100vh));
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom {
+  width: calc(145 / 1920 * calc(100vw));
+  height: calc(37 / 1080 * calc(100vh));
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .left {
+  position: relative;
+  z-index: 2;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .left
+  span:first-child {
+  background-image: linear-gradient(to bottom, #fff 40%, #fe8e8e);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: calc(20 / 1920 * calc(100vw));
+  display: inline-block;
+  margin-left: calc(29 / 1920 * calc(100vw));
+  margin-top: calc(5 / 1080 * calc(100vh));
+  width: calc(36 / 1920 * calc(100vw));
+  text-align: right;
+  font-weight: bold;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .left
+  span:last-child {
+  font-size: calc(12 / 1920 * calc(100vw));
+  vertical-align: middle;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .right {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .right
+  img {
+  width: calc(24 / 1920 * calc(100vw));
+  height: calc(24 / 1080 * calc(100vh));
+  margin-left: 0;
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .right
+  span {
+  font-size: calc(12 / 1920 * calc(100vw));
+}
+.main
+  .main-center
+  .main-detail-container
+  .main-detail-bottom
+  .main-detail-bottom-bottom
+  .bottom-img {
+  position: absolute;
+  top: 0;
+  width: calc(136 / 1920 * calc(100vw));
+  height: calc(37 / 1080 * calc(100vh));
+  margin-left: calc(11 / 1920 * calc(100vw));
+}
+.main .main-center .flooter-top {
+  position: relative;
+  width: calc(548 / 1920 * calc(100vw));
+  height: calc(60 / 1080 * calc(100vh));
+  text-align: center;
+  margin-top: calc(23 / 1080 * calc(100vh));
+}
+.main .main-center .flooter-top p {
+  margin: 0;
+  color: #fff;
+  position: relative;
+  z-index: 2;
+  font-family: PingFangSC, PingFang SC;
+  background-image: linear-gradient(to bottom, #fff 50%, #05f5eb);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: calc(24 / 1920 * calc(100vw));
+  font-weight: bold;
+  top: calc(5 / 1080 * calc(100vh));
+}
+.main .main-center .flooter-top .main-bottom-img {
+  width: calc(548 / 1920 * calc(100vw));
+  height: calc(60 / 1080 * calc(100vh));
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.main .main-right .main-right-top {
+  width: calc(510 / 1920 * calc(100vw));
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  margin-top: calc(80 / 1080 * calc(100vh));
+}
+.main .main-right .main-right-top .bie-echarts {
+  width: calc(330 / 1920 * calc(100vw));
+  height: calc(188 / 1080 * calc(100vh));
+  position: relative;
+  z-index: 2;
+}
+.main .main-right .main-right-top img {
+  width: calc(188 / 1080 * calc(100vh));
+  height: calc(188 / 1080 * calc(100vh));
+  position: absolute;
+}
+.main .main-right .main-right-center img {
+  width: calc(420 / 1920 * calc(100vw));
+  height: calc(40 / 1080 * calc(100vh));
+  margin-left: calc(46 / 1920 * calc(100vw));
+}
+.main .main-right .main-right-bottom .right-content-bottom {
+  margin-top: calc(21 / 1080 * calc(100vh));
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data {
+  display: flex;
+  margin-bottom: calc(6 / 1080 * calc(100vh));
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-left {
+  color: #fff;
+  width: calc(168 / 1920 * calc(100vw));
+  height: calc(60 / 1080 * calc(100vh));
+  margin-left: calc(46 / 1920 * calc(100vw));
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-left
+  p {
+  text-align: center;
+  font-size: calc(20 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  margin-top: calc(7 / 1080 * calc(100vh));
+  color: #ffffff;
+  font-weight: bold;
+  position: relative;
+  z-index: 2;
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-left
+  img {
+  position: absolute;
+  width: calc(168 / 1920 * calc(100vw));
+  height: calc(60 / 1080 * calc(100vh));
+  z-index: 1;
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-container {
+  position: relative;
+  margin-left: calc(26 / 1920 * calc(100vw));
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-container:last-child {
+  margin-left: calc(42 / 1920 * calc(100vw));
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  p {
+  margin: 0;
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-content {
+  width: calc(66 / 1920 * calc(100vw));
+  height: calc(50 / 1080 * calc(100vh));
+  margin-top: calc(7 / 1080 * calc(100vh));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data {
+  width: auto;
+  font-size: calc(24 / 1920 * calc(100vw));
+  color: white;
+  font-weight: 600;
+  font-family: Arial, Arial;
+}
+.main
+  .main-right
+  .main-right-bottom
+  .right-content-bottom
+  .right-content-bottom-data
+  .data-des {
+  width: auto;
+  font-size: calc(14 / 1920 * calc(100vw));
+  color: rgba(255, 255, 255, 0.5);
+  font-family: PingFangSC, PingFang SC;
+  white-space: nowrap;
+}
+.main .main-right .right-img {
+  width: calc(510 / 1920 * calc(100vw));
+  height: calc(763 / 1080 * calc(100vh));
+  position: absolute;
+  top: 0;
+}
+.flooter {
+  display: flex;
+  justify-content: center;
+}
+.flooter .flooter-bottom {
+  width: calc(784 / 1920 * calc(100vw));
+  height: calc(168 / 1080 * calc(100vh));
+  margin-left: calc(0 / 1920 * calc(100vw));
+  display: flex;
+  margin-top: calc(-55 / 1080 * calc(100vh));
+  margin-left: calc(13 / 1920 * calc(100vw));
+}
+.flooter .flooter-bottom .flooter-bottom-item {
+  width: calc(170 / 1920 * calc(100vw));
+  height: calc(135 / 1080 * calc(100vh));
+  text-align: center;
+}
+.flooter .flooter-bottom .flooter-bottom-item .title {
+  color: white;
+  font-size: calc(20 / 1920 * calc(100vw));
+  font-family: PingFangSC, PingFang SC;
+  margin-bottom: calc(18 / 1080 * calc(100vh));
+  margin-left: calc(-10 / 1920 * calc(100vw));
+}
+.flooter .flooter-bottom .flooter-bottom-item .main-detail-bottom-bottom {
+  width: calc(145 / 1920 * calc(100vw));
+  height: calc(37 / 1080 * calc(100vh));
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+.flooter .flooter-bottom .flooter-bottom-item .main-detail-bottom-bottom .left {
+  position: relative;
+  z-index: 2;
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .left
+  span:first-child {
+  background-image: linear-gradient(to bottom, #fff 40%, #fe8e8e);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: calc(20 / 1920 * calc(100vw));
+  display: inline-block;
+  margin-left: calc(29 / 1920 * calc(100vw));
+  margin-top: calc(5 / 1080 * calc(100vh));
+  width: calc(36 / 1920 * calc(100vw));
+  text-align: right;
+  font-weight: bold;
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .left
+  span:last-child {
+  font-size: calc(12 / 1920 * calc(100vw));
+  vertical-align: middle;
+  color: white;
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .right {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  color: white;
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .right
+  img {
+  width: calc(24 / 1920 * calc(100vw));
+  height: calc(24 / 1080 * calc(100vh));
+  margin-left: 0;
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .right
+  span {
+  font-size: calc(12 / 1920 * calc(100vw));
+}
+.flooter
+  .flooter-bottom
+  .flooter-bottom-item
+  .main-detail-bottom-bottom
+  .bottom-img {
+  position: absolute;
+  top: 0;
+  width: calc(136 / 1920 * calc(100vw));
+  height: calc(37 / 1080 * calc(100vh));
+  margin-left: calc(11 / 1920 * calc(100vw));
+}
+.flooter .flooter-bottom .flooter-bottom-img {
+  width: calc(36 / 1920 * calc(100vw));
+  text-align: center;
+}
+.flooter .flooter-bottom .flooter-bottom-img img {
+  position: relative;
+  top: calc(3 / 1080 * calc(100vh));
+} /*# sourceMappingURL=./index.css.map */

projects/src/main/webapp/vmodules/statics/analysisScreen_four.jsp

@@ -0,0 +1,933 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset='UTF-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <title>Document</title>
+    <link rel="stylesheet" href="${WebSite.asset}/css/indexScreen.css">
+    <!-- 引入外部JavaScript文件 -->
+<%--    <script src="${WebSite.asset}/lib/echarts/min/echarts.min.js?version=202407171311"></script>--%>
+<%--    <script src="${WebSite.asset}/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>--%>
+    <script src="${WebSite.asset}/js/index.js?version=${version}"></script>
+    <!-- 引入 Axios 库 -->
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<%--    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"--%>
+<%--            integrity="sha512-EmNxF3E6bM0Xg1zvmkeYD3HDBeGxtsG92IxFt1myNZhXdCav9MzvuH/zNMBU1DmIPN6njrhX1VTbqdJxQ2wHDg=="--%>
+<%--            crossorigin="anonymous" referrerpolicy="no-referrer"></script>--%>
+    <script type="module" crossorigin src="${WebSite.asset}/js/gxj_screen-dd47718d.js"></script>
+    <jsp:include page="../common/common-meta-include.jsp"></jsp:include>
+    <jsp:include page="../common/common-js-include.jsp"></jsp:include>
+    <jsp:include page="../common/common-css-include.jsp"></jsp:include>
+    <style>
+        #echarts-1::after {
+            content: "备案核准率";
+        }
+
+        #echarts-2::after {
+            content: "开工率";
+        }
+
+        #echarts-3::after {
+            content: "投产率";
+        }
+
+        #echarts-4::after {
+            content: "入规率";
+        }
+    </style>
+</head>
+
+<body>
+<!-- <div class="hami-header" style="height: 50px; background-color: aqua;"></div> -->
+<div style="display: flex;">
+
+    <!-- <div class="hami-meun" style="height: calc(100vh -50px); width: 200px; background-color: aqua;"></div> -->
+    <div id="fullscreenElement" class="hami-container">
+        <header class="header">
+            <div class="left">
+                <p class="left-time" id="left-time">11:15</p>
+                <p class="left-date" id="left-date">2021-09-01</p>
+            </div>
+            <div class="center">
+                <p>哈密市工业项目智慧平台</p>
+            </div>
+            <div class="right">
+                <img src="${WebSite.asset}/images/static/search.png" alt="">
+                <img id="fullscreenButton" src="${WebSite.asset}/images/static/header-1.png" alt="">
+            </div>
+            <img class="header-bgc" src="${WebSite.asset}/images/static/header.png" alt="">
+        </header>
+        <div class="border-contaier">
+            <img class="img1" src="${WebSite.asset}/images/static/left-img.png" alt="">
+            <img class="img2" src="${WebSite.asset}/images/static/right-img4.png" alt="">
+            <img class="img3" src="${WebSite.asset}/images/static/bottom-img1.png" alt="">
+        </div>
+        <main class="main">
+
+            <div class="main-left">
+                <div class="left-content">
+                    <div class="left-content-top">
+                        <div class="left-echarts" id="echarts-1"></div>
+                        <div class="left-echarts" id="echarts-2"></div>
+                        <div class="left-echarts" id="echarts-3"></div>
+                        <div class="left-echarts" id="echarts-4"></div>
+                    </div>
+                    <!-- <div class="left-echarts-des-container">
+                        <div class="left-echarts-des">备案核准率</div>
+                        <div class="left-echarts-des">开工率</div>
+                        <div class="left-echarts-des">投产率</div>
+                        <div class="left-echarts-des">入规率</div>
+                    </div> -->
+                    <div class="left-content-center">
+                        <img src="${WebSite.asset}/images/static/left1.png" class="img" alt="">
+                    </div>
+                    <div class="left-content-bottom">
+                        <div class="left-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/ico.png" alt="">
+                                <p>储备</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data1">120</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data2">637.28</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                        </div>
+                        <div class="left-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/ico.png" alt="">
+                                <p>新建</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data3">67</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data4">358.2</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                        </div>
+                        <div class="left-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/ico.png" alt="">
+                                <p>在建</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data5">22</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="left-data6">78.9</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                        </div>
+                        <div class="left-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/ico.png" alt="">
+                                <p>投产</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data">9</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data">37.28</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                                <img class="data-img" src="${WebSite.asset}/images/static/left-img2.png" alt="">
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <img class="left-img" src="${WebSite.asset}/images/static/left-img3.png" alt="">
+
+            </div>
+            <div class="main-center">
+                <div class="main-center-top">
+                    <div class="main-total-data">
+                        <p class="data" id="main-top-data1">228</p>
+                        <p class="data-des">项目数(个)</p>
+                    </div>
+                    <div class="main-money-data">
+                        <p class="data" id="main-data2">2282.34</p>
+                        <p class="data-des">总投资金额(亿元)</p>
+                    </div>
+                    <img class="center-img" src="${WebSite.asset}/images/static/main.png" alt="">
+                </div>
+
+                <div class="main-center-bottom">
+                    <div class="main-detail-container">
+                        <div class="main-detail-top">
+                            <p>伊州区</p>
+                            <img src="${WebSite.asset}/images/static/main-img1.png" alt="">
+                        </div>
+                        <div class="main-detail-bottom">
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data1">121</p>
+                                <p class="data-des">项目数(个)</p>
+                            </div>
+                            <div class="line"></div>
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data2">7238</p>
+                                <p class="data-des">总投资(亿元)</p>
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>63</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>红灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>63</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>黄灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                            </div>
+                            <img class="bgc-img" src="${WebSite.asset}/images/static/main-img2.png" alt="">
+                        </div>
+                    </div>
+                    <div class="main-detail-container">
+                        <div class="main-detail-top">
+                            <p>巴里坤县</p>
+                            <img src="${WebSite.asset}/images/static/main-img1.png" alt="">
+                        </div>
+                        <div class="main-detail-bottom">
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data3">87</p>
+                                <p class="data-des">项目数(个)</p>
+                            </div>
+                            <div class="line"></div>
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data4">7238</p>
+                                <p class="data-des">总投资(亿元)</p>
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>123</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>红灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>65</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>黄灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                            </div>
+                            <img class="bgc-img" src="${WebSite.asset}/images/static/main-img2.png" alt="">
+                        </div>
+                    </div>
+                    <div class="main-detail-container">
+                        <div class="main-detail-top">
+                            <p>伊吾县</p>
+                            <img src="${WebSite.asset}/images/static/main-img1.png" alt="">
+                        </div>
+                        <div class="main-detail-bottom">
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data5">133</p>
+                                <p class="data-des">项目数(个)</p>
+                            </div>
+                            <div class="line"></div>
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data6">345</p>
+                                <p class="data-des">总投资(亿元)</p>
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>33</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>红灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>0</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>黄灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                            </div>
+                            <img class="bgc-img" src="${WebSite.asset}/images/static/main-img2.png" alt="">
+                        </div>
+                    </div>
+                    <div class="main-detail-container">
+                        <div class="main-detail-top">
+                            <p>高新区</p>
+                            <img src="${WebSite.asset}/images/static/main-img1.png" alt="">
+                        </div>
+                        <div class="main-detail-bottom">
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data7">76</p>
+                                <p class="data-des">项目数(个)</p>
+                            </div>
+                            <div class="line"></div>
+                            <div class="main-detail-bottom-top">
+                                <p class="data" id="center-center-data8">727</p>
+                                <p class="data-des">总投资(亿元)</p>
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>3</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>红灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                            </div>
+                            <div class="main-detail-bottom-bottom">
+                                <div class="left">
+                                    <span>12</span>
+                                    <span>个</span>
+                                </div>
+                                <div class="right">
+                                    <span>黄灯</span>
+                                    <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                                </div>
+                                <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                            </div>
+                            <img class="bgc-img" src="${WebSite.asset}/images/static/main-img2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="flooter-top">
+                    <p>红黄灯预警</p>
+                    <img src="${WebSite.asset}/images/static/main-img3.png" class="main-bottom-img" alt="">
+                </div>
+            </div>
+            <div class="main-right">
+                <div class="main-right-top">
+                    <div class="bie-echarts" id="bie-echarts"></div>
+                    <img src="${WebSite.asset}/images/static/right-img1.png" alt="">
+                </div>
+                <div class="main-right-center">
+                    <img src="${WebSite.asset}/images/static/right-img2.png" alt="">
+                </div>
+                <div class="main-right-bottom">
+                    <div class="right-content-bottom">
+                        <div class="right-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/1.png" alt="">
+                                <p>100亿元以上</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data1">49</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data2">1827.23</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right-content-bottom">
+                        <div class="right-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/1.png" alt="">
+                                <p>50-100亿元</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data3">20</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data4">87.20</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right-content-bottom">
+                        <div class="right-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/1.png" alt="">
+                                <p>10-50亿元</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data5">5</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data6">24.03</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="right-content-bottom">
+                        <div class="right-content-bottom-data">
+                            <div class="data-left">
+                                <img src="${WebSite.asset}/images/static/1.png" alt="">
+                                <p>10亿元以下</p>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data7">13</p>
+                                    <p class="data-des">项目数(个)</p>
+                                </div>
+                            </div>
+                            <div class="data-container">
+                                <div class="data-content">
+                                    <p class="data" id="right-data8">8.29</p>
+                                    <p class="data-des">投资金额(亿元)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <img class="right-img" src="${WebSite.asset}/images/static/right-img.png" alt="">
+            </div>
+
+        </main>
+        <flooter class="flooter">
+            <div class="flooter-bottom">
+                <div class="flooter-bottom-item">
+                    <div class="title">储备项目库</div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>123</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>红灯</span>
+                            <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>65</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>黄灯</span>
+                            <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>1</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>绿灯</span>
+                            <img src="${WebSite.asset}/images/static/green-img.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/green.png" alt="">
+                    </div>
+                </div>
+                <div class="flooter-bottom-img">
+                    <img src="${WebSite.asset}/images/static/flooter.png" alt="">
+                </div>
+                <div class="flooter-bottom-item">
+                    <div class="title">新建项目库</div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>123</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>红灯</span>
+                            <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>65</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>黄灯</span>
+                            <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>1</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>绿灯</span>
+                            <img src="${WebSite.asset}/images/static/green-img.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/green.png" alt="">
+                    </div>
+                </div>
+                <div class="flooter-bottom-img">
+                    <img src="${WebSite.asset}/images/static/flooter.png" alt="">
+                </div>
+                <div class="flooter-bottom-item">
+                    <div class="title">在建项目库</div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>123</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>红灯</span>
+                            <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>65</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>黄灯</span>
+                            <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>1</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>绿灯</span>
+                            <img src="${WebSite.asset}/images/static/green-img.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/green.png" alt="">
+                    </div>
+                </div>
+                <div class="flooter-bottom-img">
+                    <img src="${WebSite.asset}/images/static/flooter.png" alt="">
+                </div>
+                <div class="flooter-bottom-item">
+                    <div class="title">投产项目库</div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>123</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>红灯</span>
+                            <img src="${WebSite.asset}/images/static/main-red.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-red-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>65</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>黄灯</span>
+                            <img src="${WebSite.asset}/images/static/main-yellow.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/main-yellow-bgc.png" alt="">
+                    </div>
+                    <div class="main-detail-bottom-bottom">
+                        <div class="left">
+                            <span>1</span>
+                            <span>个</span>
+                        </div>
+                        <div class="right">
+                            <span>绿灯</span>
+                            <img src="${WebSite.asset}/images/static/green-img.png" alt="">
+                        </div>
+                        <img class="bottom-img" src="${WebSite.asset}/images/static/green.png" alt="">
+                    </div>
+                </div>
+            </div>
+            </footer>
+    </div>
+
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script>
+<script>
+    function loadDpGxjGmData() {
+        App.postJson('/api/statics/dp_gxj_gm', {
+            varlx: '0',
+            varyear: '2024',
+            varqx: '',
+            var4k: '',
+            vargm: '',
+            varhy: '',
+            varlogin: 'admin'
+        }, function(res) {
+            console.log('loadDpGxjAddreData', res);
+            // 绑定数据到页面
+            if (res.success) {
+                gmData = res.data;
+                document.querySelector('#right-data1').textContent =  gmData[0].num
+                document.querySelector('#right-data2').textContent = gmData[0].amt
+
+                document.querySelector('#right-data3').textContent =  gmData[1].num
+                document.querySelector('#right-data4').textContent = gmData[1].amt
+
+                document.querySelector('#right-data5').textContent =   gmData[2].num
+                document.querySelector('#right-data6').textContent = gmData[2].amt
+
+                document.querySelector('#right-data7').textContent =  gmData[3].num
+                document.querySelector('#right-data8').textContent =  gmData[3].amt
+
+
+            }
+        });
+    }
+    // 示例：获取 dp_gxj_addre 数据
+    function loadDpGxjAddreData() {
+        App.postJson('/api/statics/dp_gxj_addre', {
+            varlx: '0',
+            varyear: '2024',
+            varqx: '',
+            var4k: '',
+            vargm: '',
+            varhy: '',
+            varlogin: 'admin'
+        }, function(res) {
+            // 绑定数据到页面
+            if (res.success) {
+                addreData = res.data;
+                document.querySelector('#center-center-data1').textContent = addreData[1].num
+                document.querySelector('#center-center-data2').textContent =  addreData[1].amt
+
+                document.querySelector('#center-center-data3').textContent = addreData[2].num
+                document.querySelector('#center-center-data4').textContent = addreData[2].amt
+
+                document.querySelector('#center-center-data5').textContent =  addreData[3].num
+                document.querySelector('#center-center-data6').textContent =  addreData[3].amt
+
+                document.querySelector('#center-center-data7').textContent =  addreData[4].num
+                document.querySelector('#center-center-data8').textContent =  addreData[4].amt
+
+                // 更新中间总投资数据
+                const totalAmount = (addreData[1].amt)+(addreData[2].amt)+(addreData[3].amt)+(addreData[4].amt);
+                document.querySelector('#main-data2').textContent =  totalAmount.toFixed(2)
+            }
+        });
+    }
+
+    // 示例：获取 dp_gxj_qt 数据
+    function loadDpGxjQtData() {
+        App.postJson("/api/statics/dp_gxj_qt", {
+            varlx: '0',
+            varyear: '2024',
+            varqx: '',
+            var4k: '',
+            vargm: '',
+            varhy: '',
+            varlogin: 'admin'
+        }, function (res) {
+            if (res.success) {
+                qtData = res.data[0];
+                console.log(qtData)
+                document.querySelector('#main-top-data1').textContent = qtData.num_total;
+                document.querySelector('#left-data1').textContent = qtData.num_cb;
+                document.querySelector('#left-data2').textContent = qtData.amt_cb;
+
+                document.querySelector('#left-data3').textContent = qtData.num_xj;
+                document.querySelector('#left-data4').textContent = qtData.amt_xj;
+
+                document.querySelector('#left-data5').textContent = qtData.num_zj;
+                document.querySelector('#left-data6').textContent = qtData.amt_zj;
+
+
+            } else {
+                console.error("Failed to load qtData:", res);
+            }
+        });
+    }
+
+    onload = function () {
+        loadDpGxjGmData()
+        loadDpGxjAddreData()
+        loadDpGxjQtData()
+        var currentDate = new Date();
+        var time = currentDate.getHours().toString().padStart(2, "0") + ":" + currentDate.getMinutes().toString().padStart(2, "0");
+        var date = currentDate.getFullYear() + "." + (currentDate.getMonth() + 1).toString().padStart(2, "0") + "." + currentDate.getDate().toString().padStart(2, "0");
+        document.querySelector('#left-time').innerText = time;
+        document.querySelector('#left-date').innerText = date;
+
+        // 点击把整体全屏
+        // 获取按钮元素
+        const fullscreenButton = document.getElementById('fullscreenButton');
+        const fullscreenElement = document.getElementById('fullscreenElement');
+
+        console.log(fullscreenButton, fullscreenElement)
+        // 处理按钮点击事件，切换全屏与取消全屏
+        fullscreenButton.addEventListener('click', () => {
+            if (!document.fullscreenElement) {
+                // 当前不是全屏，进入全屏
+                if (fullscreenElement.requestFullscreen) {
+                    fullscreenElement.requestFullscreen(); // 标准全屏
+                } else if (fullscreenElement.mozRequestFullScreen) {
+                    fullscreenElement.mozRequestFullScreen(); // Firefox
+                } else if (fullscreenElement.webkitRequestFullscreen) {
+                    fullscreenElement.webkitRequestFullscreen(); // Chrome, Safari, Opera
+                } else if (fullscreenElement.msRequestFullscreen) {
+                    fullscreenElement.msRequestFullscreen(); // IE/Edge
+                }
+                console.log('进入全屏');
+            } else {
+                // 当前已经是全屏，退出全屏
+                if (document.exitFullscreen) {
+                    document.exitFullscreen(); // 标准退出全屏
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen(); // Firefox
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen(); // Chrome, Safari, Opera
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen(); // IE/Edge
+                }
+                console.log('退出全屏');
+            }
+        });
+
+        var myChart1 = echarts.init(document.getElementById('echarts-1'));
+        var myChart2 = echarts.init(document.getElementById('echarts-2'));
+        var myChart3 = echarts.init(document.getElementById('echarts-3'));
+        var myChart4 = echarts.init(document.getElementById('echarts-4'));
+        var myChart5 = echarts.init(document.getElementById('bie-echarts'));
+        // 水滴图的配置项
+        var liquidFillOption = {
+            backgroundColor: 'transparent',
+            grid: {
+                top: 0,  // 距离顶部
+                left: 0, // 距离左侧
+                right: 0, // 距离右侧
+                bottom: 0, // 距离底部
+            },
+            series: [{
+                type: 'liquidFill',
+                data: [0.5], // 水滴的填充进度，0到1之间
+                radius: '94%',
+                color: ['#A50107'], // 蓝色
+                outline: {
+                    borderDistance: 2, // 外边框距离
+                    itemStyle: {
+                        borderWidth: 4, // 外边框宽度
+                        borderColor: '#A50107' // 外边框颜色
+                    }
+                },
+                backgroundStyle: {
+                    color: '#0c52bd',
+                    shadowColor: 'none',
+                    shadowBlur: 0
+                },
+                label: {
+                    show: true,
+                    fontSize: 18, // 设置字体大小
+                    fontWeight: 'normal', // 设置字体粗细
+                    color: '#fff',// 设置字体颜色
+
+                },
+                graphic: {
+                    elements: [
+                        {
+                            type: 'rect', // 创建矩形底座
+                            shape: {
+                                x: -100, // 设置矩形的水平位置
+                                y: 120,  // 设置矩形的垂直位置
+                                width: 200, // 设置矩形宽度
+                                height: 20 // 设置矩形高度
+                            },
+                            style: {
+                                fill: '#333', // 底座颜色
+                                shadowBlur: 10, // 阴影模糊半径
+                                shadowColor: 'rgba(0, 0, 0, 1)', // 阴影颜色
+                                shadowOffsetX: 0, // 阴影水平偏移
+                                shadowOffsetY: 5, // 阴影垂直偏移
+                            }
+                        }
+                    ]
+                }
+            }]
+        };
+
+        var liquidFillOption2 = JSON.parse(JSON.stringify(liquidFillOption));
+        liquidFillOption2.series[0].color = ['#BA3C00']; // 绿色
+        liquidFillOption2.series[0].outline.itemStyle.borderColor = '#BA3C00'; // 边框颜色也为绿色
+
+        var liquidFillOption3 = JSON.parse(JSON.stringify(liquidFillOption));
+        liquidFillOption3.series[0].color = ['#00939A']; // 红色
+        liquidFillOption3.series[0].outline.itemStyle.borderColor = '#00939A'; // 边框颜色也为红色
+
+        var liquidFillOption4 = JSON.parse(JSON.stringify(liquidFillOption));
+        liquidFillOption4.series[0].color = ['#7100C3']; // 黄色
+        liquidFillOption4.series[0].outline.itemStyle.borderColor = '#7100C3'; // 边框颜色也为黄色
+
+        // 配置图表
+        myChart1.setOption(liquidFillOption);
+        myChart2.setOption(liquidFillOption2);
+        myChart3.setOption(liquidFillOption3);
+        myChart4.setOption(liquidFillOption4);
+
+
+        var option = {
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c} ({d}%)'
+            },
+
+            series: [
+                {
+
+                    name: '饼图示例',
+                    type: 'pie',
+                    radius: ['50%', '80%'],
+                    avoidLabelOverlap: false,
+                    labelLine: {
+                        length: 5,
+                        length2: 30,
+                        // maxSurfaceAngle: 80
+                    },
+                    color: ['#FEE23D', '#249766', '#FF2123', '#C13DFF',],
+
+                    label: {
+                        // alignTo: 'edge',
+                        position: 'outside',
+                        // margin: 2,
+                        formatter: '{data|{c}}{unit| %}\n{name|{b}}',
+                        minMargin: 0,
+                        edgeDistance: 0,
+                        lineHeight: 15,
+
+                        rich: {
+                            data: {
+                                fontSize: 18,
+                                color: '#fff'
+                            },
+                            unit: {
+                                fontSize: 12,
+                                color: '#fff'
+                            },
+                            name: {
+                                fontSize: 12,
+                                color: '#fff'
+                            }
+                        }
+                    },
+
+                    itemStyle: {
+                        // borderWidth: 5,
+                        // borderColor: '#2971e0',
+                    },
+                    data: [
+                        { value: 25, name: '采矿业' },
+                        { value: 25, name: '电力产业' },
+                        { value: 35, name: '数字产业 ' },
+                        { value: 15, name: '制造业' },
+                    ],
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 200,
+                            shadowOffsetX: 0,
+                            shadowOffsetY: 0,
+                            shadowColor: '#296edf'
+                        }
+                    },
+
+                }
+                , {
+                    name: '外边框',
+                    type: 'pie',
+                    clockWise: false,
+                    radius: ['83%', '83%'],//边框大小
+                    center: ['50%', '50%'],//边框位置
+                    // radius: ['80%', '85%'],
+                    data: [{
+                        value: 10,
+                        itemStyle: {
+                            normal: {
+                                borderWidth: 4,//设置边框粗细
+                                borderColor: '#2971e0'//边框颜色
+                            }
+                        }
+                    }]
+                },
+            ],
+
+        };
+
+        myChart5.setOption(option);
+        // 监听窗口大小变化，动态调整图表大小
+        window.addEventListener('resize', function() {
+            myChart1.resize();
+            myChart2.resize();
+            myChart3.resize();
+            myChart4.resize();
+            myChart5.resize();
+        });
+
+
+
+    }
+</script>
+</body>
+
+</html>