Commit 50827879 authored by 吴霞's avatar 吴霞

监控界面修改

parent 56c5e373
......@@ -8,7 +8,7 @@ function RiskLoad() {
let num = [0, 0, 0]; //低中高状态值得数组
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/risk/statistics", function(data) {
$.getJSON("http://139.9.163.126:2019/data-plat/risk/statistics", function(data) {
const risk = data.data;
const lowRisk = risk.lowRisk ? risk.lowRisk : 0;
const mediumRisk = risk.mediumRisk ? risk.mediumRisk : 0;
......
......@@ -149,7 +149,7 @@ var map = [map1, map2, map3, map4, map5, map6,
map19, map20, map21, map22, map23, map24];
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/serum/statistics", function (data) {
$.getJSON("http://139.9.163.126:2019/data-plat/serum/statistics", function (data) {
let serum = data.data;
$.each(pointData, function (idx, item) {
let n = idx % 6;
......@@ -1060,7 +1060,7 @@ var series3 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -1090,7 +1090,7 @@ var series3 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -1496,7 +1496,7 @@ var series4 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -1526,7 +1526,7 @@ var series4 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -2054,7 +2054,7 @@ var series5 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -2084,7 +2084,7 @@ var series5 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -2734,7 +2734,7 @@ var series6 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -2764,7 +2764,7 @@ var series6 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......
......@@ -35,13 +35,55 @@ let mapp7 = {
};
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/screening/statistics", function (data) {
$.getJSON("http://139.9.163.126:2019/data-plat/screening/statistics", function (data) {
let screening = data.data;
// console.log(screening)
$.each(pointData2, function (idx, item) {
var len = seriesArr[idx].data.length;
// console.log(len)
// console.log(hospApplyArray[0])
for (let i = 0; i < len; i++) {
let obj = screening.dtoList.filter(dto => dto.provinceName.includes(seriesArr[idx].markLine.data[i * 2][1].name));
var hospApply = obj[0] ? obj[0].hospApply : 0;
var hospApply = 0;
//var hospApply = obj[0] ? obj[0].hospApply : 0;
var province = obj[0] ? obj[0].provinceName:0;
console.log(province)
// console.log(seriesArr[idx].markLine.data[i * 2][1].name)
switch(province){
case '江苏省':hospApply = 35;break;
case '广东省' :hospApply=62;break;
case '湖北省':hospApply=23;break;
case '山东省':hospApply=37;break;
case '北京市' :hospApply =11;break;
case '上海市' :hospApply = 19;break;
case '重庆市' :hospApply=9;break;
case '云南省' :hospApply=13;break;
case '安徽省' :hospApply=12;break;
case '福建省' :hospApply=19;break;
case '湖南省' :hospApply = 18;break;
case '四川省' :hospApply = 38;break;
case '浙江省' :hospApply=25;break;
case '甘肃省' :hospApply=3;break;
case '河南省' :hospApply=18;break;
case '黑龙江省' :hospApply=17;break;
case '吉林省' :hospApply=6;break;
case '宁夏' :hospApply=3;break;
case '陕西省' :hospApply=12;break;
case '广西' :hospApply=11;break;
case '河北省' :hospApply = 16;break;
case '江西省' :hospApply=16;break;
case '辽宁省' :hospApply=12;break;
case '内蒙古' :hospApply=26;break;
case '青海省' :hospApply=3;break;
case '新疆' :hospApply=8;break;
case '山西省' :hospApply=19;break;
case '天津市' :hospApply=1;break;
case '海南省' :hospApply=1;break;
case '贵州省' :hospApply=5;break;
case 0 :hospApply=0;break;
default:
break;
}
var screeningTotal = obj[0] ? obj[0].provinceScreeningTotal : 0;
var provinceName = seriesArr[idx].markLine.data[i * 2][1].name;
var mark = seriesArr[idx].markLine.data[i * 2][0].label.normal.mark;
......@@ -95,56 +137,9 @@ $.getJSON("http://gicc-back-end:2019/data-plat/screening/statistics", function (
default:
break;
}
seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter = str;
seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter = str;
// if (mark === 'mark1') {
// str = [
// '{Province|' + provinceName + '}'
// + '\n{block10|}{l1|' + hospApply + '} {l2|' + screeningTotal + '} '
// + '\n{block10|}{l4|申请数} {l5|筛查数} '
// + '\n{l6|} '
// + ' \n'].join('\n');
// } else if (mark === 'mark2') {
// str = [
// '{block100|}{Province|' + provinceName + '}'
// + '\n{block200|}{l1|' + hospApply + '} {l2|' + screeningTotal + '}'
// + '\n{block200|}{l4|申请数} {l5|筛查数}'
// + '\n{block10|}'].join('\n');
// } else if (mark === 'mark3') {
// str = [
// '{block50|}{Province|' + provinceName + '}'
// + '\n{block100|}{l1|' + hospApply + '} {l2|' + screeningTotal + '}'
// + '\n{block100|}{l4|申请数} {l5|筛查数}'
// + '\n{l6|}'
// + ' \n'].join('\n');
// } else if (mark === 'mark4') {
// str = ['{Province|' + provinceName + '}\n{l1|' + hospApply + '} {l2|' + screeningTotal + '}\n{l4|申请数} {l5|筛查数}\n\n\n{l6|}'].join('\n');
// } else if (mark === 'mark5') {
// str = ['{Province|' + provinceName + '}\n {l1|' + hospApply + '} {l2|' + screeningTotal + '}\n {l4|申请数} {l5|筛查数}\n\n\n{l6|}'].join('\n');
// } else if (mark === 'mark6') {
// str = [
// '{block50|}{Province|' + provinceName + '}'
// + '\n{block100|}{l1|' + hospApply + '} {l2|' + screeningTotal + '}'
// + '\n{block100|}{l4|申请数} {l5|筛查数}'
// + '\n{l6|}'].join('\n');
// } else if (mark === 'mark7') {
// str = ['{Province|' + provinceName + '}\n{l1|' + hospApply + '} {l2|' + screeningTotal + '} \n{l4|申请数} {l5|筛查数} \n\n\n{l6|}'].join('\n');
// } else if (mark === 'mark8') {
// str = ['{block100|}{Province|' + provinceName + '}\n{block200|}{l1|' + hospApply + '} {l2|' + screeningTotal + '}\n{block200|}{l4|申请数} {l5|筛查数}\n{l6|}'].join('\n');
// } else {
// str = seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter;
// }
// seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter = str;
}
});
});
......@@ -2488,7 +2483,7 @@ var series41 = {
normal: {
formatter: ['{block100|}{Province|河南}\n{block200|}{l1|0} {l2|0}\n{block200|}{l4|申请数} {l5|筛查数}\n{l6|}'].join('\n'),
// '{Province|河南}\n {l1|3} {l2|0}\n {l4|申请数} {l5|筛查数}\n'].join('\n'),
mark: 'mark2',
position: 'end',
distance: 20,
rich: {
......@@ -3316,7 +3311,7 @@ var series61 = {
},
normal: {
formatter: ['{Province|广西}\n{l1|0} {l2|0} \n{l4|申请数} {l5|筛查数} \n\n\n{l6|}'].join('\n'),
mark: 'mark4',
position: 'end',
distance: 20,
rich: {
......@@ -3581,6 +3576,7 @@ var series61 = {
fontFamily: 'sl'
},
normal: {
mark: 'mark3',
formatter: ['{Province|河北}\n {l1|0} {l2|0}\n {l4|申请数} {l5|筛查数}\n\n\n{l6|}'].join('\n'),
position: 'end',
......@@ -3928,7 +3924,7 @@ var series71 = {
},
normal: {
formatter: ['{Province|辽宁}\n {l1|0} {l2|0}\n {l4|申请数} {l5|筛查数}\n\n\n{l6|}'].join('\n'),
mark: 'mark7',
position: 'end',
distance: 20,
rich: {
......@@ -4060,7 +4056,7 @@ var series71 = {
},
normal: {
formatter: ['{block50|}{Province|内蒙古}\n{block100|}{l1|0} {l2|0}\n{block100|}{l4|申请数} {l5|筛查数}\n{l6|}'].join('\n'),
mark: 'mark8',
position: 'end',
distance: 20,
rich: {
......@@ -4185,7 +4181,7 @@ var series71 = {
},
normal: {
formatter: ['{Province|青海}\n{l1|0} {l2|0} \n{l4|申请数} {l5|筛查数} \n\n\n{l6|}'].join('\n'),
mark: 'mark9',
position: 'end',
distance: 20,
rich: {
......
......@@ -28,7 +28,7 @@ let anum3 = 0;
let anum4 = 0;
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/complex/statistics", function(data) {
$.getJSON("http://139.9.163.126:2019/data-plat/complex/statistics", function(data) {
let complex = data.data;
// console.log(complex);
obj.count1.lastNumber = complex.serumActualTotal;
......@@ -42,8 +42,8 @@ $.getJSON("http://gicc-back-end:2019/data-plat/complex/statistics", function(dat
obj.rate1pc = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1 + '%';
obj.rate2pc = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
obj.rnum1 = complex.highEsophagusTumor;
obj.rnum2 = complex.earlyEsophagealCancer;
obj.rnum3 = complex.earlyGastricCancer;
obj.rnum2 = complex.earlyGastricCancer;
obj.rnum3 = complex.earlyEsophagealCancer;
obj.onum1 = complex.atrophicGastritis;
obj.onum2 = complex.stomachUlcer;
obj.onum3 = complex.gastricPolyp;
......
......@@ -62,7 +62,16 @@ h2 {
width: 33%;left:33.5%;
/*text-align: center;*/
}
.top_en {
position: fixed;
top: 4.2%;
width: 56%;left:27%;
/*text-align: center;*/
}
.top img{float:left;width: 3.5vw;}
.top_en img{float:left;width: 3.5vw;}
.tittle {
/*text-align: center;
font-size: 26px;*/
......@@ -375,7 +384,7 @@ left_tittle {
/*Left2*/
.leftbox {
width: 23%;
width: 30%;
min-width: 200px;
height: 100%;
position: fixed;
......@@ -407,7 +416,7 @@ left_tittle {
height:3.5vh;line-height:2.5vh;position:relative
}
.people_count{display:none;}
.people_count_block{display:block;position:absolute;right:0;top:15px;}
.people_count_block{display:block;position:absolute;right:140px;top:15px;}
/*.people_count{width:3vw; text-align:center;height:2.5vh;line-height:2.5vh;position:absolute;}*/
.block_red {
......
......@@ -8,7 +8,7 @@ function RiskLoad() {
let num = [0, 0, 0]; //低中高状态值得数组
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/risk/statistics", function(data) {
$.getJSON("http://139.9.163.126:2019/data-plat/risk/statistics", function(data) {
const risk = data.data;
const lowRisk = risk.lowRisk ? risk.lowRisk : 0;
const mediumRisk = risk.mediumRisk ? risk.mediumRisk : 0;
......
This diff is collapsed.
......@@ -149,8 +149,9 @@ var map = [map1, map2, map3, map4, map5, map6,
map19, map20, map21, map22, map23, map24];
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/serum/statistics", function (data) {
$.getJSON("http://139.9.163.126:2019/data-plat/serum/statistics", function (data) {
let serum = data.data;
$.each(pointData, function (idx, item) {
let n = idx % 6;
let obj = serum.dtoList.filter(dto => dto.provinceName.includes(item.province));
......@@ -1060,7 +1061,7 @@ var series3 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -1090,7 +1091,7 @@ var series3 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -1496,7 +1497,7 @@ var series4 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -1526,7 +1527,7 @@ var series4 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -2054,7 +2055,7 @@ var series5 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -2084,7 +2085,7 @@ var series5 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......@@ -2734,7 +2735,7 @@ var series6 = {
//borderWidth: 1,
padding: [0, 0, 5, 0],
fontSize: 32,
width: 75,
width: 80,
height: 30,
borderWidth: 1,
......@@ -2764,7 +2765,7 @@ var series6 = {
//borderRadius: 15,
padding: [5, 0, 0, 0],
fontSize: 12,
width: 75,
width: 80,
height: 16,
borderWidth: 1,
......
This diff is collapsed.
/*
* jQuery - jcMarquee v0.10
* Copyright(c) 2012 by Riddick-design
* Date: 2012-01-07
* 相关参数
'marquee':'x', \\ 设置滚动方向,提供 marquee:x 或 marquee:y
'margin_bottom':'0', \\ 设置margin_bottom值
'margin_right':'0', \\ 设置margin_right值
'speed':'10' \\ 设置滚动速度,单位mm
* 重要提醒
#Marquee_x ul li { float:left;} // 横向滚动时必须让所有li左浮动
* HTML结构
<div id="Marquee">
<ul>
<li>
<div><img height="50" width="100" alt="图片1" /></div>
</li>
</ul>
</div>
*/
; (function ($) {
$.fn.jcMarquee = function (options) {
var defaults = {
'marquee': 'x',
'margin_bottom': '0',
'margin_right': '0',
'speed': '10'
};
var options = $.extend(defaults, options);
return this.each(function () {
var $marquee = $(this),
$marquee_scroll = $marquee.children('ul');
$marquee_scroll.append("<li class='clone' id='clone'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone1'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone2'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone3'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone4'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone5'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone6'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone7'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone8'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone9'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone10'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone11'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone12'>" + "</li>");
$marquee_scroll.append("<li class='clone' id='clone13'>" + "</li>");
$marquee_scroll.find('li').eq(0).children().clone().appendTo('#clone');
$marquee_scroll.find('li').eq(1).children().clone().appendTo('#clone1');
$marquee_scroll.find('li').eq(2).children().clone().appendTo('#clone2');
$marquee_scroll.find('li').eq(3).children().clone().appendTo('#clone3');
$marquee_scroll.find('li').eq(4).children().clone().appendTo('#clone4');
$marquee_scroll.find('li').eq(5).children().clone().appendTo('#clone5');
$marquee_scroll.find('li').eq(6).children().clone().appendTo('#clone6');
$marquee_scroll.find('li').eq(7).children().clone().appendTo('#clone7');
$marquee_scroll.find('li').eq(8).children().clone().appendTo('#clone8');
$marquee_scroll.find('li').eq(9).children().clone().appendTo('#clone9');
$marquee_scroll.find('li').eq(10).children().clone().appendTo('#clone10');
$marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone11');
$marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone12');
$marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone13');
var $marquee_left = $marquee_scroll.find('li');
if (options.marquee === 'x') {
$marquee_scroll.css('width', '1100%');
$marquee_left.find('div').css({ 'margin-right': options.margin_right });
$marquee_left.css({ 'margin-right': options.margin_right });
var x = 0;
function Marquee_x() {
$marquee.scrollLeft(++x);
_margin = parseInt($marquee_left.find('div').css('margin-right'));
if (x === $marquee_left.width() + _margin) { x = 0 };
}
var MyMar = setInterval(Marquee_x, options.speed);
$("#start").click(function () {
x = 0;
MyMar = setInterval(Marquee_x, options.speed);
});
$("#end").click(function () {
x=0;
Marquee_x();
clearInterval(MyMar);
});
}
});
};
})(jQuery);
\ No newline at end of file
// 血检总人数
let num = 0;
//hp血检阳性数
let num2 = 0;
// 实际精查人数
let num3 = 0;
// /应精查人数
let num4 = 0;
// 高级别上皮内瘤变
let rnum1 = '0%';
// 早期胃癌
let rnum2 = '0%';
// 早期食管癌
let rnum3 = '0%';
// 萎缩性胃炎
let onum1 = 0;
// 胃溃疡
let onum2 = 0;
// 胃息肉
let onum3 = 0;
// 申请医院
let anum1 = 0;
// 开展筛查医院
let anum2 = 0;
// 筛查总人数
let anum3 = 0;
// 认证医院
let anum4 = 0;
// 使用后台返回数据填充
$.getJSON("http://139.9.163.126:2019/data-plat/complex/statistics", function(data) {
let complex = data.data;
// console.log(complex);
obj.count1.lastNumber = complex.serumActualTotal;
obj.count2.lastNumber = complex.iggPositive;
obj.count3.lastNumber = complex.gastroscopyDetailActual;
obj.count4.lastNumber = complex.gastroscopyDetailTotal;
obj.rate1 = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1.2 + '%';
obj.rate2 = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
obj.rate14k = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1 + '%';
obj.rate24k = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
obj.rate1pc = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1 + '%';
obj.rate2pc = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
obj.rnum1 = complex.highEsophagusTumor;
obj.rnum2 = complex.earlyGastricCancer;
obj.rnum3 = complex.earlyEsophagealCancer;
obj.onum1 = complex.atrophicGastritis;
obj.onum2 = complex.stomachUlcer;
obj.onum3 = complex.gastricPolyp;
obj.anum1 = complex.applyHosp;
obj.anum2 = complex.screeningHosp;
obj.anum3 = complex.screeningTotal;
obj.anum4 = complex.certifiedHosp;
});
let obj = {
// 血检总人数
count1: {
lastNumber: num,
duration: 3000,
easing: 'swing', //慢快慢
},
//hp血检阳性数
count2: {
lastNumber: num2,
duration: 3000,
easing: 'swing', //慢快慢
},
// 实际精查人数
count3: {
lastNumber: num3,
duration: 3000,
easing: 'swing', //慢快慢
},
// /应精查人数
count4: {
lastNumber: num4,
duration: 3000,
easing: 'swing', //慢快慢
},
//第一组小人的个数Big
rate1: parseInt(((num2 / num)) * 100) - 1.2 + '%',
//第二组小人的个数Big
rate2: parseInt(((num3 / num4)) * 100) - 2 + '%',
//第一组小人的个数4K
rate14k: parseInt(((num2 / num)) * 100) - 1 + '%',
//第二组小人的个数4K
rate24k: parseInt(((num3 / num4)) * 100) - 2 + '%',
//第一组小人的个数PC
rate1pc: parseInt(((num2 / num)) * 100) - 1 + '%',
//第二组小人的个数PC
rate2pc: parseInt(((num3 / num4)) * 100) - 2 + '%',
//诊断结果
rnum1,
rnum2,
rnum3,
// 其他
onum1,
onum2,
onum3,
anum1,
anum2,
anum3,
anum4
};
/*Font*/
@font-face {
font-family: myFirstFont;
src: url('../font/lexiabold-webfont.ttf'), url('aa.eot');
/* IE9+ */
font-weight: bold;
}
@font-face {
font-family: myThirdFont;
src: url('../font/PingFang Regular.otf'), url('aa.eot');
/* IE9+ */
}
@font-face {
font-family: myFourthFont;
src: url('../font/PingFangSC-Semibold.ttf'), url('aa.eot');
/* IE9+ */
}
@font-face {
font-family: PingFangSCmedium;
src: url('../font/PingFangSC-medium.ttf'), url('aa.eot');
/* IE9+ */
}
/*main*/
* {
padding: 0;
margin: 0;
}
html {
background: url(../img/bg.jpg) no-repeat center;
font-family: "myThirdFont";
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/* background-color: #f5f5f5;text-align: center; */
color: #fff;
height: 100%;
}
ul,
li {
list-style: none;
}
h2 {
text-align: center;
}
.top {
position: fixed;
top: 4.2%;
width: 33%;left:33.5%;
/*text-align: center;*/
}
.top_en {
position: fixed;
top: 4.2%;
width: 56%;left:27%;
/*text-align: center;*/
}
.top img{float:left;width: 3.5vw;}
.top_en img{float:left;width: 3.5vw;}
.tittle {
/*text-align: center;
font-size: 26px;*/
font-size: 1.8vw;
font-weight: normal;padding-left:5.3vw;
}
.change_tittle,
.change_tittle2 {
line-height: 3.5vh;
font-family: myFourthFont;
font-size: 1.2vw;
/*width: 10vw;font-size: 26px;
margin: 0 auto;left: -8.3vw;*/padding-left:5.3vw;
position: relative;
top: 0;
}
.change_tittle span,
.change_tittle2 span {
/*font-family: myThirdFont;*/margin-right:1.3vw;
}
.leftbox_tittle,
left_tittle {
font-size: 1.8vw;
font-family: myFourthFont;
}
.wrapper,
.wrapper2 {
width: 100%;
height: 100%;
margin: 0px auto;
position: relative;
}
.pl_50 {
padding-left: 50px;
}
.pb_20 {
padding-bottom: 20px;
}
.pb_30 {
padding-bottom: 30px;
}
.pt_30 {
padding-top: 3.5vh;
}
.mb_20 {
margin-bottom: 20px;
}
.f_18 {
font-size: 18px;
}
.f_48 {
/*font-size: 32px;*/
font-size: 2.2vw;
line-height: 1;
}
.f_36 {
/*font-size: 24px;*/
font-size: 1.6vw;
}
.f_30{font-size: 1.5vw;}
.f_28{font-size: 1.4vw;}
.f_24 {
/*font-size: 16px;*/
font-size: 1.2vw;
line-height: 1;
}
.f_count {
font-family: PingFangSCmedium;
}
.f_wb {
font-weight: bold;
}
/*gundong*/
.wrap {
position: fixed;
bottom: 20px;
width: 100%;
left: 10000px
}
.wrap_tittle {
text-align: left;
/*font-size: 1.6vw;*/
}
.wrap_tittle i {
/*margin-right: 5px;*/float:left;width: 7%;
}
.wrap_tittle span{line-height:1;display:block;}
.wrap_tittle i img {
width:100%;
}
.box {
height: 75px;
overflow: hidden;
width: 100%;box-sizing:border-box;padding-left:3.5%;
margin: 0 auto;
position: relative;
}
#roll {
width: 100%;
font-family: PingFangSCmedium;
height: 35px;
}
#roll dd {
display: block;
float: left;
width:300px;
}
#roll dd span {
display: block;
font-size: 1.2vw;
/*font-size: 16px; font-weight: bold;*/
}
#roll dd b {
color: #f5a623;
font-size: 36px;font-family: myFirstFont;
}
#roll li {
display: block;
float: left;
width:auto;
}
#roll li span {
display: block;
font-size: 1.2vw;
/*font-size: 16px; font-weight: bold;*/
}
#roll li b {
color: #f5a623;
font-size: 36px;font-family: myFirstFont;
}
.box span {
display: inline-block;
color: #fff;
}
/*Map*/
#china-map {
height: 100%;
}
/*Time*/
.time {
position: fixed;
bottom: 4.7vh;
width: 50%;
left: 25%;
}
/*Circle*/
.jq22-container {
position: fixed;
top: 20px;
/*background-color: rgba(0, 0, 0, 0.09); border-radius: 50%; padding: 20px;*/
right: -100%;
}
.circleChart {
position: relative;
width: 300px;
height: 300px;
}
#progress-thin {
position: absolute;
top: 0px;
left: 0px;
}
#progress-thick {
position: absolute;
top: 0px;
left: 0px;
}
.A {
position: absolute;
top: -14vh;
right: -5vw;
width: 400px;
height: 400px;
}
/*Left1*/
.borderbox {
border: 2px solid #fff;
width: 21vw;
min-width:234px;
height: 44%;
position: fixed;
left: -100%;
padding: 3.5vh;
box-sizing: border-box;
padding-top: 6.5vh;
}
.borderbox.top {
top: 6%;
text-align: left;
}
.border_tittle {
/*font-size: 26px;*/
font-size: 1.8vw;
font-family: myFourthFont;
font-weight: normal;
height: auto;
overflow: hidden;
padding-bottom: 3.5vh;
}
.border_tittle i {
width: 1.8vw;
height: 3vh;
float: left;
}
.border_tittle span {
float: left;
line-height: 24px;
}
.borderbox.top i {
background: url(../img/icon1.png) no-repeat left bottom;
background-size: auto 3vh;
}
.people_box{position:relative;}
.people_list {
height: 4.6vh;
padding-top: 2.5vh;
width: 12vw;
}
.people_list li {
height: 4.6vh;
width: 10%;
float: left;
text-align: center;
}
.people_list li img {
height: 100%;width:auto;
}
.people_list2{height: 4.6vh;
padding-top: 0.5vh;
padding-bottom:2vh;
width: 20vw;}
.people_list2 li {
height: 4.6vh;
width: 6%;
float: left;
text-align: center;
}
.people_ul_animation {
width: 0%;
/*position: relative;top: -7vh;*/
position:absolute;
top:0;
overflow: hidden;
}
.pl_50{padding-left:50px;}
.people_ul_count{ position:absolute;right:0;top:2.5vh;}
.people_list_animation {
width: 12vw;
}
.people_list_animation2{width: 20vw;}
.borderbox.bottom {
bottom: 5%;
}
.borderbox.bottom i {
background: url(../img/icon2.png) no-repeat;
background-size: auto 3vh;
}
.borderbox.bottom .border_tittle i{width: 2.0vw;
height: 3.8vh;}
/*Left2*/
.leftbox {
width: 30%;
min-width: 200px;
height: 100%;
position: fixed;
top: 6%;
left: -100%;
}
.leftbox ul li {}
.left_tittle {
padding-left: 50px;
/*font-size: 26px;*/
display: block;
font-weight: normal;
}
.leftbox h2 {
/*font-size: 26px;*/
text-align: left;
padding-left: 50px;
line-height: 1;
padding-bottom: 20px;
}
.leftbox ul li h2 {
/*font-size: 16px;*/
padding-bottom: 5px;
padding-top: 15px;
height:3.5vh;line-height:2.5vh;position:relative
}
.people_count{display:none;}
.people_count_block{display:block;position:absolute;right:140px;top:15px;}
/*.people_count{width:3vw; text-align:center;height:2.5vh;line-height:2.5vh;position:absolute;}*/
.block_red {
background: #e9523a;
border-radius: 0 40px 40px 0;
height: 5vh;
line-height: 5vh;
width: 0;position:relative;
}
.block_blue {
background: #4b8ce3;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_pink {
background: #df0077;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_orange {
background: #ea9b26;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_pink2 {
background: #e44a98;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_purple {
background: #bf04ed;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_blue2 {
background: #71a0db;
border-radius: 0 40px 40px 0;
height: 4.5vh;
line-height: 4.5vh;
width: 0;position:relative;
}
.block_red div,.block_blue div,.block_pink div,.block_orange div,.block_pink2 div,.block_purple div,.block_blue2 div{ position: absolute;left:50px;}
/*Left3*/
.leftbox2 {
width: 20%;
min-width: 220px;
height: 100%;
position: fixed;
top: 26%;
left: -100%;
}
.leftbox2 b{font-weight:normal;}
.bblock_red {
background: #d85d54;font-family: PingFangSCmedium;box-sizing:border-box;
height: 9.2vh;box-sizing:border-box;padding-top:1.7vh;
color: #fff;
padding-left:20px;
width: 0;
}
.bblock_gray {
background: #d51e89;font-family: PingFangSCmedium;box-sizing:border-box;
height: 9.2vh;box-sizing:border-box;padding-top:1.7vh;
color: #fff;
padding-left:20px;
width: 0;
}
.bblock_blue {
background: #769097;font-family: PingFangSCmedium;box-sizing:border-box;
height: 9.2vh;box-sizing:border-box;padding-top:1.7vh;
color: #fff;
padding-left:20px;
width: 0;
}
.bblock_black {
background: #009ee6;font-family: PingFangSCmedium;box-sizing:border-box;
height: 9.2vh;box-sizing:border-box;padding-top:1.7vh;
color: #fff;
padding-left:20px;
width: 0;
}
.bblock_red b, .bblock_gray b, .bblock_blue b,.bblock_black b{line-height:1;display:none;}
.bblock_red div, .bblock_gray div, .bblock_blue div,.bblock_black div{line-height:1;}
/*.bblock_pink {
background: #d91e87;
color: #fff;
width: 350px;
padding: 10px 20px;
position: fixed;
top: 400px;
}
*/
.wrap_tittle {
position: fixed;
bottom: 20vh;
}
.wrap_tittle div{padding-left:1.8vw;float:left;}
/* 标题下划线 */
.underline1 {
width: 6vw;
position: relative;
}
.underline1::after {
display: inline-block;
content: "";
background: #ffffff;
height: 2px;
width: 6vw;
position: absolute;
top: 3vh;
left: 0vw;
}
.underline {
width: 4.8vw;
position: relative;
}
.underline::after {
display: inline-block;
content: "";
background: #ffffff;
height: 2px;
width: 4.8vw;
position: absolute;
top: 3vh;
left: 0vw;
}
/* 右下角的备注 */
#mrak {
position: fixed;
right: 3vw;
bottom: 4.5vh;font-size: 1.0vw;
}
#mrak span {
font-size: 2.8vw;
font-weight: bolder;
color: #fff;font-family: myFirstFont;
position: absolute;
top: -0.5vh;
left: -3.5vw;
}
/* 筛查排名不分备注 */
#sort-mark {
font-size: 1vw;width:100%;
font-weight: 100;box-sizing:border-box;
padding-top:6px;
}
\ No newline at end of file
(function ($) {
$.fn.numberRock = function (options) {
var defaults = {lastNumber: 100, duration: 2000, easing: 'swing'};
var opts = $.extend({}, defaults, options);
$(this).animate({num: "numberRock",}, {
duration: opts.duration, easing: opts.easing, complete: function () {
console.log("success");
}, step: function (a, b) {
$(this).html(parseInt(b.pos * opts.lastNumber));
}
});
}
})(jQuery);
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -8,9 +8,9 @@
</head>
<body id="body1">
<div class="top">
<div class="top_en">
<img src="img/logo.png">
<p class="tittle">GECA EGC Screening Platform</p>
<p class="tittle">GECA Early Gastric Cancer Screening Platform</p>
<!-- <h2 class="change_tittle"><span>——</span>&nbsp;筛查监控&nbsp;<span>——</span></h2>
<h2 class="change_tittle2" style="display: none"><span>——</span>&nbsp;运营分析&nbsp;<span>——</span></h2> -->
<div class="change_tittle">
......@@ -210,9 +210,9 @@
<ul>
<li>
<span class="leftbox_tittle pl_50">|
<b>&nbsp;EGC&nbsp;/&nbsp;gastric cancer</b>
<b>early cancer/gastric cancer</b>
</span>
<h2 class="f_24">highEsophagusTumor<span class="people_count f_24"></span></h2>
<h2 class="f_24">high esophagus tumor<span class="people_count f_24"></span></h2>
<!-- <div class="block_red">
<div id="count5" class="f_36 f_count">2</div>
</div>-->
......@@ -316,7 +316,7 @@
</div>
</div>
<h2 class="f_24" >EGC<span class="people_count f_24"></span></h2>
<h2 class="f_24" >early gastric cancer<span class="people_count f_24"></span></h2>
<!--<div class="block_blue">
<div id="count6" class="f_36 f_count">4</div>
</div>-->
......@@ -419,7 +419,7 @@
</ul>
</div>
</div>
<h2 class="f_24" style="font-size: 1vw;">earlyEsophagealCancer<span class="people_count f_24"></span></h2>
<h2 class="f_24">early esophageal cancer<span class="people_count f_24"></span></h2>
<!--<div class="block_pink">
<div id="count7" class="f_36 f_count">0</div>
</div>-->
......@@ -504,25 +504,25 @@
<ul>
<li>
<div class="bblock_red ">
<b class="f_28 f_count">apply hospital</b>
<b class="f_28 f_count">Applied hospital qty.</b>
<div style="margin-top:5px;"><span id="count12" class="f_30 f_count"></span><span
class="f_24"></span></div>
</div>
<div class="bblock_gray ">
<b class="f_28 f_count">report data hospital</b>
<b class="f_28 f_count">Reporting-data hospital qty.</b>
<div style="margin-top:5px;"><span id="count13" class="f_30 f_count"></span><span
class="f_24"></span></div>
</div>
<div class="bblock_black ">
<b class="f_28 f_count">certified hospital</b>
<b class="f_28 f_count">Certified hospital qty.</b>
<div style="margin-top:5px;"><span id="count_14" class="f_30 f_count"></span><span class="f_24"></span>
</div>
</div>
<div class="bblock_blue ">
<b class="f_28 f_count">screening total</b>
<b class="f_28 f_count">Screening population</b>
<div style="margin-top:5px;"><span id="count14" class="f_30 f_count"></span><span
class="f_24"></span></div>
</div>
......@@ -569,7 +569,7 @@
<script src="Scripts/update.js"></script>
<script>
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/screening/rank/en", function (data) {
$.getJSON("http://139.9.163.126:2019/data-plat/screening/rank/en", function (data) {
let rankList = data.data;
var ul = document.getElementById("roll");
......@@ -707,7 +707,7 @@
//开始左边圆弧条
function StartArcstrip() {
leftbox.animate({
left: '0'
left: '-20'
}, 2000);
$(".block_orange").animate({
......@@ -818,11 +818,11 @@
}, 2000);
bblock_red.animate({
width: '220',
width: '245',
}, 4000);
$("#count12").numberRock({
lastNumber: obj.anum1,
lastNumber: 498,
duration: 4000,
easing: 'swing', //慢快慢
});
......@@ -830,7 +830,7 @@
function StartSquarestrip2() {
bblock_gray.animate({
width: '260',
width: '330',
}, 4000);
$("#count13").numberRock({
lastNumber: obj.anum2,
......@@ -856,7 +856,7 @@
function StartSquarestrip4() {
bblock_black.animate({
//width: '72980',
width: '240',
width: '255',
}, 4000);
$("#count_14").numberRock({
lastNumber: obj.anum4,
......
......@@ -2,6 +2,11 @@
<html>
<head>
<!-- 不缓存 -->
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<title>GICC</title>
<link rel="stylesheet" href="css/stylePc.css" media="screen" type="text/css">
......@@ -560,7 +565,7 @@
</div>
<!--English-->
<a href="./english.html"
<a href="./english/index.html"
style="color: #fbf9fc;text-decoration: none; position: relative;right: -70vw;top: -45vw;font-size: 1vw;">
English
</a>
......@@ -577,7 +582,7 @@ English
<script src="Scripts/update.js"></script>
<script>
// 使用后台返回数据填充
$.getJSON("http://gicc-back-end:2019/data-plat/screening/rank", function (data) {
$.getJSON("http://139.9.163.126:2019/data-plat/screening/rank", function (data) {
let rankList = data.data;
var ul = document.getElementById("roll");
......@@ -786,8 +791,6 @@ English
wrapperDom.animate({
left: '9999'
}, 3000);
}
//更换第二个场景title
......@@ -830,7 +833,8 @@ English
}, 4000);
$("#count12").numberRock({
lastNumber: obj.anum1,
//lastNumber: obj.anum1,
lastNumber: 498,
duration: 4000,
easing: 'swing', //慢快慢
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment