diff --git a/datav/css/visual.css b/datav/css/visual.css
index 6832004..23b677c 100644
--- a/datav/css/visual.css
+++ b/datav/css/visual.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
a,p,h1,h2,h3,h4,h5,h6,body,span,label,div{padding:0;margin:0;font-family:'瀵邦喛钂嬮梿鍛寸拨';}
div{font-family:'瀵邦喛钂嬮梿鍛寸拨';}
ul{padding:0;margin:0;}
@@ -50,20 +51,63 @@ html, body, form{overflow-y:auto;height:100%;}
.head_top{position:relative;text-align:center;}
.head_top img{display:block;width:80%;margin:0 auto;}
-.head_top .head_logo{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:#55bfff;font-size:35px;font-weight:600;z-index:2;}
+.head_top .head_logo{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:#55bfff;font-size:35px;font-weight:600;z-index:10;text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);}
.head_top .head_decor{margin-top:1px;}
+.head_top .decor_side {
+ position: absolute;
+ top: 15px;
+ width: 45px !important;
+ height: auto !important;
+ z-index: 11;
+ opacity: 0.9;
+ display: block; /* ensure it is visible */
+ margin: 0; /* reset margin from generic rule */
+}
+.head_top .decor_left {
+ left: 50%;
+ margin-left: -170px !important;
+}
+.head_top .decor_right {
+ left: 50%;
+ margin-left: 125px !important;
+ transform: scaleX(-1);
+}
+.head_top .decor_bar {
+ position: absolute;
+ top: 40px;
+ width: 25% !important;
+ height: auto !important;
+ z-index: 10;
+ display: block;
+}
+.head_top .decor_left_outer {
+ left: 50%;
+ margin-left: -850px !important;
+}
+.head_top .decor_right_outer {
+ left: 50%;
+ margin-left: 400px !important;
+}
.head_top p{width:100%;text-align:center;color:#55bfff;position:absolute;bottom: -18px;left: -10px;}
.head_top p span{font-family:'yjsz';font-size:20px;}
-.visual{height:calc(100% - 33px);padding-top:10px;}
+.visual{height:calc(100% - 33px);padding-top:5px;}
-.visual_box{height:33.3%;}
+.visual_box{height:40%;}
+.visual_left .visual_box{height:18%;margin-bottom: 2%;}
+.visual_right .visual_box{height:18%;margin-bottom: 2%;}
+.visual_left .visual_box:nth-child(1),
+.visual_right .visual_box:nth-child(1),
+.visual_left .visual_box:nth-child(2),
+.visual_right .visual_box:nth-child(2) {
+ height: 34%;
+}
.visual_box .visual_title{position:relative;height:35px;margin:5px 0;}
.visual_box .visual_title span{color:#fff;font-size:18px;line-height:35px;}
.visual_box .visual_title img{width:100%;position:absolute;left:0;bottom:0;}
.visual_box .visual_chart{height:calc(100% - 35px);}
-.visual_left{width:25%;height:100%;float:left;}
+.visual_left{width:25%;height:100%;float:left;margin-top: -15px;}
.visual_left .sfzcll{position:relative;}
.visual_left .sfzcll a{width:32%;text-align:center;line-height:25px;color:#fff;display:inline-block;}
.visual_left .sfzcll .sfzcll_pos_box{width:100%;height:calc(100% - 30px);}
@@ -81,17 +125,17 @@ html, body, form{overflow-y:auto;height:100%;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl{color:#00ffc6;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh{color:#ffe400;}
-.visual_con{width:50%;height:100%;float:left;padding:25px 20px 0 20px;}
-.visual_con .visual_conTop{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:120px;gap:10px;margin-bottom:10px;}
+.visual_con{width:50%;height:100%;float:left;padding:0 20px 0 20px;}
+.visual_con .visual_conTop{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:80px;gap:10px;margin-bottom:10px;}
.visual_con .visual_conTop .visual_conTop_box{height:100%;padding:0;}
.visual_con .visual_conTop .visual_conTop1{width:100%;height:100%;float:none;}
.visual_con .visual_conTop .visual_conTop1>div{background:url(../images/ksh40.png) no-repeat;background-size:100% 100%;}
.visual_con .visual_conTop .visual_conTop2{width:30%;height:100%;float:left;}
.visual_con .visual_conTop .visual_conTop2>div{background:url(../images/ksh39.png) no-repeat;background-size:100% 100%;}
-.visual_right{width:25%;height:100%;float:right;}
-.visual_con .visual_conTop .visual_conTop_box>div{height:100%;}
-.visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:16px;padding:12px 0 0 16px;margin:0;}
-.visual_con .visual_conTop .visual_conTop_box>div p{width:100%;float:none;line-height:1.2;color:#20dbfd;text-shadow:0 0 12px #00d8ff;font-size:32px;font-family: 'yjsz';text-align:left;padding:12px 0 0 16px;margin:0;}
+.visual_right{width:25%;height:100%;float:right;margin-top: -15px;}
+.visual_con .visual_conTop .visual_conTop_box>div{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
+.visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:14px;padding:0;margin:0;text-align:center;width:100%;}
+.visual_con .visual_conTop .visual_conTop_box>div p{width:100%;float:none;line-height:1.2;color:#20dbfd;text-shadow:0 0 12px #00d8ff;font-size:24px;font-family: 'yjsz';text-align:center;padding:5px 0 0 0;margin:0;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil{width:67%;height:60px;float:left;padding-top:23px;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a{display:block;line-height:20px;text-align: left;color:#fff;padding-left:9px;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span{width:32px;display:inline-block;margin-left:3px;}
@@ -99,35 +143,408 @@ html, body, form{overflow-y:auto;height:100%;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd{color:#12fe81;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null{visibility:hidden;}
+.visual_conBot{height:calc(100% - 400px);position:relative;margin-top:10px;}
+.visual_conBot>img{position:absolute;z-index:99;}
+.visual_conBot .visual_conBot_l{left:0;top:0;}
+.visual_conBot .visual_conBot_2{right:0;top:0;}
+.visual_conBot .visual_conBot_3{right:0;bottom:0;}
+.visual_conBot .visual_conBot_4{left:0;bottom:0;}
+.visual_conBot .visual_chart{width:100%;height:100%;position:absolute;z-index:9;}
+
+/* 订单状态监控模块样式 */
+.visual_conStatus {
+ height: 90px;
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 10px;
+}
+
+.status_item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ position: relative;
+ padding-bottom: 5px;
+}
+
+.status_label {
+ color: #fff;
+ font-size: 14px;
+ margin-bottom: 5px;
+ z-index: 2;
+}
+
+.status_value_group {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 15px;
+ z-index: 2;
+}
+
+.status_value_group .stat-value {
+ color: #fff;
+ font-size: 24px;
+ font-family: 'yjsz';
+ font-weight: bold;
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+}
+
+.status_value_group .status_unit {
+ color: #aaa;
+ font-size: 12px;
+ margin-left: 5px;
+}
+
+.status_base {
+ position: absolute;
+ bottom: 0;
+ width: 80%;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.status_ring {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: 2px solid rgba(0, 150, 255, 0.5);
+ background: rgba(0, 80, 160, 0.2);
+ box-shadow: 0 0 15px rgba(0, 150, 255, 0.4), inset 0 0 10px rgba(0, 150, 255, 0.2);
+ transform: rotateX(60deg);
+}
+
+.status_light {
+ position: absolute;
+ bottom: 10px;
+ width: 70%;
+ height: 40px;
+ background: linear-gradient(to top, rgba(0, 150, 255, 0.4), transparent);
+ clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+ z-index: 1;
+}
+
+/* 为 status_ring 添加旋转动画 */
+.status_ring::after {
+ content: '';
+ position: absolute;
+ top: -5px; left: -5px; right: -5px; bottom: -5px;
+ border-radius: 50%;
+ border: 2px dashed rgba(0, 216, 255, 0.6);
+ animation: rotateRing 10s linear infinite;
+}
+
+@keyframes rotateRing {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
.stat-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;}
-.visual_con .visual_conBot{height:calc(100% - 136px);background:url(../images/ksh41.png) no-repeat;background-size:100% 100%;position:relative;}
-.visual_con .visual_conBot>img{position:absolute;width:25px;height:25px;}
-.visual_con .visual_conBot .visual_conBot_l{position:absolute;left:0;top:0;}
-.visual_con .visual_conBot .visual_conBot_2{position:absolute;right:0;top:0;}
-.visual_con .visual_conBot .visual_conBot_3{position:absolute;right:0;bottom:0;}
-.visual_con .visual_conBot .visual_conBot_4{position:absolute;left:0;bottom:0;}
-.visual_con .visual_conBot .visual_chart{width:100%;height:100%;position:absolute;}
-.visual_con .visual_conBot .visual_chart_text{color:#fff;position:absolute;top:15px;left:15px;z-index: 99;}
-.visual_con .visual_conBot .visual_chart_text h1{font-size:26px;margin-bottom:6px;}
-.visual_con .visual_conBot .visual_chart_text h2{font-size:20px;}
-.visual_con .visual_conBot .visual_conBot_bot{width:calc(100% - 8px);height:180px;background:rgba(16,54,87,0.5);border:1px solid #345f92;position:absolute;bottom:4px;left:4px;z-index:99;}
+/* Order List Styles */
+.order_list_container {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+}
+.order_list_header {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 10px;
+ background: rgba(13, 38, 71, 0.8);
+ border-radius: 4px;
+ margin-bottom: 5px;
+}
+.order_list_header span {
+ color: #00d8ff;
+ font-size: 14px;
+ flex: 1;
+ text-align: center;
+}
+.order_list_content {
+ flex: 1;
+ overflow-y: auto;
+}
+.order_item {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 10px;
+ border-bottom: 1px solid rgba(255,255,255,0.1);
+ align-items: center;
+}
+.order_item span {
+ color: #fff;
+ font-size: 13px;
+ flex: 1;
+ text-align: center;
+}
+.status-done { color: #00ffc6 !important; }
+.status-shipping { color: #ffe400 !important; }
+.status-pending { color: #ff6b6b !important; }
-.visualSssf_left{width:40%;float:left;color:#fff;padding:10px 20px 0 20px;}
-.visualSssf_left h3{color:#fff;font-size:20px;font-weight:600;margin-bottom:10px;}
-.visualSssf_left a{width:32%;color:#fff;display:inline-block;margin-bottom:10px;cursor:pointer;}
-.visualSssf_left a.active{color:#01f0ff;}
-.visualSssf_right{width:60%;height:100%;float:left;}
-.visualSssf_right .visualSssf_right_box{width:33%;float:left;height:100%;}
+/* 牛只概况列表样式 */
+#cattle_overview_container {
+ padding: 10px 10px 0 10px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ overflow-y: auto;
+ height: 100%;
+}
-.visualSfzsfl{position:relative;}
-.visualSfzsfl .visual_chart{opacity:0.6}
-.visualSfzsfl .visual_table{width:60%;position:absolute;z-index: 99;top:40px;left:0;}
-.visualSfzsfl .visual_table table{width:100%;color:#fff;text-align:center;}
-.visualSfzsfl .visual_table table tr{border-bottom: 1px dashed #ddd;}
-.visualSfzsfl .visual_table table tr:first-child{color:#01c0ff;}
-.visualSfzsfl .visual_table table tr:last-child{border-bottom: 1px solid #ddd;}
+.cattle_item {
+ width: 48%;
+ margin-right: 4%;
+ margin-bottom: 12px;
+ background: rgba(10, 30, 60, 0.6);
+ border: 1px solid #134572;
+ border-radius: 20px;
+ padding: 5px 8px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ box-shadow: inset 0 0 10px rgba(0, 150, 255, 0.1);
+ cursor: pointer;
+ transition: all 0.3s;
+}
+.cattle_item:hover {
+ background: rgba(10, 30, 60, 0.9);
+ border-color: #00d8ff;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 216, 255, 0.2);
+}
+.cattle_item:nth-child(2n) {
+ margin-right: 0;
+}
+.cattle_icon {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background: rgba(0, 80, 160, 0.5);
+ border: 1px solid #0096ff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 8px;
+ flex-shrink: 0;
+ position: relative;
+}
+.cattle_icon::after {
+ content: '';
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ background: #00d8ff;
+ border-radius: 50%;
+ bottom: 2px;
+ right: 2px;
+ box-shadow: 0 0 5px #00d8ff;
+}
+
+.cattle_icon .glyphicon {
+ color: #8acaff;
+ font-size: 14px;
+}
+
+.cattle_info {
+ flex: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.cattle_name {
+ color: #cceeff;
+ font-size: 13px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.cattle_value {
+ color: #fff;
+ font-size: 16px;
+ font-family: 'yjsz';
+ margin-left: 5px;
+}
+
+.cattle_unit {
+ font-size: 12px;
+ color: #aaa;
+ margin-left: 2px;
+ font-family: "Microsoft YaHei";
+}
+
+/* 牛只行情列表样式 */
+.market_list_container {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+}
+
+.market_list_header {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 0;
+ background: rgba(13, 38, 71, 0.8);
+ border-radius: 4px;
+ margin-bottom: 5px;
+}
+
+.market_list_header span {
+ color: #aaa;
+ font-size: 13px;
+ text-align: center;
+ font-weight: bold;
+}
+
+.market_list_content {
+ flex: 1;
+ overflow-y: auto;
+}
+
+.market_item {
+ display: flex;
+ justify-content: space-between;
+ padding: 8px 0;
+ border-bottom: 1px solid rgba(255,255,255,0.05);
+ align-items: center;
+}
+
+.market_item span {
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* 序号列 */
+.market_list_header span:nth-child(1),
+.market_item span:nth-child(1) {
+ flex: 0.5;
+}
+
+/* 省份列 */
+.market_list_header span:nth-child(2),
+.market_item span:nth-child(2) {
+ flex: 1;
+}
+
+/* 地区列 */
+.market_list_header span:nth-child(3),
+.market_item span:nth-child(3) {
+ flex: 1.5;
+}
+
+/* 品种列 */
+.market_list_header span:nth-child(4),
+.market_item span:nth-child(4) {
+ flex: 1;
+}
+
+/* 单价列 */
+.market_list_header span:nth-child(5),
+.market_item span:nth-child(5) {
+ flex: 1;
+}
+
+.market_price {
+ color: #00d8ff !important;
+ font-weight: bold;
+}
+
+/* 合计总数模块样式 */
+.total_layout {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ padding: 10px 20px;
+}
+
+.total_row {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ background: rgba(10, 30, 60, 0.6);
+ border: 1px solid rgba(0, 216, 255, 0.2);
+ border-radius: 8px;
+ margin-bottom: 10px;
+ padding: 0 15px;
+ box-shadow: inset 0 0 15px rgba(0, 150, 255, 0.1);
+}
+
+.total_row:last-child {
+ margin-bottom: 0;
+}
+
+.total_icon_wrapper {
+ width: 46px;
+ height: 46px;
+ background: rgba(0, 80, 160, 0.5);
+ border: 1px solid #0096ff;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 0 10px rgba(0, 216, 255, 0.3);
+}
+
+.total_icon_wrapper .glyphicon {
+ font-size: 20px;
+ color: #00d8ff;
+}
+
+.total_text_wrapper {
+ margin-left: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.total_label {
+ color: #cceeff;
+ font-size: 14px;
+ margin-bottom: 2px;
+}
+
+.total_data {
+ display: flex;
+ align-items: baseline;
+}
+
+.total_data .stat-value {
+ color: #fff;
+ font-size: 24px;
+ font-family: 'yjsz';
+ font-weight: bold;
+ text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
+}
+
+.total_data .total_unit {
+ color: #aaa;
+ font-size: 12px;
+ margin-left: 5px;
+}
+
+/* 屠宰场概况列表样式 - 复用牛只概况样式逻辑 */
+#slaughterhouse_overview_container {
+ padding: 10px 10px 0 10px;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ overflow-y: auto;
+ height: 100%;
+}
diff --git a/datav/index.html b/datav/index.html
index 3e3cbd4..1ceb9f5 100644
--- a/datav/index.html
+++ b/datav/index.html
@@ -29,153 +29,105 @@
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ --
+423536.29元
--
+417832.33元
--
+31525元
--
+215215.25元
--
+564231.321元
--
+335421.56元
--
+2200头
--
+35车
--
+55单
-
- | 小型车 | -中型车 | -大型车 | -
| 2486万 | -2486万 | -2486万 | -
| 2486万 | -2486万 | -2486万 | -
| 2486万 | -2486万 | -2486万 | -
| 2486万 | -2486万 | -2486万 | -
+