数据驾驶舱后台动态增删
This commit is contained in:
parent
ce989bd7a8
commit
b43f72c5e1
|
|
@ -149,9 +149,11 @@ public class ApiStatisticsVoterController extends ApiBaseController {
|
|||
@GetMapping("people_condition/analyze")
|
||||
public void peopleConditionAnalyze() {
|
||||
String countStr = ConfigUtils.getStr("screen_vote_handle_analyze");
|
||||
if (StrUtil.isNotBlank(countStr)) {
|
||||
String statusStr = ConfigUtils.getStr("screen_vote_handle_analyze_status");
|
||||
if (StrUtil.isNotBlank(countStr)&&StrUtil.isNotBlank(statusStr)) {
|
||||
String[] countArr = countStr.split(",");
|
||||
Dict dict = Dict.create().set("countArr", countArr);
|
||||
String[] statusArr = statusStr.split(",");
|
||||
Dict dict = Dict.create().set("countArr", countArr).set("statusArr",statusArr);
|
||||
render(Ret.ok().data(dict));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,4 +11,6 @@ public class ShowVoterBo {
|
|||
String categoryCondition;
|
||||
String hotKey;
|
||||
String handleAnalyze;
|
||||
String handleAnalyzeStatus;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ public class ShowController extends BaseAdminController {
|
|||
Config cycleRateConfig = getConfigByCode("screen_activity_cycle_rate");
|
||||
Config sameRateConfig = getConfigByCode("screen_activity_same_rate");
|
||||
|
||||
model.addAttribute("channel", channelConfig.getParamValue());
|
||||
model.addAttribute("peopleCount", peopleCountConfig.getParamValue());
|
||||
model.addAttribute("channelRate", channelRateConfig.getParamValue());
|
||||
model.addAttribute("cycleRate", cycleRateConfig.getParamValue());
|
||||
model.addAttribute("sameRate", sameRateConfig.getParamValue());
|
||||
model.addAttribute("channel", channelConfig.getParamValue().split(","));
|
||||
model.addAttribute("channelRate", channelRateConfig.getParamValue().split(","));
|
||||
model.addAttribute("peopleCount", peopleCountConfig.getParamValue().split(","));
|
||||
model.addAttribute("cycleRate", cycleRateConfig.getParamValue().split(","));
|
||||
model.addAttribute("sameRate", sameRateConfig.getParamValue().split(","));
|
||||
|
||||
return "modules/rddb/show/contact.html";
|
||||
}
|
||||
|
|
@ -66,22 +66,24 @@ public class ShowController extends BaseAdminController {
|
|||
Config categoryConditionConfig = getConfigByCode("screen_vote_category_condition");
|
||||
Config hotKeyConfig = getConfigByCode("screen_vote_hot_key");
|
||||
Config handleAnalyzeConfig = getConfigByCode("screen_vote_handle_analyze");
|
||||
Config handleAnalyzeStatusConfig = getConfigByCode("screen_vote_handle_analyze_status");
|
||||
|
||||
model.addAttribute("averageTime", averageTimeConfig.getParamValue());
|
||||
model.addAttribute("ontimeRate", ontimeRateConfig.getParamValue());
|
||||
model.addAttribute("satisfactionRate", satisfactionRateConfig.getParamValue());
|
||||
model.addAttribute("category", categoryConfig.getParamValue());
|
||||
model.addAttribute("categoryCondition", categoryConditionConfig.getParamValue());
|
||||
model.addAttribute("hotKey", hotKeyConfig.getParamValue());
|
||||
model.addAttribute("handleAnalyze", handleAnalyzeConfig.getParamValue());
|
||||
model.addAttribute("category", categoryConfig.getParamValue().split(","));
|
||||
model.addAttribute("categoryCondition", categoryConditionConfig.getParamValue().split(","));
|
||||
model.addAttribute("hotKey", hotKeyConfig.getParamValue().split(","));
|
||||
model.addAttribute("handleAnalyze", handleAnalyzeConfig.getParamValue().split(","));
|
||||
model.addAttribute("handleAnalyzeStatus", handleAnalyzeStatusConfig.getParamValue().split(","));
|
||||
return "modules/rddb/show/voter.html";
|
||||
}
|
||||
|
||||
@GetMapping("office")
|
||||
public String office(Model model) {
|
||||
Config config = getConfigByCode("screen_office_country_rank");
|
||||
model.addAttribute("region", config.getParamValue());
|
||||
model.addAttribute("regionNum", config.getRemarks());
|
||||
model.addAttribute("region", config.getParamValue().split(","));
|
||||
model.addAttribute("regionNum", config.getRemarks().split(","));
|
||||
return "modules/rddb/show/office.html";
|
||||
}
|
||||
|
||||
|
|
@ -120,6 +122,7 @@ public class ShowController extends BaseAdminController {
|
|||
Config categoryConditionConfig = getConfigByCode("screen_vote_category_condition");
|
||||
Config hotKeyConfig = getConfigByCode("screen_vote_hot_key");
|
||||
Config handleAnalyzeConfig = getConfigByCode("screen_vote_handle_analyze");
|
||||
Config handleAnalyzeStatusConfig = getConfigByCode("screen_vote_handle_analyze_status");
|
||||
|
||||
averageTimeConfig.setParamValue(bo.getAverageTime());
|
||||
ontimeRateConfig.setParamValue(bo.getOntimeRate());
|
||||
|
|
@ -128,6 +131,7 @@ public class ShowController extends BaseAdminController {
|
|||
categoryConditionConfig.setParamValue(bo.getCategoryCondition());
|
||||
hotKeyConfig.setParamValue(bo.getHotKey());
|
||||
handleAnalyzeConfig.setParamValue(bo.getHandleAnalyze());
|
||||
handleAnalyzeStatusConfig.setParamValue(bo.getHandleAnalyzeStatus());
|
||||
|
||||
boolean flag1 = configService.updateById(averageTimeConfig);
|
||||
boolean flag2 = configService.updateById(ontimeRateConfig);
|
||||
|
|
@ -136,9 +140,10 @@ public class ShowController extends BaseAdminController {
|
|||
boolean flag5 = configService.updateById(categoryConditionConfig);
|
||||
boolean flag6 = configService.updateById(hotKeyConfig);
|
||||
boolean flag7 = configService.updateById(handleAnalyzeConfig);
|
||||
boolean flag8 = configService.updateById(handleAnalyzeStatusConfig);
|
||||
|
||||
CacheUtils.clear(SysCacheName.SYS_DICT_CACHE);
|
||||
render((flag1 && flag2 && flag3 && flag4 && flag5 && flag6 && flag7) ? Ret.ok() : Ret.fail("操作失败"));
|
||||
render((flag1 && flag2 && flag3 && flag4 && flag5 && flag6 && flag7 && flag8) ? Ret.ok() : Ret.fail("操作失败"));
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,374 @@
|
|||
|
||||
.menu{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #0F1A46;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding:0 5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu .iconfont{
|
||||
font-size: 20px;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
.menu a{
|
||||
color: #fff;
|
||||
}
|
||||
.menu .active{
|
||||
color: #00E9F9;
|
||||
}
|
||||
.allname{
|
||||
background: url('../img/namebg.png') no-repeat;
|
||||
height: 60px;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
.charts{
|
||||
padding:0 5% 30px;
|
||||
}
|
||||
.charts>div{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.charts>div .name{
|
||||
color: #fff;
|
||||
background: url('../img/title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
padding:0 10px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.circle{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.circle>div{
|
||||
flex: 1;
|
||||
}
|
||||
.circle p{
|
||||
text-align:center;
|
||||
color:#fff;
|
||||
}
|
||||
.map{
|
||||
position: relative;
|
||||
}
|
||||
.map>img{
|
||||
width: 100%;
|
||||
}
|
||||
.dimap{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dimap img{
|
||||
width: 12px;
|
||||
}
|
||||
.dimap>div{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
@keyframes beats{
|
||||
0% {
|
||||
top: -10px;
|
||||
}
|
||||
25%{
|
||||
top: -5px;
|
||||
}
|
||||
50%{
|
||||
top: 0;
|
||||
}
|
||||
75%{
|
||||
top: -5px;
|
||||
}
|
||||
100%{
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
.dimap .dong{
|
||||
animation-name: beats;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.item1{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: #07216A;
|
||||
bottom: 50px;
|
||||
width: 240px;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
.item2{
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
background: rgba(8,37,117,.5);
|
||||
top: 50px;
|
||||
width: 250px;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
}
|
||||
.item2>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item2>div .icon{
|
||||
background: url('../img/blue.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 70px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item2>div .red{
|
||||
background: url('../img/red.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item2>div .desc{
|
||||
padding:10px 15px;
|
||||
border-left: 1px solid #1D5ECD;
|
||||
line-height: 30px;
|
||||
}
|
||||
.item1>div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item1>div div{
|
||||
width: 50%;
|
||||
margin-top: 15px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.item1>div div span{
|
||||
color: #F8CD03;
|
||||
}
|
||||
.box>div{
|
||||
display: none;
|
||||
}
|
||||
.page1 .numbox{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 0 15px 5%;
|
||||
background: url('../img/kuang.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page1 .numbox>div{
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
color: #B2DCF9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page1 .numbox>div span:first-child{
|
||||
color: #CBCCD3;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page1 .numbox>div span:last-child{
|
||||
color: #0BBFCA;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page1 .item{
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding:7px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page1 .wai{
|
||||
border:1px solid #353B52;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page1 .item>div:first-child{
|
||||
text-align: center;
|
||||
}
|
||||
.page1 .item img{
|
||||
width: 128px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page1 .item .info{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.page1 .item .info p{
|
||||
width: 50%;
|
||||
opacity: .7;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.page1 .item .btn{
|
||||
background: url('../img/border.png') no-repeat;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.page3 .info{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page3 .info>div{
|
||||
border-left: 2px solid #8F93A4;
|
||||
background: linear-gradient(to right, #102254 , #0C1948);
|
||||
width: 48%;
|
||||
padding:5px 8px;
|
||||
box-sizing: border-box;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.page3 .info>div span:first-child{
|
||||
font-size: 18px;
|
||||
color: #0BBFCA;
|
||||
}
|
||||
.page3 .info>div span:last-child{
|
||||
font-size: 14px;
|
||||
}
|
||||
.page3 .info>div p:last-child{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page3 .redian{
|
||||
background:url('../img/kuang2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.page4 .info{
|
||||
color: #7882BC;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page4 .info>div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
background:url('../img/kuang2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 20px;
|
||||
padding:20px 10px;
|
||||
}
|
||||
.page4 .info>div p{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.page4 .info span{
|
||||
color: #E34561;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page4 .list{
|
||||
color: #fff;
|
||||
}
|
||||
.page4 .list .head{
|
||||
display: flex;
|
||||
color: #7882BC;
|
||||
border-bottom: 2px solid #46BAB1;
|
||||
line-height: 50px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page4 .list .head>p{
|
||||
text-align: center;
|
||||
}
|
||||
.page4 .list .head>p:last-child{
|
||||
width: 30%;
|
||||
}
|
||||
.page4 .list .head>p:first-child,.page4 .list .box>div p:first-child{
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.page4 .list .box{
|
||||
height: 250px;
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page4 .list .box>div{
|
||||
display: flex;
|
||||
line-height: 40px;
|
||||
color: #eee;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page4 .list .box>div p:last-child{
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.xq{
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 800px;
|
||||
background: url('../img/bg.jpg') no-repeat;
|
||||
top: 140px;
|
||||
left: 5%;
|
||||
display: none;
|
||||
z-index: 11;
|
||||
padding:50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zhe{
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
position: absolute;
|
||||
width:1920px;
|
||||
height: 1080px;
|
||||
z-index: 10;
|
||||
}
|
||||
.xq>div{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.xq .graph{
|
||||
color: #fff;
|
||||
width:30%;
|
||||
}
|
||||
.xq .graph>p{
|
||||
font-size: 20px;
|
||||
padding:10px 30px;
|
||||
background: linear-gradient(to right,rgba(9,33,143,1),rgba(16,29,71,.1));
|
||||
}
|
||||
.xq .graph>div{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.xq .graph .listitem{
|
||||
line-height: 50px;
|
||||
padding:0 20px;
|
||||
}
|
||||
.xq .graph .listitem:nth-child(2n){
|
||||
background: #1B375E;
|
||||
}
|
||||
.xq .graph .listitem span:first-child{
|
||||
margin-right: 15px;
|
||||
}
|
||||
.xq .graph .wen{
|
||||
line-height: 30px;
|
||||
padding:0 20px;
|
||||
}
|
||||
.xq .graph .wen p{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,606 @@
|
|||
/**
|
||||
* Swiper 6.3.5
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2020 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: October 30, 2020
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: swiper-icons;
|
||||
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-theme-color: #007aff
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-wrapper {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
transition-property: transform;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform: translate3d(0px, 0, 0)
|
||||
}
|
||||
|
||||
.swiper-container-multirow>.swiper-wrapper {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.swiper-container-multirow-column>.swiper-wrapper {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.swiper-container-free-mode>.swiper-wrapper {
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition-property: transform
|
||||
}
|
||||
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto
|
||||
}
|
||||
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
transition-property: transform, height
|
||||
}
|
||||
|
||||
.swiper-container-3d {
|
||||
perspective: 1200px
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-cube-shadow,
|
||||
.swiper-container-3d .swiper-slide,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-wrapper {
|
||||
transform-style: preserve-3d
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
|
||||
}
|
||||
|
||||
.swiper-container-css-mode>.swiper-wrapper {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none
|
||||
}
|
||||
|
||||
.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
|
||||
scroll-snap-align: start start
|
||||
}
|
||||
|
||||
.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type: x mandatory
|
||||
}
|
||||
|
||||
.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
|
||||
scroll-snap-type: y mandatory
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-navigation-size: 44px
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: calc(var(--swiper-navigation-size)/ 44 * 27);
|
||||
height: var(--swiper-navigation-size);
|
||||
margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background: #CCCCCC;
|
||||
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-disabled,
|
||||
.swiper-button-prev.swiper-button-disabled {
|
||||
opacity: .35;
|
||||
cursor: auto;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
font-family: swiper-icons;
|
||||
font-size: var(--swiper-navigation-size);
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
font-variant: initial;
|
||||
line-height: 1
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
left: 10px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.swiper-button-prev:after,
|
||||
.swiper-container-rtl .swiper-button-next:after {
|
||||
content: 'prev'
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
right: 10px;
|
||||
left: auto
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-container-rtl .swiper-button-prev:after {
|
||||
content: 'next'
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-white,
|
||||
.swiper-button-prev.swiper-button-white {
|
||||
--swiper-navigation-color: #ffffff
|
||||
}
|
||||
|
||||
.swiper-button-next.swiper-button-black,
|
||||
.swiper-button-prev.swiper-button-black {
|
||||
--swiper-navigation-color: #000000
|
||||
}
|
||||
|
||||
.swiper-button-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: .3s opacity;
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-bullets,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-pagination-fraction {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic {
|
||||
overflow: hidden;
|
||||
font-size: 0
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transform: scale(.33);
|
||||
position: relative
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
|
||||
transform: scale(.66)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
|
||||
transform: scale(.33)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
|
||||
transform: scale(.66)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
|
||||
transform: scale(.33)
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #000;
|
||||
opacity: .2
|
||||
}
|
||||
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none
|
||||
}
|
||||
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color))
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translate3d(0px, -50%, 0)
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 6px 0;
|
||||
display: block
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
display: inline-block;
|
||||
transition: .2s transform, .2s top
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 4px
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: .2s transform, .2s left
|
||||
}
|
||||
|
||||
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: .2s transform, .2s right
|
||||
}
|
||||
|
||||
.swiper-pagination-progressbar {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color));
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(0);
|
||||
transform-origin: left top
|
||||
}
|
||||
|
||||
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
transform-origin: right top
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-progressbar,
|
||||
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
|
||||
.swiper-container-vertical>.swiper-pagination-progressbar {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-pagination-white {
|
||||
--swiper-pagination-color: #ffffff
|
||||
}
|
||||
|
||||
.swiper-pagination-black {
|
||||
--swiper-pagination-color: #000000
|
||||
}
|
||||
|
||||
.swiper-pagination-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
.swiper-container-horizontal>.swiper-scrollbar {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
width: 98%
|
||||
}
|
||||
|
||||
.swiper-container-vertical>.swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1%;
|
||||
z-index: 50;
|
||||
width: 5px;
|
||||
height: 98%
|
||||
}
|
||||
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.swiper-scrollbar-lock {
|
||||
display: none
|
||||
}
|
||||
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.swiper-zoom-container>canvas,
|
||||
.swiper-zoom-container>img,
|
||||
.swiper-zoom-container>svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.swiper-slide-zoomed {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
transform-origin: 50%;
|
||||
animation: swiper-preloader-spin 1s infinite linear;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-white {
|
||||
--swiper-preloader-color: #fff
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-black {
|
||||
--swiper-preloader-color: #000
|
||||
}
|
||||
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000
|
||||
}
|
||||
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
transition-timing-function: ease-out
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
transition-property: opacity
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide-active,
|
||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-container-cube {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
transform-origin: 100% 0
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-next,
|
||||
.swiper-container-cube .swiper-slide-next+.swiper-slide,
|
||||
.swiper-container-cube .swiper-slide-prev {
|
||||
pointer-events: auto;
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-container-cube .swiper-slide-shadow-left,
|
||||
.swiper-container-cube .swiper-slide-shadow-right,
|
||||
.swiper-container-cube .swiper-slide-shadow-top {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: .6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0
|
||||
}
|
||||
|
||||
.swiper-container-flip {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.swiper-container-flip .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto
|
||||
}
|
||||
|
||||
.swiper-container-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-container-flip .swiper-slide-shadow-left,
|
||||
.swiper-container-flip .swiper-slide-shadow-right,
|
||||
.swiper-container-flip .swiper-slide-shadow-top {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 957 B |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 957 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 796 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 583 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 338 B |
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
xun();
|
||||
function xun(){
|
||||
if($('.xun').length==0){
|
||||
$('.top img').addClass('xun');
|
||||
}else{
|
||||
$('.top img').removeClass('xun');
|
||||
}
|
||||
}
|
||||
setInterval(() => {
|
||||
xun()
|
||||
}, 3000);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,29 @@
|
|||
// JavaScript Document
|
||||
(function($){
|
||||
$.fn.extend({
|
||||
"slideUp":function(h,value){
|
||||
var docthis = this;
|
||||
value=$.extend({
|
||||
"time":5000,
|
||||
"movetime":1000
|
||||
},value)
|
||||
function autoani(){
|
||||
$("div:first",docthis).animate({"margin-top":-h},value.movetime,function(){
|
||||
$(this).css("margin-top",0).appendTo(".box");
|
||||
})
|
||||
}
|
||||
var anifun = setInterval(autoani,value.time);
|
||||
|
||||
$(docthis).children("div").hover(function(){
|
||||
clearInterval(anifun);
|
||||
},function(){
|
||||
if($('.zhe').length==0){
|
||||
anifun = setInterval(autoani,value.time);
|
||||
}
|
||||
})
|
||||
$('.dise').click(function(){
|
||||
anifun = setInterval(autoani,value.time);
|
||||
})
|
||||
}
|
||||
})
|
||||
})(jQuery)
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/db/perform/analyze", function (resp) {
|
||||
var data = resp.data.countList;
|
||||
option = {
|
||||
animation: true,
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: 40,
|
||||
right: 0,
|
||||
left: 40
|
||||
},
|
||||
xAxis: {
|
||||
data: resp.data.monthList,
|
||||
axisLine: {
|
||||
show: false //隐藏X轴轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false //隐藏X轴轴线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(77, 128, 254, 0.2)",
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 14,
|
||||
interval: 0,
|
||||
fontSize: 14,
|
||||
textStyle: {
|
||||
color: "#65D5FF" //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
gridIndex: 0,
|
||||
// splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(77, 128, 254, 0.2)",
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(77, 128, 254, 0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 14,
|
||||
fontSize: 14,
|
||||
textStyle: {
|
||||
color: "#65D5FF"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "设备在线率",
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(146, 225, 255, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 151, 251, 1)"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: data,
|
||||
z: 10,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
// 分隔
|
||||
type: "pictorialBar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0F375F"
|
||||
}
|
||||
},
|
||||
symbolRepeat: "fixed",
|
||||
symbolMargin: 6,
|
||||
symbol: "rect",
|
||||
symbolClip: true,
|
||||
symbolSize: [18, 2],
|
||||
symbolPosition: "start",
|
||||
symbolOffset: [1, 1],
|
||||
data: data,
|
||||
width: 2,
|
||||
z: 0,
|
||||
zlevel: 1
|
||||
},
|
||||
{
|
||||
name: "外框",
|
||||
type: "bar",
|
||||
barGap: "-110%", // 设置外框粗细
|
||||
data: [100, 100, 100, 100, 100, 100, 100],
|
||||
barWidth: 16,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "transparent", // 填充色
|
||||
// barBorderRadius: 0, //圆角半径
|
||||
label: {
|
||||
// 标签显示位置
|
||||
show: false,
|
||||
position: "top" // insideTop 或者横向的 insideLeft
|
||||
}
|
||||
}
|
||||
},
|
||||
z: 0
|
||||
},
|
||||
{
|
||||
name: "背影",
|
||||
type: "line",
|
||||
smooth: true, //平滑曲线显示
|
||||
showAllSymbol: false, //显示所有图形。
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(0, 151, 251, 0.1)"
|
||||
},
|
||||
data: data,
|
||||
z: 5
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
show: false,
|
||||
xAxisIndex: [0],
|
||||
endValue: 11,
|
||||
startValue: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById('page1_1'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/db/supervise_thing/region/count", function (resp) {
|
||||
let categoryData = resp.data.nameList;
|
||||
let partdata = resp.data.nameList.slice(0, 5);
|
||||
let chartdata = resp.data.countList;
|
||||
let numdata = resp.data.countList.slice(0, 5);
|
||||
let itemcolor = {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(6, 120, 157,1)',
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(6, 120, 157,0.2)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(6, 120, 157,1)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myoption = {
|
||||
textStyle: {
|
||||
color: '#c0c3cd',
|
||||
fontSize: 14,
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
backgroundColor: '#031245',
|
||||
},
|
||||
restore: {},
|
||||
},
|
||||
iconStyle: {
|
||||
borderColor: '#c0c3cd',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: 10,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
icon: 'circle',
|
||||
left: 'center',
|
||||
padding: 0,
|
||||
textStyle: {
|
||||
color: '#c0c3cd',
|
||||
fontSize: 14,
|
||||
padding: [2, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
|
||||
grid: {
|
||||
left: 30,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
top: 40,
|
||||
},
|
||||
xAxis: {
|
||||
nameTextStyle: {
|
||||
color: '#c0c3cd',
|
||||
padding: [0, 0, -10, 0],
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#c0c3cd',
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#384267',
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#335971',
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
data: partdata,
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: {
|
||||
nameTextStyle: {
|
||||
color: '#c0c3cd',
|
||||
padding: [0, 0, -10, 0],
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#c0c3cd',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#668092',
|
||||
width: 1,
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#335971',
|
||||
// "type": "dashed"
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#668092',
|
||||
width: 1,
|
||||
// "type": "dashed"
|
||||
},
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: numdata,
|
||||
type: 'bar',
|
||||
barMaxWidth: 'auto',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00D7E9',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 167, 233,0.3)',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 10,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [1, 1, 1, 1, 1, 1],
|
||||
type: 'pictorialBar',
|
||||
barMaxWidth: '20',
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [20, 10],
|
||||
},
|
||||
{
|
||||
data: numdata,
|
||||
type: 'pictorialBar',
|
||||
barMaxWidth: '20',
|
||||
|
||||
symbolPosition: 'end',
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [20, 12],
|
||||
zlevel: 2,
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: '{b}:{c0}',
|
||||
},
|
||||
};
|
||||
|
||||
var num1 = 6;
|
||||
var num2 = 6;
|
||||
function han() {
|
||||
if (num1 > categoryData.length - 1) {
|
||||
num1 = 0;
|
||||
num2 = 0;
|
||||
}
|
||||
myoption.series[0].data.shift();
|
||||
myoption.series[0].data.push(chartdata[num2++]);
|
||||
|
||||
myoption.xAxis.data.shift();
|
||||
myoption.xAxis.data.push(categoryData[num1++]);
|
||||
|
||||
myChart.setOption(myoption);
|
||||
}
|
||||
interval = setInterval(function () {
|
||||
han()
|
||||
}, 3000);
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page1_2'));
|
||||
myChart.setOption(myoption);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/db/perform/count", function (resp) {
|
||||
|
||||
let nameList = resp.data.nameList;
|
||||
let countList = resp.data.countList;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
show: false,
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
left: '15%',
|
||||
right: '8%',
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: [{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
show: false,
|
||||
}],
|
||||
yAxis: [{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: { //y轴
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
inverse: true,
|
||||
data: nameList,
|
||||
axisLabel: {
|
||||
color: '#A7D6F4',
|
||||
fontSize: 14,
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '标准化',
|
||||
type: 'bar',
|
||||
barWidth: 12, // 柱子宽度
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right', // 位置
|
||||
color: '#A7D6F4',
|
||||
fontSize: 14,
|
||||
distance: 15, // 距离
|
||||
formatter: '{c} 次' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
|
||||
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#51C5FD'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#005BB1'
|
||||
}], false), // 渐变
|
||||
},
|
||||
data: countList
|
||||
},]
|
||||
};
|
||||
var myChart = echarts.init(document.getElementById('page1_3'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/db/supervise_thing/status_count", function (resp) {
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : ({d}%)",
|
||||
extraCssText: 'z-index:2'
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: '68%',
|
||||
center: ['50%', '55%'],
|
||||
clockwise: false,
|
||||
data: [{
|
||||
value: resp.data.wenPercent,
|
||||
name: '问'
|
||||
}, {
|
||||
value: resp.data.pingPercent,
|
||||
name: '评'
|
||||
}, {
|
||||
value: resp.data.yiPercent,
|
||||
name: '议'
|
||||
}, {
|
||||
value: resp.data.duPercent,
|
||||
name: '督'
|
||||
}],
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#ffffff',
|
||||
},
|
||||
emphasis: {
|
||||
borderWidth: 0,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
color: [
|
||||
'#00acee',
|
||||
'#52cdd5',
|
||||
'#79d9f1',
|
||||
'#a7e7ff',
|
||||
'#c8efff'
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page1_4'));
|
||||
myChart.setOption(option);
|
||||
|
||||
let index = 0;
|
||||
function fun() {
|
||||
var timer = setInterval(function () {
|
||||
myChart.dispatchAction({
|
||||
type: 'hideTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
// 取消高亮指定的数据图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index == 0 ? 2 : index - 1
|
||||
});
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
index++;
|
||||
if (index > 4) {
|
||||
index = 0;
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
fun();
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/count", function (resp) {
|
||||
var option = {
|
||||
series: [{
|
||||
type: 'liquidFill',
|
||||
radius: '60%',
|
||||
center: ['50%', '50%'],
|
||||
data: [0.5, 0.5, 0.5],
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: 'rgb(255,0,255,0.1)'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: resp.data + '个',
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "pie",
|
||||
"center": ["50%", "50%"],
|
||||
"radius": ["80%", "76%"],
|
||||
"hoverAnimation": false,
|
||||
"data": [{
|
||||
"name": "",
|
||||
"value": 500,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"value": 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ffffff',
|
||||
"normal": {
|
||||
"color": "#5886f0",
|
||||
"borderColor": "#5886f0",
|
||||
"borderWidth": 20,
|
||||
// borderRadius: '100%'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
|
||||
borderRadius: '100%'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
{ // 解决圆点过大后续部分显示明显的问题
|
||||
"name": "",
|
||||
"value": 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
},
|
||||
{ //画剩余的刻度圆环
|
||||
"name": "",
|
||||
"value": 0,
|
||||
itemStyle: {
|
||||
color: '#050038'
|
||||
},
|
||||
"label": {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,255,255,0)'
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById('page2_1'));
|
||||
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/count", function (resp) {
|
||||
var option = {
|
||||
series: [{
|
||||
type: 'liquidFill',
|
||||
radius: '60%',
|
||||
center: ['50%', '50%'],
|
||||
data: [0.5, 0.5, 0.5],
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: 'rgb(255,0,255,0.1)'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
formatter: resp.data + '次',
|
||||
textStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "pie",
|
||||
"center": ["50%", "50%"],
|
||||
"radius": ["80%", "76%"],
|
||||
"hoverAnimation": false,
|
||||
"data": [{
|
||||
"name": "",
|
||||
"value": 500,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
"value": 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ffffff',
|
||||
"normal": {
|
||||
"color": "#5886f0",
|
||||
"borderColor": "#5886f0",
|
||||
"borderWidth": 20,
|
||||
// borderRadius: '100%'
|
||||
},
|
||||
},
|
||||
label: {
|
||||
|
||||
borderRadius: '100%'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
{ // 解决圆点过大后续部分显示明显的问题
|
||||
"name": "",
|
||||
"value": 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5886f0'
|
||||
},
|
||||
}
|
||||
},
|
||||
{ //画剩余的刻度圆环
|
||||
"name": "",
|
||||
"value": 0,
|
||||
itemStyle: {
|
||||
color: '#050038'
|
||||
},
|
||||
"label": {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,255,255,0)'
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById('page2_1_1'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/count/rank", function (resp) {
|
||||
let className = resp.data.nameList;
|
||||
let data = resp.data.countList;
|
||||
var colorList = ['#2473EF', '#33DDF8', '#2473EF', '#33DDF8', '#2473EF', '#33DDF8'];
|
||||
var defaultData = [100, 100, 100, 100, 100, 100];
|
||||
option = {
|
||||
grid: {
|
||||
left: '22%',
|
||||
right: '12%',
|
||||
bottom: 0,
|
||||
top: '10%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none'
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + '<br/>' +
|
||||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
|
||||
params[0].seriesName + ' : ' + params[0].value + '次'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
data: className
|
||||
}, {
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: '12'
|
||||
},
|
||||
formatter: function (value) {
|
||||
return value + ' 次';
|
||||
},
|
||||
},
|
||||
data: data
|
||||
}],
|
||||
series: [{
|
||||
name: '举办次数',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 13,
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
// offset: 0,
|
||||
// color: 'rgb(57,89,255,1)'
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: 'rgb(46,200,207,1)'
|
||||
// }]),
|
||||
color: (params) => {
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
},
|
||||
},
|
||||
barWidth: 10,
|
||||
data: data
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
data: defaultData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1B375E',
|
||||
barBorderRadius: 0,
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page2_2'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/channel/count", function (resp) {
|
||||
|
||||
var channelArr = resp.data.channelArr;
|
||||
var countArr = resp.data.countArr;
|
||||
var objArr = new Array();
|
||||
channelArr.forEach((item, index) => {
|
||||
objArr.push({ "value": countArr[index], "name": item });
|
||||
});
|
||||
var color = ['#FFAA45', '#38FCBE', '#6844C6', '#164EB8', '#678198']
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: "75%",
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#A3E2F4',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
center: ['35%', '50%'],
|
||||
data: objArr,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#10234B',
|
||||
borderWidth: '5',
|
||||
},
|
||||
},
|
||||
color: color,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page2_3'));
|
||||
myChart.setOption(option);
|
||||
|
||||
let index = 0;
|
||||
function fun() {
|
||||
var timer = setInterval(function () {
|
||||
myChart.dispatchAction({
|
||||
type: 'hideTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
// 取消高亮指定的数据图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index == 0 ? 2 : index - 1
|
||||
});
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: index
|
||||
});
|
||||
index++;
|
||||
if (index > 5) {
|
||||
index = 0;
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
fun();
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/count/month", function (resp) {
|
||||
var monthList = resp.data.monthList;
|
||||
var countList = resp.data.countList;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '3%',
|
||||
left: '8%',
|
||||
bottom: 30
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: monthList,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#e2e9ff',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#e2e9ff',
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(0,186,255,.6)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.12)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: countList,
|
||||
barWidth: '28px',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0,244,255,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,77,167,1)' // 100% 处的颜色
|
||||
}], false),
|
||||
shadowColor: 'rgba(0,160,221,1)',
|
||||
shadowBlur: 4,
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
lineHeight: 30,
|
||||
formatter: '{c}',
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#00D6F9',
|
||||
fontSize: 14
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page2_4'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/month/analyze", function (resp) {
|
||||
var monthArr = resp.data.monthArr;
|
||||
var sameRateArr = resp.data.sameRateArr;
|
||||
var cycleRateArr = resp.data.cycleRateArr;
|
||||
// 统计百分比
|
||||
var data1 = cycleRateArr;
|
||||
var data2 = sameRateArr;
|
||||
var json = {
|
||||
chart0: {
|
||||
xcategory: monthArr,
|
||||
low: data1,
|
||||
lowLine: [],
|
||||
}
|
||||
};
|
||||
var json2 = {
|
||||
chart0: {
|
||||
xcategory: monthArr,
|
||||
low: data2,
|
||||
lowLine: [],
|
||||
}
|
||||
};
|
||||
var zrUtil = echarts.util;
|
||||
zrUtil.each(json.chart0.xcategory, function (item, index) {
|
||||
json.chart0.lowLine.push([{
|
||||
coord: [index, json.chart0.low[index]]
|
||||
}, {
|
||||
coord: [index + 1, json.chart0.low[index + 1]]
|
||||
}]);
|
||||
});
|
||||
zrUtil.each(json.chart0.xcategory, function (item, index) {
|
||||
json2.chart0.lowLine.push([{
|
||||
coord: [index, json2.chart0.low[index]]
|
||||
}, {
|
||||
coord: [index + 1, json2.chart0.low[index + 1]]
|
||||
}]);
|
||||
});
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#15ecf4'
|
||||
}
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,.8)',
|
||||
extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
|
||||
formatter: function (params) {
|
||||
var result = params[0].name + '<br>';
|
||||
params.forEach(function (item) {
|
||||
result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
|
||||
// 判断设置增长还是降低
|
||||
if (parseFloat(item.data) >= 50) {
|
||||
result += item.seriesName + ": " + '<span class="growth">增长' + item.data + "%</span><br>"
|
||||
} else if (parseFloat(item.data) < 50) {
|
||||
result += item.seriesName + ": " + '<span class="reduce">降低' + item.data + "%</span><br>"
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['同比', '环比'],
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgb(0,253,255,0.6)'
|
||||
},
|
||||
top: '5%',
|
||||
right: '5%'
|
||||
},
|
||||
grid: {
|
||||
bottom: 30,
|
||||
left: 50,
|
||||
right: 0,
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#15faff',
|
||||
},
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true
|
||||
},
|
||||
data:monthArr,
|
||||
},
|
||||
yAxis: {
|
||||
max: 100,
|
||||
splitNumber: 4,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#4b4d64'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
textStyle: { //改变刻度字体样式
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '环比',
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 204,1, .9)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(6, 8, 41,.1)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ffcb00'
|
||||
}
|
||||
},
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
name: '环比',
|
||||
type: 'lines',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
zlevel: 1,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
effect: {
|
||||
show: true,
|
||||
smooth: true,
|
||||
period: 2,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#ffcb00',
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
curveness: 0,
|
||||
}
|
||||
},
|
||||
data: json.chart0.lowLine
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(21, 250, 255,.9)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(6, 8, 41,.1)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#15faff'
|
||||
}
|
||||
},
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
name: '同比',
|
||||
type: 'lines',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
zlevel: 1,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
effect: {
|
||||
show: true,
|
||||
smooth: true,
|
||||
period: 2,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#15faff',
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
curveness: 0,
|
||||
}
|
||||
},
|
||||
data: json2.chart0.lowLine
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page2_5'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/contact/activity/people/month/analyze", function (resp) {
|
||||
var monthArr = resp.data.monthArr;
|
||||
var countArr = resp.data.countArr;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '3%',
|
||||
left: '9%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: monthArr,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: 'grey',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#e2e9ff',
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(0,186,255,.6)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.12)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: countArr,
|
||||
barWidth: '14px',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0,162,255,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(16,70,174,1)' // 100% 处的颜色
|
||||
}], false),
|
||||
shadowBlur: 4,
|
||||
//柱形图圆角，初始化效果
|
||||
barBorderRadius: [15, 15, 0, 0]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
lineHeight: 30,
|
||||
formatter: '{c}',
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#00D6F9',
|
||||
fontSize: 14
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page2_6'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,244 @@
|
|||
(function () {
|
||||
|
||||
act.get("/api/statistics/voter/analyze", function (resp) {
|
||||
var nameList = resp.data.nameList;
|
||||
var leftIndex = nameList.length % 2 == 0 ? nameList.length / 2 : nameList.length / 2 + 1;
|
||||
|
||||
var leftNameList = nameList.slice(0, leftIndex);
|
||||
var rightNameList = nameList.slice(leftIndex, nameList.length);
|
||||
|
||||
var countList = resp.data.countList;
|
||||
var leftCountList = countList.slice(0, leftIndex);
|
||||
var rightCountList = countList.slice(leftIndex, countList.length);
|
||||
|
||||
var percentList = resp.data.percentList;
|
||||
var leftPercentList = percentList.slice(0, leftIndex);
|
||||
var rightPercentList = percentList.slice(leftIndex, percentList.length);
|
||||
|
||||
var leftFullPercentList = new Array();
|
||||
var rightFullPercentList = new Array();
|
||||
leftPercentList.forEach(() => {
|
||||
leftFullPercentList.push("100");
|
||||
});
|
||||
rightPercentList.forEach(() => {
|
||||
rightFullPercentList.push("100");
|
||||
});
|
||||
|
||||
var option = {
|
||||
grid: [
|
||||
{
|
||||
//左侧的柱状图grid
|
||||
width: "46%",
|
||||
left: 0,
|
||||
top: '8%',
|
||||
right: '5%',
|
||||
bottom: 0
|
||||
},
|
||||
{
|
||||
//右侧的柱状图grid
|
||||
width: "46%",
|
||||
left: '54%',
|
||||
top: '8%',
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
//左侧柱状图的X轴
|
||||
gridIndex: 0,//x 轴所在的 grid 的索引
|
||||
show: false
|
||||
},
|
||||
{
|
||||
//右侧柱状图的X轴
|
||||
gridIndex: 1,//x 轴所在的 grid 的索引
|
||||
show: false
|
||||
}],
|
||||
yAxis: [
|
||||
{
|
||||
//左侧柱状图的Y轴
|
||||
gridIndex: 0,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
axisLabel: {
|
||||
verticalAlign: 'bottom',
|
||||
align: 'left',
|
||||
padding: [0, 0, 8, 10],
|
||||
textStyle: {
|
||||
color: '#befbff',
|
||||
fontSize: '14',
|
||||
}
|
||||
},
|
||||
data: leftNameList,
|
||||
inverse: true,
|
||||
},
|
||||
{
|
||||
//左侧柱状图的Y轴
|
||||
gridIndex: 0,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
data: leftCountList,
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
verticalAlign: 'bottom',
|
||||
align: 'right',
|
||||
padding: [0, 16, 8, 0],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '14',
|
||||
},
|
||||
formatter: function (value) {
|
||||
return '{x|' + value + '} {y|' + "次}"
|
||||
},
|
||||
rich: {
|
||||
y: {
|
||||
color: '#befbff',
|
||||
fontSize: 14
|
||||
},
|
||||
x: {
|
||||
color: '#f6cf42',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
//左侧柱状图的Y轴
|
||||
gridIndex: 0,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
data: []
|
||||
},
|
||||
|
||||
{
|
||||
//右侧柱状图的Y轴
|
||||
gridIndex: 1,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
axisLabel: {
|
||||
verticalAlign: 'bottom',
|
||||
align: 'left',
|
||||
padding: [0, 0, 8, 10],
|
||||
textStyle: {
|
||||
color: '#befbff',
|
||||
fontSize: '14',
|
||||
}
|
||||
},
|
||||
data: rightNameList,
|
||||
inverse: true
|
||||
},
|
||||
{
|
||||
//右侧柱状图的Y轴
|
||||
gridIndex: 1,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
data: rightCountList,
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
verticalAlign: 'bottom',
|
||||
align: 'right',
|
||||
padding: [0, 16, 8, 0],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '14',
|
||||
},
|
||||
formatter: function (value) {
|
||||
return '{x|' + value + '} {y|' + "次}"
|
||||
},
|
||||
rich: {
|
||||
y: {
|
||||
color: '#befbff',
|
||||
fontSize: 14
|
||||
},
|
||||
x: {
|
||||
color: '#f6cf42',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
//右侧柱状图的Y轴
|
||||
gridIndex: 1,//y轴所在的 grid 的索引
|
||||
splitLine: 'none',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
data: []
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '值',
|
||||
type: 'bar',
|
||||
xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||||
yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||||
data: leftPercentList,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0BBFCA',
|
||||
barBorderRadius: 6,
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
name: '外框',
|
||||
type: 'bar',
|
||||
xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||||
yAxisIndex: 2,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||||
barGap: '-100%',
|
||||
data: leftFullPercentList,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2d5271',
|
||||
barBorderRadius: 6,
|
||||
}
|
||||
},
|
||||
z: 0
|
||||
},
|
||||
{
|
||||
name: '值',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||||
yAxisIndex: 3,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||||
data: rightPercentList,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0BBFCA',
|
||||
barBorderRadius: 6,
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
name: '外框',
|
||||
type: 'bar',
|
||||
xAxisIndex: 1,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
|
||||
yAxisIndex: 5,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
|
||||
barGap: '-100%',
|
||||
data: rightFullPercentList,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2d5271',
|
||||
barBorderRadius: 6,
|
||||
}
|
||||
},
|
||||
z: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
var myChart = echarts.init(document.getElementById('page3_1'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/voter/month/count", function (resp) {
|
||||
var countList = resp.data.countList;
|
||||
var monthList = resp.data.monthList;
|
||||
|
||||
option = {
|
||||
color: ["#63caff", "#3608FE"],
|
||||
grid: {
|
||||
left: 36,
|
||||
right: 0,
|
||||
bottom: 30,
|
||||
top: 40
|
||||
},
|
||||
xAxis: {
|
||||
axisLabel: {
|
||||
color: "#c0c3cd",
|
||||
fontSize: 14,
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#384267",
|
||||
width: 1,
|
||||
type: "dashed"
|
||||
},
|
||||
show: true
|
||||
},
|
||||
data: monthList,
|
||||
type: "category"
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
color: "#c0c3cd",
|
||||
fontSize: 14
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#384267",
|
||||
type: "dashed"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#384267",
|
||||
width: 1,
|
||||
type: "dashed"
|
||||
},
|
||||
show: true
|
||||
},
|
||||
name: ""
|
||||
},
|
||||
series: [{
|
||||
data: countList,
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: "#3A1BFD"
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "#3BEFFD"
|
||||
}]
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
distance: 10,
|
||||
color: "#fff"
|
||||
}
|
||||
}, {
|
||||
data: [1, 1, 1, 1, 1, 1, 1, 1],
|
||||
type: "pictorialBar",
|
||||
barMaxWidth: "20",
|
||||
symbol: "diamond",
|
||||
symbolOffset: [0, "50%"],
|
||||
symbolSize: [30, 15]
|
||||
}, {
|
||||
data: countList,
|
||||
type: "pictorialBar",
|
||||
barMaxWidth: "20",
|
||||
symbolPosition: "end",
|
||||
symbol: "diamond",
|
||||
symbolOffset: [0, "-50%"],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: true
|
||||
}
|
||||
}
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page3_2'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/voter/people_condition/category", function (resp) {
|
||||
var categoryArr = resp.data.categoryArr;
|
||||
var countArr = resp.data.countArr;
|
||||
var objArr = new Array();
|
||||
categoryArr.forEach((item, index) => {
|
||||
objArr.push({ "value": countArr[index], "name": item });
|
||||
});
|
||||
|
||||
option = {
|
||||
color: ["#EAEA26", "#906BF9", "#01E17E", "#3DD1F9", "#FE5656", "#164BCD", "#3434B0", "#FFAD05"],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vartical",
|
||||
// x: "right",
|
||||
top: "center",
|
||||
left: "75%",
|
||||
// bottom: "0%",
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#A3E2F4',
|
||||
fontSize: 12,
|
||||
fontWeight: 0
|
||||
},
|
||||
data: categoryArr
|
||||
},
|
||||
polar: {},
|
||||
angleAxis: {
|
||||
interval: 1,
|
||||
type: 'category',
|
||||
data: [],
|
||||
z: 10,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#0B4A6B",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
color: "#0B4A6B",
|
||||
margin: 8,
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
radiusAxis: {
|
||||
show: false,
|
||||
min: 40,
|
||||
max: 120,
|
||||
interval: 20,
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#0B3E5E",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
show: false,
|
||||
padding: [0, 0, 20, 0],
|
||||
color: "#0B3E5E",
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#0B3E5E",
|
||||
width: 2,
|
||||
type: "solid"
|
||||
}
|
||||
}
|
||||
},
|
||||
calculable: true,
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ["5%", "10%"],
|
||||
center: ['40%', '50%'],
|
||||
hoverAnimation: false,
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
length: 15,
|
||||
length2: 18
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '',
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0B4A6B"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
type: 'pie',
|
||||
radius: ["75%", "80%"],
|
||||
center: ['40%', '50%'],
|
||||
hoverAnimation: false,
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
length: 30,
|
||||
length2: 55
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
name: "",
|
||||
data: [{
|
||||
name: '',
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0B4A6B"
|
||||
}
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
stack: 'a',
|
||||
type: 'pie',
|
||||
radius: ['20%', '60%'],
|
||||
center: ['40%', '50%'],
|
||||
roseType: 'area',
|
||||
zlevel: 10,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
position: 'outside'
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: true,
|
||||
length: 10,
|
||||
length2: 20
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: objArr
|
||||
},]
|
||||
}
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page3_3'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/voter/people_condition/analyze", function (resp) {
|
||||
var statusArr = resp.data.statusArr;
|
||||
var countArr = resp.data.countArr;
|
||||
var data=new Array();
|
||||
statusArr.forEach((status,i)=>{
|
||||
data.push({
|
||||
"name":status,
|
||||
"value":countArr[i]
|
||||
})
|
||||
});
|
||||
|
||||
arrName = getArrayValue(data, "name");
|
||||
arrValue = getArrayValue(data, "value");
|
||||
sumValue = eval(arrValue.join('+'));
|
||||
objData = array2obj(data, "name");
|
||||
optionData = getData(data)
|
||||
function getArrayValue(array, key) {
|
||||
var key = key || "value";
|
||||
var res = [];
|
||||
if (array) {
|
||||
array.forEach(function (t) {
|
||||
res.push(t[key]);
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function array2obj(array, key) {
|
||||
var resObj = {};
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
resObj[array[i][key]] = array[i];
|
||||
}
|
||||
return resObj;
|
||||
}
|
||||
|
||||
function getData(data) {
|
||||
var res = {
|
||||
series: [],
|
||||
yAxis: []
|
||||
};
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
// console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
|
||||
res.series.push({
|
||||
name: '',
|
||||
type: 'pie',
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
radius: [83 - i * 15 + '%', 78 - i * 15 + '%'],
|
||||
center: ["38%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
borderWidth: 5,
|
||||
},
|
||||
data: [{
|
||||
value: data[i].value,
|
||||
name: data[i].name
|
||||
}, {
|
||||
value: sumValue - data[i].value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false
|
||||
}]
|
||||
});
|
||||
res.series.push({
|
||||
name: '',
|
||||
type: 'pie',
|
||||
silent: true,
|
||||
z: 1,
|
||||
clockWise: false, //顺时加载
|
||||
hoverAnimation: false, //鼠标移入变大
|
||||
radius: [83 - i * 15 + '%', 78 - i * 15 + '%'],
|
||||
center: ["38%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
borderWidth: 5,
|
||||
},
|
||||
data: [{
|
||||
value: 7.5,
|
||||
itemStyle: {
|
||||
color: "rgb(3, 31, 62)",
|
||||
borderWidth: 0
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false
|
||||
}, {
|
||||
value: 2.5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false
|
||||
}]
|
||||
});
|
||||
res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "circle",
|
||||
top: "center",
|
||||
left: '75%',
|
||||
data: arrName,
|
||||
width: 50,
|
||||
padding: [0, 5],
|
||||
itemGap: 10,
|
||||
formatter: function (name) {
|
||||
return "{title|" + name + "}"
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
rich: {
|
||||
title: {
|
||||
fontSize: 14,
|
||||
lineHeight: 15,
|
||||
color: "rgb(0, 178, 246)"
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
lineHeight: 16,
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "item",
|
||||
formatter: "{a}<br>{b}:{c}({d}%)"
|
||||
},
|
||||
color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'],
|
||||
grid: {
|
||||
top: '6%',
|
||||
bottom: '65%',
|
||||
left: "40%",
|
||||
containLabel: false
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
inside: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
show: true
|
||||
},
|
||||
data: optionData.yAxis
|
||||
}],
|
||||
xAxis: [{
|
||||
show: false
|
||||
}],
|
||||
series: optionData.series
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page3_4'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/voter/people_condition/hot_key", function (resp) {
|
||||
var keyArr = resp.data.keyArr;
|
||||
var objArr = new Array();
|
||||
keyArr.forEach((item) => {
|
||||
objArr.push({ "value": Math.floor(Math.random() * 50), "name": item });
|
||||
});
|
||||
let datas = objArr;
|
||||
|
||||
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: "wordCloud",
|
||||
// 网格大小，各项之间间距
|
||||
gridSize: 25,
|
||||
// 形状 circle 圆，cardioid 心， diamond 菱形，
|
||||
// triangle-forward 、triangle 三角，star五角星
|
||||
shape: 'circle',
|
||||
// 字体大小范围
|
||||
sizeRange: [10, 20],
|
||||
// 文字旋转角度范围
|
||||
rotationRange: [0, 90],
|
||||
// 旋转步值
|
||||
rotationStep: 90,
|
||||
// 自定义图形
|
||||
// maskImage: maskImage,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
right: null,
|
||||
bottom: null,
|
||||
// 画布宽
|
||||
width: '90%',
|
||||
// 画布高
|
||||
height: '80%',
|
||||
// 是否渲染超出画布的文字
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
normal: {
|
||||
color: function () {
|
||||
return 'rgb(' + [
|
||||
Math.round(Math.random() * 10 + 55),
|
||||
Math.round(Math.random() * 80 + 55),
|
||||
Math.round(Math.random() * 120 + 55)
|
||||
].join(',') + ')';
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#2ac'
|
||||
}
|
||||
},
|
||||
data: datas
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page3_5'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/office/analyze", function (resp) {
|
||||
var objArr = resp.data;
|
||||
var nameArr = new Array();
|
||||
var countArr = new Array();
|
||||
objArr.forEach(item => {
|
||||
nameArr.push(item.name);
|
||||
countArr.push(item.count);
|
||||
});
|
||||
|
||||
//数据
|
||||
var XName = nameArr;
|
||||
var data1 = countArr;
|
||||
var img = [
|
||||
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
|
||||
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAGS0lEQVR42u2cz4skSRXHPy8iMrOrq7qnp3dqloEeD0PvHrbxB/TJkwt6EGVBwRHUf0BPXj146JPgosJe/PEX6NoHYUUE8bCC11ZQtw+DLMq2DtPlbM9MVXVVZkbE85DVXdU97e6yi1U9TXwhyaIq4lXmh29ERrxXlKgqSR9OJiFI8BK8BC/BS0rwErwEL8FLSvASvAQvwUvwkhK8BC/BS/CSErwEL8FL8JISvI8udxkvShA5/55y+QrMchmK3hfBej9dBpgLhXcBNIGd9+ix03C7JBAXBm8GnEzBvDV53bvAid3JhW7pDGBdJMC5wzvnNoG7U2B7fWF7G/aPhJdmWu0DL11X9vZge0WnIHd11onzhrgoeDJ1Wk/gRYEjgYHA88LBUNiY6XQAbLQVHih0FK4r3JtAPHWizhueWYzrZsDtdw28Y6BtKJfbVHWbDSzvxg5la413Y4cNLFXdZtxepV4q4B3T9OtJE2fnQz94ngnnzYCTqeO6DbT7Dw1uyZBlHTreM3QBqacgNFPa3jJwjhg85fExt56LMIzQizMOnOscOO9F8tPgyv4ymVi6WExdMbJgbYZ1GSU51mVYmzGyYOqK9ViTiaXsL0PbNHFOHIhcuWF7drhCM8cNhLK/zBCLW7fQcqegqphjNMfRnKuYnwKl5XDrliETgIPJnDmNP6/hO+cdxonrEOgYCipGtcOWjqF3mJal9A6Lxahg7QZB1nB6RKX/pMg8w5FgnUCoKTIPHQNHOnHfU+vAKzJsd+SM6x48NpAb1jKDwVLmjljfJONFRL5CaX8A5tcQ7yHmAS2TIVVGmTsMlrWs6f/gsTnnPrmC8IA3e8L+UbMcydfbPBoaBlhELctqCTJAwwHoZ4BPA6/hydH4I8rwDSqzRaE3ELUMsDwaGvL1NjzfxH2zd7XmvDPzz8vQLH6HgpYekxnEGcZYZAJRnCPG7+L44nf4wgG5dcBfQL4M+hDlVtPeGUxm0NLDsFlUv/zR9suXP6vy94HQdkKx6pHjDBCWW4IPn0D5JF7/+Cn5WPx++OrPWpK/8Pnw8cFr/O7rv4p/fh1nKjL5D84JYSSIF1iuuf9EGHph86rm83bfusAJKyCFgBeCCvBNNB5/y3z2lRb5C80FSudLsv0KRIEolLFpL4XAygf8nmcd3t0tPTeeLQDHwBiAv2H0c2RmNJbqyWzTUuo+mVGi/B5YYzzpd6K8aP/P77lCi2TY7ExvTkeKlorWCkbBRdD4bfP6G//i0S8GjP/Uo/+bn8gf3gCNID8FbqL1pN+oiRVCdSbunLSYTHJYUkLfYzqOlo1UMYJuEilBfgjht1+LP34VcYJ6JWjEmYDYnxO1RiXSMpEQlNhXqqJexG383513dp/ZbTIivq3cuBaJdUR9JEog+vsQIvBLkC2c1kStMeZ7GPsqUe6g9S3iOBAlNP3qyI1rEd+eZFq6c01PzSUxME1D3RX23jZs3zQ8bK+y0oZR7bGFYzzKsLnDeIcYg9QGMoFaUXsLWCaaf+N9j6VWTSg9rczRH8JzwyfsHUa278STHN884M1zzmsyH9sryn5HWW2N6fvINQnEQSBkniLW5FKhsUU0N1G/SZCKyD/I5K/kHBIyTxwErkmg7yOrrTH7nSYuWzrP7dk8ncdZ990RDrAUWLq5AbX01WKwjKxh2U+XHMdOaYVIJLAiASTQqyIlgQ0Ce2/rrOvmNWzNfCx3eiMT992JcF0ZDxoANQ6fC6HwBF9TmIog06MwFcHXhMLjc6GkoCQwHjRxtu/EWddd1XxekzbaBbinbN6OjAeRLDsm9KEeelZXalZCjffTYyXUrK7U1ENP6IMxY8aDyObtCPe0ibdz9Z62F7rv7q6y21U4ijy+3WSEi+Mh3banHkI5dmheUC15qiXPuCyoh0K37SmOh2Tjsul3FNntNvEWUElbZPXs6SLQadVscMEWq6OnVbQLij/zBreQYXt2/ttRmHHhYW9SkxgF9g4jHMbmPArQm3w+cRu7JzWLhdVuL0PRm7NOPMk4n9fJnnXnqWzxwn41oKoLPVDkwmMHg2Im5wvbLPra5TL9u8UHSWBepl9LSfprkGdqnZfgJSV4CV6Cl+AleEkJXoKX4CV4SQlegpfgJXgJXlKCl+AleAleUoKX4CV4V0//BfBm5Ekg9qBkAAAAAElFTkSuQmCC',
|
||||
'image://data:image/png;base64,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',
|
||||
'image://data:image/png;base64,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',
|
||||
]
|
||||
|
||||
var data = [{
|
||||
coords: objArr
|
||||
}]
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: '14%',
|
||||
bottom: '20%',
|
||||
right: 0,
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
data: "来电量",
|
||||
itemWidth: 18,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: "#00ffff",
|
||||
fontSize: 14
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
nameTextStyle: {
|
||||
color: '#00FFFF'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(135,140,147,0.8)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
},],
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#0696f9',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: '#fff', // x轴颜色
|
||||
fontWeight: 'normal',
|
||||
fontSize: '12',
|
||||
lineHeight: 22
|
||||
}
|
||||
|
||||
},
|
||||
data: XName,
|
||||
},],
|
||||
series: [{
|
||||
symbolSize: 70,
|
||||
symbol: img[2],
|
||||
name: '小灯光',
|
||||
type: "line",
|
||||
data: data1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
color: '#0696f9',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '滑行的光点',
|
||||
type: 'lines',
|
||||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 30,
|
||||
polyline: true,
|
||||
effect: {
|
||||
show: true,
|
||||
trailLength: 0,
|
||||
symbol: "arrow",
|
||||
period: 20, //光点滑动速度
|
||||
symbolSize: 150,
|
||||
symbol: img[0]
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1,
|
||||
opacity: 0.6,
|
||||
curveness: 0.2
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page4_1'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/office/conference/analyze", function (resp) {
|
||||
var monthList = resp.data.monthList;
|
||||
var countList = resp.data.countList;
|
||||
option = {
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 30,
|
||||
left: 26,
|
||||
right: 0
|
||||
},
|
||||
xAxis: {
|
||||
data: monthList,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3d5269'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: "",
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3d5269'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#2d3d53'
|
||||
}
|
||||
},
|
||||
interval: 2,
|
||||
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#5ef3ff'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#06a4f4'
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff',
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
data: monthList
|
||||
}]
|
||||
};
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page4_2'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/office/conference/category/count", function (resp) {
|
||||
let chart = [
|
||||
{
|
||||
name: '常委会议',
|
||||
value: resp.data.cwPercent // 百分比
|
||||
},
|
||||
{
|
||||
name: '主任会议',
|
||||
value: resp.data.zrPercent// 百分比
|
||||
},
|
||||
{
|
||||
name: '其他会议',
|
||||
value: resp.data.otherPercent // 百分比
|
||||
}
|
||||
]
|
||||
let startAngle = [90, 270, 90] // 起始角度
|
||||
let centerX = [20, 50, 80] // 每个圆心的x位置
|
||||
let centerY = [75, 28, 75] // 每个圆心的Y位置
|
||||
|
||||
let seriesAll = []
|
||||
chart.forEach((item, i) => {
|
||||
if (i < 4) {
|
||||
let pie = {
|
||||
name: '',
|
||||
type: 'pie',
|
||||
z: 10,
|
||||
radius: ['40%', '42%'],
|
||||
center: [`${centerX[i]}%`, `${centerY[i]}%`],
|
||||
startAngle: startAngle[i],
|
||||
avoidLabelOverlap: false,
|
||||
data: [{
|
||||
value: chart[i].value,
|
||||
name: chart[i].name,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 100 - chart[i].value,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
color: 'transparent'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// 指示线
|
||||
name: chart[i].name,
|
||||
value: 0,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'transparent'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 3,
|
||||
color: '#B1BCD2',
|
||||
lineStyle: {
|
||||
color: '#B1BCD2'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
color: '#B1BCD2',
|
||||
fontSize: 12,
|
||||
position: 'outside'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
let gauge = {
|
||||
name: '',
|
||||
z: -1,
|
||||
type: 'gauge',
|
||||
radius: '42%',
|
||||
center: [`${centerX[i]}%`, `${centerY[i]}%`],
|
||||
startAngle: 0,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 30,
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
// 中间的百分比
|
||||
detail: {
|
||||
formatter: '{value}%',
|
||||
offsetCenter: [0, 0],
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontStyle: 'italic',
|
||||
fontFamily: 'DINPro-Light'
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 1,
|
||||
lineStyle: {
|
||||
width: 6,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: chart[i].value,
|
||||
name: chart[i].name
|
||||
}]
|
||||
}
|
||||
|
||||
seriesAll.push(pie)
|
||||
seriesAll.push(gauge)
|
||||
}
|
||||
})
|
||||
|
||||
option = {
|
||||
color: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
series: seriesAll
|
||||
}
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page4_3'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
})()
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
(function () {
|
||||
init();
|
||||
})()
|
||||
|
||||
function init(){
|
||||
act.get("/api/statistics/office/rank", function (resp) {
|
||||
var countryArr = resp.data.countryArr;
|
||||
var countArr = resp.data.countArr;
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
show: false,
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
left: '15%',
|
||||
right: '10%',
|
||||
bottom: 0,
|
||||
},
|
||||
xAxis: [{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
type: 'value',
|
||||
show: false,
|
||||
}],
|
||||
yAxis: [{
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: { //y轴
|
||||
show: false
|
||||
},
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
inverse: true,
|
||||
data: countryArr,
|
||||
axisLabel: {
|
||||
color: '#A7D6F4',
|
||||
fontSize: 14,
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '标准化',
|
||||
type: 'bar',
|
||||
barWidth: 14, // 柱子宽度
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right', // 位置
|
||||
color: '#A7D6F4',
|
||||
fontSize: 14,
|
||||
distance: 15, // 距离
|
||||
formatter: '{c}' // 这里是数据展示的时候显示的数据
|
||||
}, // 柱子上方的数值
|
||||
itemStyle: {
|
||||
barBorderRadius: [0, 0, 0, 0], // 圆角（左上、右上、右下、左下）
|
||||
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#7882BC'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#5062F5'
|
||||
}], false), // 渐变
|
||||
},
|
||||
data: countArr
|
||||
},]
|
||||
};
|
||||
|
||||
|
||||
var myChart = echarts.init(document.getElementById('page4_4'));
|
||||
myChart.setOption(option);
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,32 @@
|
|||
var yuan = {
|
||||
baseUrl: "https://rd.ydool.org",
|
||||
ajax: (url, type, data, func) => {
|
||||
$.ajax({
|
||||
"url": yuan.baseUrl + url,
|
||||
"type": type,
|
||||
"data": data,
|
||||
"dataType": "json",
|
||||
success: function (resp) {
|
||||
if (func) func(resp);
|
||||
}
|
||||
});
|
||||
},
|
||||
get: (url, func) => {
|
||||
yuan.ajax(url, "get", null, func);
|
||||
},
|
||||
dom2ValueStr: (dom) => {
|
||||
return $(dom).map((e) => $(dom).eq(e).val()).get().join(",");
|
||||
},
|
||||
checkBlank: (domArr) => {
|
||||
var flag = true;
|
||||
domArr.forEach((dom) => {
|
||||
for (let i = 0; i < dom.length; i++) {
|
||||
let val = $(dom).eq(i).val();
|
||||
if (val == undefined || val == null || val == "" || val.trim() == "") flag = false;
|
||||
}
|
||||
});
|
||||
if (!flag) act.error("输入框内容不能为空值");
|
||||
return flag;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -8,36 +8,174 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/contact/save" remote="true"
|
||||
result="updateResult">
|
||||
<input type="hidden" name="id" value="${report.id!}">
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/contact/save" remote="true"
|
||||
before="before" result="updateResult">
|
||||
<div class="box-body">
|
||||
<div class="form-unit">活动举办次数渠道</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="渠道" name="channel" value="${channel}" as="textarea" col="2" rows="3"/>
|
||||
<div id="channel-div">
|
||||
<div class="form-unit">活动举办次数渠道/占比</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page2_3" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="channel">
|
||||
<input type="hidden" name="channelRate">
|
||||
<% for(_channel in channel){ %>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
渠道:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_channel}" name="_channel" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
占比:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${channelRate[_channelLP.dataIndex]}" name="_channelRate"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="channel-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2">
|
||||
<input type="button" class="channel-increase-btn" value="+">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">活动参与人数月度统计人数</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page2_6" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="人数" name="peopleCount" value="${peopleCount}" as="textarea" col="2" rows="3"/>
|
||||
<input type="hidden" name="peopleCount">
|
||||
<div class="row">
|
||||
<% for(_peopleCount in peopleCount){ %>
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
${_peopleCountLP.index}月:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_peopleCount}" name="_peopleCount" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">活动举办次数渠道分布占比</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="占比" name="channelRate" value="${channelRate}" as="textarea" col="2" rows="3"/>
|
||||
<div class="form-unit">联络站月使用情况分析</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page2_5" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">联络站月使用情况分析-环比</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="环比" name="cycleRate" value="${cycleRate}" as="textarea" col="2" rows="3"/>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div class="form-unit">环比</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">联络站月使用情况分析-同比</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="同比" name="sameRate" value="${sameRate}" as="textarea" col="2" rows="3"/>
|
||||
<input type="hidden" name="cycleRate">
|
||||
<div class="row">
|
||||
<% for(_cycleRate in cycleRate){ %>
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
${_cycleRateLP.index}月:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_cycleRate}" name="_cycleRate" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div class="form-unit">同比</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="sameRate">
|
||||
<div class="row">
|
||||
<% for(_sameRate in sameRate){ %>
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
${_sameRateLP.index}月:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_sameRate}" name="_sameRate" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
|
||||
<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
|
||||
<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i
|
||||
class="fa fa-check"></i>
|
||||
保 存
|
||||
</button>
|
||||
|
||||
|
|
@ -54,15 +192,106 @@
|
|||
|
||||
|
||||
<script>
|
||||
$(".channel-increase-btn").on("click", function () {
|
||||
$("#channel-div").append(`
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
渠道:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_channel" maxlength="" class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
占比:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_channelRate"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="channel-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
$("body").on("click", ".channel-decrease-btn", function () {
|
||||
$(this).parents(".row").remove();
|
||||
});
|
||||
|
||||
|
||||
function before() {
|
||||
var _channel = $("[name='_channel']");
|
||||
var _channelRate = $("[name='_channelRate']");
|
||||
var _peopleCount = $("[name='_peopleCount']");
|
||||
var _cycleRate = $("[name='_cycleRate']");
|
||||
var _sameRate = $("[name='_sameRate']");
|
||||
|
||||
var flag = yuan.checkBlank([
|
||||
_channel,
|
||||
_channelRate,
|
||||
_peopleCount,
|
||||
_cycleRate,
|
||||
_sameRate
|
||||
]);
|
||||
|
||||
$("[name = 'channel']").val(yuan.dom2ValueStr(_channel));
|
||||
$("[name = 'channelRate']").val(yuan.dom2ValueStr(_channelRate));
|
||||
$("[name = 'peopleCount']").val(yuan.dom2ValueStr(_peopleCount));
|
||||
$("[name = 'cycleRate']").val(yuan.dom2ValueStr(_cycleRate));
|
||||
$("[name = 'sameRate']").val(yuan.dom2ValueStr(_sameRate));
|
||||
return flag;
|
||||
}
|
||||
|
||||
function updateResult(resp) {
|
||||
if (resp.state == 1) {
|
||||
act.msg("操作成功");
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 500);
|
||||
} else {
|
||||
act.error(resp.msg);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
<script src="/assets/js/echarts.min.js"></script>
|
||||
<script src="/assets/js/yuan.js"></script>
|
||||
<script src="/assets/js/echarts-wordcloud.min.js"></script>
|
||||
<script src="/assets/js/page2_3.js"></script>
|
||||
<script src="/assets/js/page2_6.js"></script>
|
||||
<script src="/assets/js/page2_5.js"></script>
|
||||
|
||||
<style>
|
||||
#page2_3 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
#page2_6 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
#page2_5 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,67 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/office/save" remote="true" result="updateResult">
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/office/save" remote="true" result="updateResult"
|
||||
before="before">
|
||||
<div class="box-body">
|
||||
<div class="form-unit">区县信息报道</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page4_4" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<act:title title="" fields="2"/>
|
||||
<act:input text="区县" name="region" as="textarea" col="2" rows="3" value="${region}"/>
|
||||
<act:input text="数值" name="regionNum" as="textarea" col="2" rows="3" value="${regionNum}"/>
|
||||
<input type="hidden" name="region">
|
||||
<input type="hidden" name="regionNum">
|
||||
<% for(_region in region){ %>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
区县:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_region}" name="_region" maxlength="" class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
数值:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${regionNum[_regionLP.dataIndex]}" name="_regionNum"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2">
|
||||
<input type="button" class="increase-btn" value="+">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-footer">
|
||||
|
|
@ -34,17 +89,86 @@
|
|||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<script>
|
||||
$(".increase-btn").on("click", function () {
|
||||
$(".box-body").append(`
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
区县:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_region" maxlength="" class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
数值:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_regionNum" maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
$("body").on("click", ".decrease-btn", function () {
|
||||
$(this).parents(".row").remove();
|
||||
});
|
||||
|
||||
function before() {
|
||||
var _region = $("[name='_region']");
|
||||
var _regionNum = $("[name='_regionNum']");
|
||||
|
||||
var flag = yuan.checkBlank([
|
||||
_region,
|
||||
_regionNum
|
||||
]);
|
||||
|
||||
$("[name = 'region']").val(yuan.dom2ValueStr(_region));
|
||||
$("[name = 'regionNum']").val(yuan.dom2ValueStr(_regionNum));
|
||||
return flag;
|
||||
}
|
||||
|
||||
function updateResult(resp) {
|
||||
if (resp.state == 1) {
|
||||
act.msg("操作成功");
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 500);
|
||||
} else {
|
||||
act.error(resp.msg);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
<script src="/assets/js/echarts.min.js"></script>
|
||||
<script src="/assets/js/yuan.js"></script>
|
||||
<script src="/assets/js/echarts-wordcloud.min.js"></script>
|
||||
<script src="/assets/js/page4_4.js"></script>
|
||||
|
||||
<style>
|
||||
#page4_4 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,61 +8,412 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/voter/save" remote="true" result="updateResult">
|
||||
<act:form id="inputForm" action="${ctx}/rddb/show/voter/save" remote="true" result="updateResult"
|
||||
before="before">
|
||||
<div class="box-body">
|
||||
<div class="form-unit">统计信息</div>
|
||||
<act:title title="" fields="3"/>
|
||||
<act:input text="平均办理时长" name="averageTime" value="${averageTime}" col="2" />
|
||||
<act:input text="按时办结率" name="ontimeRate" value="${ontimeRate}" col="2" />
|
||||
<act:input text="满意率" name="satisfactionRate" value="${satisfactionRate}" col="2" />
|
||||
<act:input text="平均办理时长" name="averageTime" value="${averageTime}" col="2"/>
|
||||
<act:input text="按时办结率" name="ontimeRate" value="${ontimeRate}" col="2"/>
|
||||
<act:input text="满意率" name="satisfactionRate" value="${satisfactionRate}" col="2"/>
|
||||
|
||||
<div class="form-unit">民情分类</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="分类" name="category" value="${category}" as="textarea" col="2" rows="3"/>
|
||||
<div class="form-unit">民情分类情况/占比</div>
|
||||
<div id="category-div">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page3_3" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">民情分类情况</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="占比" name="categoryCondition" value="${categoryCondition}" as="textarea" col="2" rows="3"/>
|
||||
|
||||
<div class="form-unit">民情处理情况分析</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="数值" name="handleAnalyze" value="${handleAnalyze}" as="textarea" col="2" rows="3"/>
|
||||
|
||||
<div class="form-unit">民情反映热点关键词云</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<act:input text="词云" name="hotKey" value="${hotKey}" as="textarea" col="2" rows="3"/>
|
||||
</div>
|
||||
|
||||
<div class="box-footer">
|
||||
<input type="hidden" name="category">
|
||||
<input type="hidden" name="categoryCondition">
|
||||
<% for(_category in category){ %>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
分类:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_category}" name="_category" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
占比:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${categoryCondition[_categoryLP.dataIndex]}"
|
||||
name="_categoryCondition"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="category-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
|
||||
<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
|
||||
保 存
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-sm btn-default" id="btnCancel"
|
||||
onclick="act.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> 关 闭
|
||||
</button>
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2">
|
||||
<input type="button" class="category-increase-btn" value="+">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-unit">民情处理情况分析</div>
|
||||
<div id="handle-div">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page3_4" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<act:title title="" fields="1"/>
|
||||
<input type="hidden" name="handleAnalyze">
|
||||
<input type="hidden" name="handleAnalyzeStatus">
|
||||
<% for(_handleAnalyze in handleAnalyze){ %>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
状态:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${handleAnalyzeStatus[_handleAnalyzeLP.dataIndex]}"
|
||||
name="_handleAnalyzeStatus"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
数值:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" value="${_handleAnalyze}" name="_handleAnalyze" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="handle-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2">
|
||||
<input type="button" class="handle-increase-btn" value="+">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-unit">民情反映热点关键词云</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-10 col-sm-offset-2">
|
||||
<div id="page3_5" style="height:250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<act:title title="" fields="1"/>
|
||||
<input type="hidden" name="hotKey">
|
||||
<div id="hot-div" class="row">
|
||||
<% for(_hotKey in hotKey){ %>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label key-label">
|
||||
关键词:
|
||||
</label>
|
||||
<div class="key-div">
|
||||
<input type="text" value="${_hotKey}" name="_hotKey" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="hot-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-2">
|
||||
<input type="button" class="hot-increase-btn" value="+">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</act:form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
|
||||
<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i>
|
||||
保 存
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-sm btn-default" id="btnCancel"
|
||||
onclick="act.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> 关 闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</act:form>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
|
||||
<script>
|
||||
$(".category-increase-btn").on("click", function () {
|
||||
$("#category-div").append(`
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
分类:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_category" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
占比:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text"
|
||||
name="_categoryCondition"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="category-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
$("body").on("click", ".category-decrease-btn", function () {
|
||||
$(this).parents(".row").remove();
|
||||
});
|
||||
|
||||
$(".handle-increase-btn").on("click", function () {
|
||||
$("#handle-div").append(`
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
状态:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text"
|
||||
name="_handleAnalyzeStatus"
|
||||
maxlength=""
|
||||
class="form-control" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-sm-4">
|
||||
数值:
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" name="_handleAnalyze" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="handle-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
$("body").on("click", ".handle-decrease-btn", function () {
|
||||
$(this).parents(".row").remove();
|
||||
});
|
||||
|
||||
$(".hot-increase-btn").on("click", function () {
|
||||
$("#hot-div").append(`
|
||||
<div class="col-xs-5">
|
||||
<div class="form-group">
|
||||
<label class="control-label key-label">
|
||||
关键词:
|
||||
</label>
|
||||
<div class="key-div">
|
||||
<input type="text" name="_hotKey" maxlength=""
|
||||
class="form-control"
|
||||
placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<div class="col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label" style="width: 100%;text-align: right">
|
||||
<input type="button" class="hot-decrease-btn" value="-">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
$("body").on("click", ".hot-decrease-btn", function () {
|
||||
$(this).parents(".col-xs-1").prev().remove();
|
||||
$(this).parents(".col-xs-1").remove();
|
||||
});
|
||||
|
||||
function before() {
|
||||
var averageTime = $("[name='averageTime']");
|
||||
var ontimeRate = $("[name='ontimeRate']");
|
||||
var satisfactionRate = $("[name='satisfactionRate']");
|
||||
|
||||
var _category = $("[name='_category']");
|
||||
var _categoryCondition = $("[name='_categoryCondition']");
|
||||
var _handleAnalyze = $("[name='_handleAnalyze']");
|
||||
var _handleAnalyzeStatus = $("[name='_handleAnalyzeStatus']");
|
||||
var _hotKey = $("[name='_hotKey']");
|
||||
|
||||
var flag = yuan.checkBlank([
|
||||
averageTime,
|
||||
ontimeRate,
|
||||
satisfactionRate,
|
||||
_category,
|
||||
_categoryCondition,
|
||||
_handleAnalyze,
|
||||
_handleAnalyzeStatus,
|
||||
_hotKey
|
||||
]);
|
||||
|
||||
$("[name = 'category']").val(yuan.dom2ValueStr(_category));
|
||||
$("[name = 'categoryCondition']").val(yuan.dom2ValueStr(_categoryCondition));
|
||||
$("[name = 'handleAnalyze']").val(yuan.dom2ValueStr(_handleAnalyze));
|
||||
$("[name = 'handleAnalyzeStatus']").val(yuan.dom2ValueStr(_handleAnalyzeStatus));
|
||||
$("[name = 'hotKey']").val(yuan.dom2ValueStr(_hotKey));
|
||||
return flag;
|
||||
}
|
||||
|
||||
function updateResult(resp) {
|
||||
if (resp.state == 1) {
|
||||
act.msg("操作成功");
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 500);
|
||||
} else {
|
||||
act.error(resp.msg);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
<script src="/assets/js/echarts.min.js"></script>
|
||||
<script src="/assets/js/yuan.js"></script>
|
||||
<script src="/assets/js/echarts-wordcloud.min.js"></script>
|
||||
|
||||
<script src="/assets/js/page3_3.js"></script>
|
||||
<script src="/assets/js/page3_4.js"></script>
|
||||
<script src="/assets/js/page3_5.js"></script>
|
||||
|
||||
<style>
|
||||
#page3_3 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
#page3_4 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
#page3_5 {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.key-div {
|
||||
width: 60%;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.key-label {
|
||||
width: 40%;
|
||||
display: inline-block
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
axisLabel: {
|
||||
show: true
|
||||
},
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
data: monthArr,
|
||||
},
|
||||
yAxis: {
|
||||
max: 100,
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
(function () {
|
||||
act.get("/api/statistics/voter/people_condition/analyze", function (resp) {
|
||||
var statusArr = resp.data.statusArr;
|
||||
var countArr = resp.data.countArr;
|
||||
data = [{
|
||||
name: "已受理",
|
||||
value: countArr[0]
|
||||
},
|
||||
{
|
||||
name: "已办结",
|
||||
value: countArr[1]
|
||||
},
|
||||
{
|
||||
name: "未受理",
|
||||
value: countArr[2]
|
||||
},
|
||||
{
|
||||
name: "办理中",
|
||||
value: countArr[3]
|
||||
}
|
||||
];
|
||||
var data=new Array();
|
||||
statusArr.forEach((status,i)=>{
|
||||
data.push({
|
||||
"name":status,
|
||||
"value":countArr[i]
|
||||
})
|
||||
});
|
||||
|
||||
arrName = getArrayValue(data, "name");
|
||||
arrValue = getArrayValue(data, "value");
|
||||
sumValue = eval(arrValue.join('+'));
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>象山县人大驾驶舱</title>
|
||||
<title>象山人大数据驾驶舱</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
</head>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>人大办公</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="allname">象山县人大驾驶舱</div>
|
||||
<div class="allname">象山人大数据驾驶舱</div>
|
||||
<div class="charts">
|
||||
<div>
|
||||
<p class="name">联络站概况</p>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>象山县人大驾驶舱</title>
|
||||
<title>象山人大数据驾驶舱</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
<link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<p>人大办公</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="allname">象山县人大驾驶舱</div>
|
||||
<div class="allname">象山人大数据驾驶舱</div>
|
||||
<div class="charts">
|
||||
<div class="numbox">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>象山县人大驾驶舱</title>
|
||||
<title>象山人大数据驾驶舱</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
</head>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>人大办公</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="allname">象山县人大驾驶舱</div>
|
||||
<div class="allname">象山人大数据驾驶舱</div>
|
||||
<div class="charts">
|
||||
<div>
|
||||
<p class="name">关键指标</p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>象山县人大驾驶舱</title>
|
||||
<title>象山人大数据驾驶舱</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2656742_5xdkb8jf9mn.css">
|
||||
</head>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>人大办公</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="allname">象山县人大驾驶舱</div>
|
||||
<div class="allname">象山人大数据驾驶舱</div>
|
||||
<div class="charts">
|
||||
<div class="info">
|
||||
<p class="name">基础情况</p>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue