修改模块
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
|
||||
383
datav/index.html
383
datav/index.html
@@ -29,153 +29,105 @@
|
||||
<img class="jzxz2" src="images/jzxz2.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head_top">
|
||||
<!-- <img class="decor_side decor_left" src="images/ksh42.png" alt=""> -->
|
||||
<img class="decor_bar decor_left_outer" src="images/ksh31.png" alt="">
|
||||
<div class="head_logo">牛只管理系统</div>
|
||||
<img class="decor_bar decor_right_outer" src="images/ksh32.png" alt="">
|
||||
<!-- <img class="decor_side decor_right" src="images/ksh42.png" alt=""> -->
|
||||
<img class="head_decor" src="images/header.png" alt="标题装饰">
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div class="visual_left">
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>交通流量</span>
|
||||
<span>订单列表</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>交通工具流量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>收费站车流量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart sfzcll">
|
||||
<a>运输方式</a>
|
||||
<a>客运量</a>
|
||||
<a>货运量</a>
|
||||
<div class="sfzcll_pos_box">
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="visual_chart order_list_container">
|
||||
<div class="order_list_header">
|
||||
<span>订单号</span>
|
||||
<span>金额</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
<div class="order_list_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>牛只概况</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="cattle_overview_container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>出肉率</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="meat_yield_chart"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="visual_con">
|
||||
<div class="visual_conTop">
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购总额</h3>
|
||||
<p class="stat-value" data-field="toalProcurementAmount">--</p>
|
||||
<p class="stat-value" data-field="toalProcurementAmount">423536.29元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>销售总额</h3>
|
||||
<p class="stat-value" data-field="toalSalesAmount">--</p>
|
||||
<p class="stat-value" data-field="toalSalesAmount">417832.33元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>利润</h3>
|
||||
<p class="stat-value" data-field="profits">--</p>
|
||||
<p class="stat-value" data-field="profits">31525元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>应收货款</h3>
|
||||
<p class="stat-value" data-field="accountsReceivable">--</p>
|
||||
<p class="stat-value" data-field="accountsReceivable">215215.25元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>未收货款</h3>
|
||||
<p class="stat-value" data-field="uncollectedPayment">--</p>
|
||||
<p class="stat-value" data-field="uncollectedPayment">564231.321元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>实收货款</h3>
|
||||
<p class="stat-value" data-field="actualPayment">--</p>
|
||||
<p class="stat-value" data-field="actualPayment">335421.56元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购头数</h3>
|
||||
<p class="stat-value" data-field="totalPurchase">--</p>
|
||||
<p class="stat-value" data-field="totalPurchase">2200头</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购单数</h3>
|
||||
<p class="stat-value" data-field="totalOrder">--</p>
|
||||
<p class="stat-value" data-field="totalOrder">35车</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>销售单数</h3>
|
||||
<p class="stat-value" data-field="totalSales">--</p>
|
||||
<p class="stat-value" data-field="totalSales">55单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,89 +138,120 @@
|
||||
<img class="visual_conBot_4" src="images/ksh45.png">
|
||||
|
||||
<div class="visual_chart" id="main8"></div>
|
||||
<div class="visual_conBot_bot">
|
||||
<div class="visualSssf_left">
|
||||
<h3>今日实时收费</h3>
|
||||
<a style="display:block">全省数据</a>
|
||||
<a>大同北</a>
|
||||
<a>大同南</a>
|
||||
<a>朔州</a>
|
||||
<a>吕梁北</a>
|
||||
<a>吕梁南</a>
|
||||
<a>太原</a>
|
||||
<a class="active">晋中</a>
|
||||
<a>太旧</a>
|
||||
<a>长治</a>
|
||||
</div>
|
||||
<div class="visual_conStatus">
|
||||
<div class="status_item">
|
||||
<div class="status_label">未完成</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="uncompletedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="visualSssf_right">
|
||||
<div class="visualSssf_right_box" id="main5"></div>
|
||||
<div class="visualSssf_right_box" id="main6"></div>
|
||||
<div class="visualSssf_right_box" id="main7"></div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">未到岸</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="notArrivedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">未售完</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="unsoldOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">已完成</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="completedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_right">
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>本月发生事件</span>
|
||||
<span>牛只行情</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="swiper-container visual_swiper1 visual_chart">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" id="main3"></div>
|
||||
<div class="swiper-slide" id="main31"></div>
|
||||
<div class="visual_chart market_list_container">
|
||||
<div class="market_list_header">
|
||||
<span>序号</span>
|
||||
<span>省份</span>
|
||||
<span>地区</span>
|
||||
<span>品种</span>
|
||||
<span>单价(元/斤)</span>
|
||||
</div>
|
||||
<div class="market_list_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box visualSfzsfl">
|
||||
<div class="visual_title">
|
||||
<span>收费站收费量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main9">
|
||||
|
||||
</div>
|
||||
<div class="visual_table">
|
||||
<table>
|
||||
<tr>
|
||||
<td>小型车</td>
|
||||
<td>中型车</td>
|
||||
<td>大型车</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>收费站收费排行</span>
|
||||
<span>屠宰场概况</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="swiper-container visual_swiper2 visual_chart">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" id="main4"></div>
|
||||
<div class="swiper-slide" id="main41"></div>
|
||||
<div class="visual_chart" id="slaughterhouse_overview_container"></div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>合计总数</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart total_layout">
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">合计总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="totalCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">在栏总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="deliveredCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-send"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">在途总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="inTransitCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,10 +274,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
var sfzcllH=$('.sfzcll_box').height()
|
||||
var sfzcllHtwo=sfzcllH-2
|
||||
$('.sfzcll_box').css('line-height',sfzcllH+'px')
|
||||
$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')
|
||||
*/
|
||||
|
||||
//删除加载动画
|
||||
$('#load').fadeOut(1000)
|
||||
@@ -342,10 +327,57 @@
|
||||
success: function(res) {
|
||||
const list = res && (res.data || res.rows || res.result || res.list || res);
|
||||
const first = Array.isArray(list) ? list[0] : list;
|
||||
renderSalesOverview(first || {});
|
||||
const data = first || {};
|
||||
|
||||
// 模拟测试数据（如果接口未返回）
|
||||
if (data.toalProcurementAmount === undefined) data.toalProcurementAmount = 423536.29;
|
||||
if (data.toalSalesAmount === undefined) data.toalSalesAmount = 417832.33;
|
||||
if (data.profits === undefined) data.profits = 31525;
|
||||
if (data.accountsReceivable === undefined) data.accountsReceivable = 215215.25;
|
||||
if (data.uncollectedPayment === undefined) data.uncollectedPayment = 564231.32;
|
||||
if (data.actualPayment === undefined) data.actualPayment = 335421.56;
|
||||
if (data.totalPurchase === undefined) data.totalPurchase = 2200;
|
||||
if (data.totalOrder === undefined) data.totalOrder = 35;
|
||||
if (data.totalSales === undefined) data.totalSales = 55;
|
||||
|
||||
// 模拟合计总数数据
|
||||
if (data.totalCattle === undefined) data.totalCattle = 12580;
|
||||
if (data.inTransitCattle === undefined) data.inTransitCattle = 1250;
|
||||
if (data.deliveredCattle === undefined) data.deliveredCattle = 11330;
|
||||
|
||||
// 模拟订单状态数据
|
||||
if (data.uncompletedOrders === undefined) data.uncompletedOrders = 28;
|
||||
if (data.notArrivedOrders === undefined) data.notArrivedOrders = 28;
|
||||
if (data.unsoldOrders === undefined) data.unsoldOrders = 6;
|
||||
if (data.completedOrders === undefined) data.completedOrders = 22;
|
||||
|
||||
renderSalesOverview(data);
|
||||
},
|
||||
error: function() {
|
||||
renderSalesOverview({});
|
||||
const data = {};
|
||||
// 模拟测试数据
|
||||
data.toalProcurementAmount = 423536.29;
|
||||
data.toalSalesAmount = 417832.33;
|
||||
data.profits = 31525;
|
||||
data.accountsReceivable = 215215.25;
|
||||
data.uncollectedPayment = 564231.32;
|
||||
data.actualPayment = 335421.56;
|
||||
data.totalPurchase = 2200;
|
||||
data.totalOrder = 35;
|
||||
data.totalSales = 55;
|
||||
|
||||
// 模拟合计总数数据
|
||||
data.totalCattle = 12580;
|
||||
data.inTransitCattle = 1250;
|
||||
data.deliveredCattle = 11330;
|
||||
|
||||
// 模拟订单状态数据
|
||||
data.uncompletedOrders = 28;
|
||||
data.notArrivedOrders = 28;
|
||||
data.unsoldOrders = 6;
|
||||
data.completedOrders = 22;
|
||||
|
||||
renderSalesOverview(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -353,47 +385,12 @@
|
||||
fetchSalesOverview();
|
||||
})
|
||||
|
||||
//交通流量
|
||||
var myChart1 = echarts.init(document.getElementById('main1'));
|
||||
myChart1.setOption(option1);
|
||||
//交通工具流量
|
||||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||||
myChart2.setOption(option2);
|
||||
//本月发生事件
|
||||
var myChart3 = echarts.init(document.getElementById('main3'));
|
||||
myChart3.setOption(option3);
|
||||
var myChart31 = echarts.init(document.getElementById('main31'));
|
||||
myChart31.setOption(option31);
|
||||
var mySwiper1 = new Swiper('.visual_swiper1', {
|
||||
autoplay: true,//可选选项，自动滑动
|
||||
speed:800,//可选选项，滑动速度
|
||||
autoplay: {
|
||||
delay: 5000,//1秒切换一次
|
||||
},
|
||||
})
|
||||
//收费站收费排行
|
||||
var myChart4 = echarts.init(document.getElementById('main4'));
|
||||
myChart4.setOption(option4);
|
||||
var myChart41 = echarts.init(document.getElementById('main41'));
|
||||
myChart41.setOption(option41);
|
||||
var mySwiper2 = new Swiper('.visual_swiper2', {
|
||||
autoplay: true,//可选选项，自动滑动
|
||||
direction : 'vertical',//可选选项，滑动方向
|
||||
speed:2000,//可选选项，滑动速度
|
||||
})
|
||||
//今日实时收费
|
||||
var myChart5 = echarts.init(document.getElementById('main5'));
|
||||
myChart5.setOption(option5);
|
||||
var myChart6 = echarts.init(document.getElementById('main6'));
|
||||
myChart6.setOption(option6);
|
||||
var myChart7 = echarts.init(document.getElementById('main7'));
|
||||
myChart7.setOption(option7);
|
||||
|
||||
|
||||
//中间地图
|
||||
var myChart8 = echarts.init(document.getElementById('main8'));
|
||||
myChart8.setOption(option8);
|
||||
//收费站收费量
|
||||
var myChart9 = echarts.init(document.getElementById('main9'));
|
||||
myChart9.setOption(option9);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -88,480 +88,3 @@ option8 = {
|
||||
data: allData.moveLines
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
//收费站收费量
|
||||
var geoCoordMap = {
|
||||
"海门":[121.15,31.89],
|
||||
"鄂尔多斯":[109.781327,39.608266],
|
||||
"招远":[120.38,37.35],
|
||||
"舟山":[122.207216,29.985295],
|
||||
"齐齐哈尔":[123.97,47.33],
|
||||
"盐城":[120.13,33.38],
|
||||
"赤峰":[118.87,42.28],
|
||||
"青岛":[120.33,36.07],
|
||||
"乳山":[121.52,36.89],
|
||||
"金昌":[102.188043,38.520089],
|
||||
"泉州":[118.58,24.93],
|
||||
"莱西":[120.53,36.86],
|
||||
"日照":[119.46,35.42],
|
||||
"胶南":[119.97,35.88],
|
||||
"南通":[121.05,32.08],
|
||||
"拉萨":[91.11,29.97],
|
||||
"云浮":[112.02,22.93],
|
||||
"梅州":[116.1,24.55],
|
||||
"文登":[122.05,37.2],
|
||||
"上海":[121.48,31.22],
|
||||
"攀枝花":[101.718637,26.582347],
|
||||
"威海":[122.1,37.5],
|
||||
"承德":[117.93,40.97],
|
||||
"厦门":[118.1,24.46],
|
||||
"汕尾":[115.375279,22.786211],
|
||||
"潮州":[116.63,23.68],
|
||||
"丹东":[124.37,40.13],
|
||||
"太仓":[121.1,31.45],
|
||||
"曲靖":[103.79,25.51],
|
||||
"烟台":[121.39,37.52],
|
||||
"福州":[119.3,26.08],
|
||||
"瓦房店":[121.979603,39.627114],
|
||||
"即墨":[120.45,36.38],
|
||||
"抚顺":[123.97,41.97],
|
||||
"玉溪":[102.52,24.35],
|
||||
"张家口":[114.87,40.82],
|
||||
"阳泉":[113.57,37.85],
|
||||
"莱州":[119.942327,37.177017],
|
||||
"湖州":[120.1,30.86],
|
||||
"汕头":[116.69,23.39],
|
||||
"昆山":[120.95,31.39],
|
||||
"宁波":[121.56,29.86],
|
||||
"湛江":[110.359377,21.270708],
|
||||
"揭阳":[116.35,23.55],
|
||||
"荣成":[122.41,37.16],
|
||||
"连云港":[119.16,34.59],
|
||||
"葫芦岛":[120.836932,40.711052],
|
||||
"常熟":[120.74,31.64],
|
||||
"东莞":[113.75,23.04],
|
||||
"河源":[114.68,23.73],
|
||||
"淮安":[119.15,33.5],
|
||||
"泰州":[119.9,32.49],
|
||||
"南宁":[108.33,22.84],
|
||||
"营口":[122.18,40.65],
|
||||
"惠州":[114.4,23.09],
|
||||
"江阴":[120.26,31.91],
|
||||
"蓬莱":[120.75,37.8],
|
||||
"韶关":[113.62,24.84],
|
||||
"嘉峪关":[98.289152,39.77313],
|
||||
"广州":[113.23,23.16],
|
||||
"延安":[109.47,36.6],
|
||||
"太原":[112.53,37.87],
|
||||
"清远":[113.01,23.7],
|
||||
"中山":[113.38,22.52],
|
||||
"昆明":[102.73,25.04],
|
||||
"寿光":[118.73,36.86],
|
||||
"盘锦":[122.070714,41.119997],
|
||||
"长治":[113.08,36.18],
|
||||
"深圳":[114.07,22.62],
|
||||
"珠海":[113.52,22.3],
|
||||
"宿迁":[118.3,33.96],
|
||||
"咸阳":[108.72,34.36],
|
||||
"铜川":[109.11,35.09],
|
||||
"平度":[119.97,36.77],
|
||||
"佛山":[113.11,23.05],
|
||||
"海口":[110.35,20.02],
|
||||
"江门":[113.06,22.61],
|
||||
"章丘":[117.53,36.72],
|
||||
"肇庆":[112.44,23.05],
|
||||
"大连":[121.62,38.92],
|
||||
"临汾":[111.5,36.08],
|
||||
"吴江":[120.63,31.16],
|
||||
"石嘴山":[106.39,39.04],
|
||||
"沈阳":[123.38,41.8],
|
||||
"苏州":[120.62,31.32],
|
||||
"茂名":[110.88,21.68],
|
||||
"嘉兴":[120.76,30.77],
|
||||
"长春":[125.35,43.88],
|
||||
"胶州":[120.03336,36.264622],
|
||||
"银川":[106.27,38.47],
|
||||
"张家港":[120.555821,31.875428],
|
||||
"三门峡":[111.19,34.76],
|
||||
"锦州":[121.15,41.13],
|
||||
"南昌":[115.89,28.68],
|
||||
"柳州":[109.4,24.33],
|
||||
"三亚":[109.511909,18.252847],
|
||||
"自贡":[104.778442,29.33903],
|
||||
"吉林":[126.57,43.87],
|
||||
"阳江":[111.95,21.85],
|
||||
"泸州":[105.39,28.91],
|
||||
"西宁":[101.74,36.56],
|
||||
"宜宾":[104.56,29.77],
|
||||
"呼和浩特":[111.65,40.82],
|
||||
"成都":[104.06,30.67],
|
||||
"大同":[113.3,40.12],
|
||||
"镇江":[119.44,32.2],
|
||||
"桂林":[110.28,25.29],
|
||||
"张家界":[110.479191,29.117096],
|
||||
"宜兴":[119.82,31.36],
|
||||
"北海":[109.12,21.49],
|
||||
"西安":[108.95,34.27],
|
||||
"金坛":[119.56,31.74],
|
||||
"东营":[118.49,37.46],
|
||||
"牡丹江":[129.58,44.6],
|
||||
"遵义":[106.9,27.7],
|
||||
"绍兴":[120.58,30.01],
|
||||
"扬州":[119.42,32.39],
|
||||
"常州":[119.95,31.79],
|
||||
"潍坊":[119.1,36.62],
|
||||
"重庆":[106.54,29.59],
|
||||
"台州":[121.420757,28.656386],
|
||||
"南京":[118.78,32.04],
|
||||
"滨州":[118.03,37.36],
|
||||
"贵阳":[106.71,26.57],
|
||||
"无锡":[120.29,31.59],
|
||||
"本溪":[123.73,41.3],
|
||||
"克拉玛依":[84.77,45.59],
|
||||
"渭南":[109.5,34.52],
|
||||
"马鞍山":[118.48,31.56],
|
||||
"宝鸡":[107.15,34.38],
|
||||
"焦作":[113.21,35.24],
|
||||
"句容":[119.16,31.95],
|
||||
"北京":[116.46,39.92],
|
||||
"徐州":[117.2,34.26],
|
||||
"衡水":[115.72,37.72],
|
||||
"包头":[110,40.58],
|
||||
"绵阳":[104.73,31.48],
|
||||
"乌鲁木齐":[87.68,43.77],
|
||||
"枣庄":[117.57,34.86],
|
||||
"杭州":[120.19,30.26],
|
||||
"淄博":[118.05,36.78],
|
||||
"鞍山":[122.85,41.12],
|
||||
"溧阳":[119.48,31.43],
|
||||
"库尔勒":[86.06,41.68],
|
||||
"安阳":[114.35,36.1],
|
||||
"开封":[114.35,34.79],
|
||||
"济南":[117,36.65],
|
||||
"德阳":[104.37,31.13],
|
||||
"温州":[120.65,28.01],
|
||||
"九江":[115.97,29.71],
|
||||
"邯郸":[114.47,36.6],
|
||||
"临安":[119.72,30.23],
|
||||
"兰州":[103.73,36.03],
|
||||
"沧州":[116.83,38.33],
|
||||
"临沂":[118.35,35.05],
|
||||
"南充":[106.110698,30.837793],
|
||||
"天津":[117.2,39.13],
|
||||
"富阳":[119.95,30.07],
|
||||
"泰安":[117.13,36.18],
|
||||
"诸暨":[120.23,29.71],
|
||||
"郑州":[113.65,34.76],
|
||||
"哈尔滨":[126.63,45.75],
|
||||
"聊城":[115.97,36.45],
|
||||
"芜湖":[118.38,31.33],
|
||||
"唐山":[118.02,39.63],
|
||||
"平顶山":[113.29,33.75],
|
||||
"邢台":[114.48,37.05],
|
||||
"德州":[116.29,37.45],
|
||||
"济宁":[116.59,35.38],
|
||||
"荆州":[112.239741,30.335165],
|
||||
"宜昌":[111.3,30.7],
|
||||
"义乌":[120.06,29.32],
|
||||
"丽水":[119.92,28.45],
|
||||
"洛阳":[112.44,34.7],
|
||||
"秦皇岛":[119.57,39.95],
|
||||
"株洲":[113.16,27.83],
|
||||
"石家庄":[114.48,38.03],
|
||||
"莱芜":[117.67,36.19],
|
||||
"常德":[111.69,29.05],
|
||||
"保定":[115.48,38.85],
|
||||
"湘潭":[112.91,27.87],
|
||||
"金华":[119.64,29.12],
|
||||
"岳阳":[113.09,29.37],
|
||||
"长沙":[113,28.21],
|
||||
"衢州":[118.88,28.97],
|
||||
"廊坊":[116.7,39.53],
|
||||
"菏泽":[115.480656,35.23375],
|
||||
"合肥":[117.27,31.86],
|
||||
"武汉":[114.31,30.52],
|
||||
"大庆":[125.03,46.58]
|
||||
};
|
||||
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
option9 = {
|
||||
|
||||
title: {
|
||||
text: ' ',
|
||||
sublink: ' ',
|
||||
x:'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
return params.name + ' : ' + params.value[2];
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
y: 'bottom',
|
||||
x:'right',
|
||||
data:['pm2.5'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
calculable: true,
|
||||
color: ['#d94e5d','#eac736','#50a3ba'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'rgba(127,199,221,0.1)',
|
||||
borderColor: '#0177ff'
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#071537'//鼠标指上市时的颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: ' ',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData([
|
||||
{name: "海门", value: 9},
|
||||
{name: "鄂尔多斯", value: 12},
|
||||
{name: "招远", value: 12},
|
||||
{name: "舟山", value: 12},
|
||||
{name: "齐齐哈尔", value: 14},
|
||||
{name: "盐城", value: 15},
|
||||
{name: "赤峰", value: 16},
|
||||
{name: "青岛", value: 18},
|
||||
{name: "乳山", value: 18},
|
||||
{name: "金昌", value: 19},
|
||||
{name: "泉州", value: 21},
|
||||
{name: "莱西", value: 21},
|
||||
{name: "日照", value: 21},
|
||||
{name: "胶南", value: 22},
|
||||
{name: "南通", value: 23},
|
||||
{name: "拉萨", value: 24},
|
||||
{name: "云浮", value: 24},
|
||||
{name: "梅州", value: 25},
|
||||
{name: "文登", value: 25},
|
||||
{name: "上海", value: 25},
|
||||
{name: "攀枝花", value: 25},
|
||||
{name: "威海", value: 25},
|
||||
{name: "承德", value: 25},
|
||||
{name: "厦门", value: 26},
|
||||
{name: "汕尾", value: 26},
|
||||
{name: "潮州", value: 26},
|
||||
{name: "丹东", value: 27},
|
||||
{name: "太仓", value: 27},
|
||||
{name: "曲靖", value: 27},
|
||||
{name: "烟台", value: 28},
|
||||
{name: "福州", value: 29},
|
||||
{name: "瓦房店", value: 30},
|
||||
{name: "即墨", value: 30},
|
||||
{name: "抚顺", value: 31},
|
||||
{name: "玉溪", value: 31},
|
||||
{name: "张家口", value: 31},
|
||||
{name: "阳泉", value: 31},
|
||||
{name: "莱州", value: 32},
|
||||
{name: "湖州", value: 32},
|
||||
{name: "汕头", value: 32},
|
||||
{name: "昆山", value: 33},
|
||||
{name: "宁波", value: 33},
|
||||
{name: "湛江", value: 33},
|
||||
{name: "揭阳", value: 34},
|
||||
{name: "荣成", value: 34},
|
||||
{name: "连云港", value: 35},
|
||||
{name: "葫芦岛", value: 35},
|
||||
{name: "常熟", value: 36},
|
||||
{name: "东莞", value: 36},
|
||||
{name: "河源", value: 36},
|
||||
{name: "淮安", value: 36},
|
||||
{name: "泰州", value: 36},
|
||||
{name: "南宁", value: 37},
|
||||
{name: "营口", value: 37},
|
||||
{name: "惠州", value: 37},
|
||||
{name: "江阴", value: 37},
|
||||
{name: "蓬莱", value: 37},
|
||||
{name: "韶关", value: 38},
|
||||
{name: "嘉峪关", value: 38},
|
||||
{name: "广州", value: 38},
|
||||
{name: "延安", value: 38},
|
||||
{name: "太原", value: 39},
|
||||
{name: "清远", value: 39},
|
||||
{name: "中山", value: 39},
|
||||
{name: "昆明", value: 39},
|
||||
{name: "寿光", value: 40},
|
||||
{name: "盘锦", value: 40},
|
||||
{name: "长治", value: 41},
|
||||
{name: "深圳", value: 41},
|
||||
{name: "珠海", value: 42},
|
||||
{name: "宿迁", value: 43},
|
||||
{name: "咸阳", value: 43},
|
||||
{name: "铜川", value: 44},
|
||||
{name: "平度", value: 44},
|
||||
{name: "佛山", value: 44},
|
||||
{name: "海口", value: 44},
|
||||
{name: "江门", value: 45},
|
||||
{name: "章丘", value: 45},
|
||||
{name: "肇庆", value: 46},
|
||||
{name: "大连", value: 47},
|
||||
{name: "临汾", value: 47},
|
||||
{name: "吴江", value: 47},
|
||||
{name: "石嘴山", value: 49},
|
||||
{name: "沈阳", value: 50},
|
||||
{name: "苏州", value: 50},
|
||||
{name: "茂名", value: 50},
|
||||
{name: "嘉兴", value: 51},
|
||||
{name: "长春", value: 51},
|
||||
{name: "胶州", value: 52},
|
||||
{name: "银川", value: 52},
|
||||
{name: "张家港", value: 52},
|
||||
{name: "三门峡", value: 53},
|
||||
{name: "锦州", value: 54},
|
||||
{name: "南昌", value: 54},
|
||||
{name: "柳州", value: 54},
|
||||
{name: "三亚", value: 54},
|
||||
{name: "自贡", value: 56},
|
||||
{name: "吉林", value: 56},
|
||||
{name: "阳江", value: 57},
|
||||
{name: "泸州", value: 57},
|
||||
{name: "西宁", value: 57},
|
||||
{name: "宜宾", value: 58},
|
||||
{name: "呼和浩特", value: 58},
|
||||
{name: "成都", value: 58},
|
||||
{name: "大同", value: 58},
|
||||
{name: "镇江", value: 59},
|
||||
{name: "桂林", value: 59},
|
||||
{name: "张家界", value: 59},
|
||||
{name: "宜兴", value: 59},
|
||||
{name: "北海", value: 60},
|
||||
{name: "西安", value: 61},
|
||||
{name: "金坛", value: 62},
|
||||
{name: "东营", value: 62},
|
||||
{name: "牡丹江", value: 63},
|
||||
{name: "遵义", value: 63},
|
||||
{name: "绍兴", value: 63},
|
||||
{name: "扬州", value: 64},
|
||||
{name: "常州", value: 64},
|
||||
{name: "潍坊", value: 65},
|
||||
{name: "重庆", value: 66},
|
||||
{name: "台州", value: 67},
|
||||
{name: "南京", value: 67},
|
||||
{name: "滨州", value: 70},
|
||||
{name: "贵阳", value: 71},
|
||||
{name: "无锡", value: 71},
|
||||
{name: "本溪", value: 71},
|
||||
{name: "克拉玛依", value: 72},
|
||||
{name: "渭南", value: 72},
|
||||
{name: "马鞍山", value: 72},
|
||||
{name: "宝鸡", value: 72},
|
||||
{name: "焦作", value: 75},
|
||||
{name: "句容", value: 75},
|
||||
{name: "北京", value: 79},
|
||||
{name: "徐州", value: 79},
|
||||
{name: "衡水", value: 80},
|
||||
{name: "包头", value: 80},
|
||||
{name: "绵阳", value: 80},
|
||||
{name: "乌鲁木齐", value: 84},
|
||||
{name: "枣庄", value: 84},
|
||||
{name: "杭州", value: 84},
|
||||
{name: "淄博", value: 85},
|
||||
{name: "鞍山", value: 86},
|
||||
{name: "溧阳", value: 86},
|
||||
{name: "库尔勒", value: 86},
|
||||
{name: "安阳", value: 90},
|
||||
{name: "开封", value: 90},
|
||||
{name: "济南", value: 92},
|
||||
{name: "德阳", value: 93},
|
||||
{name: "温州", value: 95},
|
||||
{name: "九江", value: 96},
|
||||
{name: "邯郸", value: 98},
|
||||
{name: "临安", value: 99},
|
||||
{name: "兰州", value: 99},
|
||||
{name: "沧州", value: 100},
|
||||
{name: "临沂", value: 103},
|
||||
{name: "南充", value: 104},
|
||||
{name: "天津", value: 105},
|
||||
{name: "富阳", value: 106},
|
||||
{name: "泰安", value: 112},
|
||||
{name: "诸暨", value: 112},
|
||||
{name: "郑州", value: 113},
|
||||
{name: "哈尔滨", value: 114},
|
||||
{name: "聊城", value: 116},
|
||||
{name: "芜湖", value: 117},
|
||||
{name: "唐山", value: 119},
|
||||
{name: "平顶山", value: 119},
|
||||
{name: "邢台", value: 119},
|
||||
{name: "德州", value: 120},
|
||||
{name: "济宁", value: 120},
|
||||
{name: "荆州", value: 127},
|
||||
{name: "宜昌", value: 130},
|
||||
{name: "义乌", value: 132},
|
||||
{name: "丽水", value: 133},
|
||||
{name: "洛阳", value: 134},
|
||||
{name: "秦皇岛", value: 136},
|
||||
{name: "株洲", value: 143},
|
||||
{name: "石家庄", value: 147},
|
||||
{name: "莱芜", value: 148},
|
||||
{name: "常德", value: 152},
|
||||
{name: "保定", value: 153},
|
||||
{name: "湘潭", value: 154},
|
||||
{name: "金华", value: 157},
|
||||
{name: "岳阳", value: 169},
|
||||
{name: "长沙", value: 175},
|
||||
{name: "衢州", value: 177},
|
||||
{name: "廊坊", value: 193},
|
||||
{name: "菏泽", value: 194},
|
||||
{name: "合肥", value: 229},
|
||||
{name: "武汉", value: 273},
|
||||
{name: "大庆", value: 279}
|
||||
]),
|
||||
symbolSize: 12,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
//////////////////////收费站收费量 end
|
||||
1615
datav/js/visual.js
1615
datav/js/visual.js
File diff suppressed because it is too large
Load Diff
256
datav/monitor.html
Normal file
256
datav/monitor.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>仓库监控</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
|
||||
<style>
|
||||
body {
|
||||
background: url(images/data08.png) no-repeat #061537;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
font-family: '微软雅黑';
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.head_top {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.head_top .head_decor {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.decor_side {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 45px;
|
||||
height: auto;
|
||||
z-index: 11;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.decor_left {
|
||||
left: 50%;
|
||||
margin-left: -170px; /* Logo half width ~110px + spacing */
|
||||
}
|
||||
.decor_right {
|
||||
left: 50%;
|
||||
margin-left: 125px; /* Logo half width ~110px + spacing */
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.monitor-box {
|
||||
background: rgba(13, 38, 71, 0.8);
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
color: #00d8ff;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
.back-btn {
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
background: #0096ff;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
font-size: 14px;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: #00d8ff;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.camera-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.camera-item {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 5px;
|
||||
border: 1px solid #134572;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.camera-mock {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
padding-bottom: 0;
|
||||
background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.camera-content {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.camera-label {
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.camera-mock::after {
|
||||
content: 'LIVE';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
animation: blink 1s infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="head_top">
|
||||
<img class="head_decor" src="images/header.png" alt="标题装饰">
|
||||
<img class="decor_side decor_left" src="images/ksh42.png" alt="">
|
||||
<div class="head_logo">牛只管理系统</div>
|
||||
<img class="decor_side decor_right" src="images/ksh42.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="monitor-box">
|
||||
<h1 id="warehouse-title">
|
||||
<span>正在连接仓库监控...</span>
|
||||
<a href="index.html" class="back-btn">返回大屏</a>
|
||||
</h1>
|
||||
|
||||
<div class="camera-grid">
|
||||
<!-- 摄像头 1 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">大门监控</div>
|
||||
</div>
|
||||
<!-- 摄像头 2 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">仓库内景 A区</div>
|
||||
</div>
|
||||
<!-- 摄像头 3 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">仓库内景 B区</div>
|
||||
</div>
|
||||
<!-- 摄像头 4 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">卸货区</div>
|
||||
</div>
|
||||
<!-- 摄像头 5 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">饲料区</div>
|
||||
</div>
|
||||
<!-- 摄像头 6 -->
|
||||
<div class="camera-item">
|
||||
<div class="camera-mock">
|
||||
<div class="camera-content">
|
||||
<span class="glyphicon glyphicon-facetime-video" style="font-size: 30px; color: #333;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-label">通道监控</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 获取URL参数
|
||||
function getQueryParam(name) {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
return urlParams.get(name);
|
||||
}
|
||||
|
||||
const warehouse = getQueryParam('warehouse');
|
||||
if (warehouse) {
|
||||
document.querySelector('#warehouse-title span').textContent = warehouse + ' - 实时监控';
|
||||
} else {
|
||||
document.querySelector('#warehouse-title span').textContent = '未指定仓库';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,6 +16,30 @@ app.use((req, res, next) => {
|
||||
next();
|
||||
});
|
||||
|
||||
// 专用代理：牛只行情数据 (ad.yunmainiu.com)
|
||||
// 必须放在通用的 /api 代理之前
|
||||
app.use('/api/cattle-market-data', createProxyMiddleware({
|
||||
target: 'https://ad.yunmainiu.com',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
pathRewrite: {
|
||||
'^/': '/api/cattle-data',
|
||||
},
|
||||
onProxyReq: (proxyReq, req, res) => {
|
||||
console.log(`[牛只行情代理] ${req.method} ${req.url} -> https://ad.yunmainiu.com/api/cattle-data`);
|
||||
// 伪装请求头，防止被反爬或校验
|
||||
proxyReq.setHeader('Host', 'ad.yunmainiu.com');
|
||||
proxyReq.setHeader('Referer', 'https://ad.yunmainiu.com/');
|
||||
proxyReq.setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');
|
||||
},
|
||||
onProxyRes: (proxyRes, req, res) => {
|
||||
console.log(`[牛只行情代理响应] 状态码: ${proxyRes.statusCode}`);
|
||||
// 允许跨域：覆盖目标服务器的 CORS 设置
|
||||
delete proxyRes.headers['access-control-allow-origin'];
|
||||
proxyRes.headers['Access-Control-Allow-Origin'] = '*';
|
||||
}
|
||||
}));
|
||||
|
||||
// API 代理：必须在静态文件服务之前，将 /api 请求代理到 cattletrack.aiotagro.com
|
||||
app.use('/api', createProxyMiddleware({
|
||||
target: 'https://cattletrack.aiotagro.com',
|
||||
|
||||
34
datav/test_api.js
Normal file
34
datav/test_api.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const https = require('https');
|
||||
|
||||
const options = {
|
||||
hostname: 'ad.yunmainiu.com',
|
||||
port: 443,
|
||||
path: '/api/cattle-data',
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Host': 'ad.yunmainiu.com',
|
||||
'Referer': 'https://ad.yunmainiu.com/',
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
|
||||
}
|
||||
};
|
||||
|
||||
const req = https.request(options, (res) => {
|
||||
console.log('StatusCode:', res.statusCode);
|
||||
console.log('Headers:', res.headers);
|
||||
|
||||
let data = '';
|
||||
res.on('data', (chunk) => {
|
||||
data += chunk;
|
||||
});
|
||||
|
||||
res.on('end', () => {
|
||||
console.log('Body Length:', data.length);
|
||||
console.log('Body Preview:', data.substring(0, 500));
|
||||
});
|
||||
});
|
||||
|
||||
req.on('error', (e) => {
|
||||
console.error(e);
|
||||
});
|
||||
|
||||
req.end();
|
||||
19
datav/test_proxy.js
Normal file
19
datav/test_proxy.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const http = require('http');
|
||||
|
||||
http.get('http://127.0.0.1:8081/api/cattle-market-data', (res) => {
|
||||
console.log('StatusCode:', res.statusCode);
|
||||
console.log('Headers:', res.headers);
|
||||
|
||||
let data = '';
|
||||
res.on('data', (chunk) => {
|
||||
data += chunk;
|
||||
});
|
||||
|
||||
res.on('end', () => {
|
||||
console.log('Body Length:', data.length);
|
||||
console.log('Body Preview:', data.substring(0, 500));
|
||||
});
|
||||
|
||||
}).on('error', (e) => {
|
||||
console.error(e);
|
||||
});
|
||||
46
readme.md
Normal file
46
readme.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# 牛只运输项目
|
||||
|
||||
## 项目简介
|
||||
本项目是一个牛只运输管理系统，旨在提供全方位的牛只运输监控和管理功能。
|
||||
|
||||
## 项目结构
|
||||
- `docs`: 文档目录
|
||||
- `admin-system`: 管理后台目录
|
||||
- `mini-program`: 小程序APP目录
|
||||
- `backend`: 后端服务目录
|
||||
- `website`: 官网目录
|
||||
- `scripts`: 脚本目录
|
||||
|
||||
## 文档索引
|
||||
请参考 `docs` 目录下的详细文档：
|
||||
|
||||
### 需求文档
|
||||
- [整个项目需求文档](docs/整个项目需求文档.md)
|
||||
- [官网需求文档](docs/官网需求文档.md)
|
||||
- [后端管理需求文档](docs/后端管理需求文档.md)
|
||||
- [管理后台需求文档](docs/管理后台需求文档.md)
|
||||
- [小程序APP需求文档](docs/小程序app需求文档.md)
|
||||
|
||||
### 架构文档
|
||||
- [整个项目的架构文档](docs/整个项目的架构文档.md)
|
||||
- [后端架构文档](docs/后端架构文档.md)
|
||||
- [小程序架构文档](docs/小程序架构文档.md)
|
||||
- [管理后台架构文档](docs/管理后台架构文档.md)
|
||||
|
||||
### 详细设计文档
|
||||
- [数据库设计文档](docs/数据库设计文档.md)
|
||||
- [管理后台接口设计文档](docs/管理后台接口设计文档.md)
|
||||
- [小程序APP接口设计文档](docs/小程序app接口设计文档.md)
|
||||
|
||||
### 开发文档
|
||||
- [后端开发文档](docs/后端开发文档.md)
|
||||
- [小程序APP开发文档](docs/小程序app开发文档.md)
|
||||
- [管理后台开发文档](docs/管理后台开发文档.md)
|
||||
- [后端管理开发文档](docs/后端管理开发文档.md)
|
||||
|
||||
### 其他文档
|
||||
- [测试文档](docs/测试文档.md)
|
||||
- [部署文档](docs/部署文档.md)
|
||||
- [运维文档](docs/运维文档.md)
|
||||
- [安全文档](docs/安全文档.md)
|
||||
- [用户手册文档](docs/用户手册文档.md)
|
||||
Reference in New Issue
Block a user