说明：
本文是基础篇大佬可以不用看了。本次实例用到Vue2、Vant2、Highcharts图表甘特图等，CDN引入方式。此外也可以自行添加组件Echarts、ElementUI等等。为了能方便理解，有些地方的代码比较啰嗦多余。是最普通的JSP、Html页面，非uniapp开发环境。只是一个举例demo，样式设计等等可以自己调整。
一、
进入正题 可以先看一下效果图：
二、
JSP页面：
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>项目看板(移动端)</title>
<script src="../new/js/vue@2.7.16.js"></script>
<link rel="stylesheet" href="../new/js/element-ui@2.15.14/index.css">
<script src="../new/js/element-ui@2.15.14/index.js"></script>
<link rel="stylesheet" href="../new/js/vant@2.13.2/index.min.css">
<script src="../new/js/vant@2.13.2/vant.min.js"></script>
<script src="../new/js/echarts/echarts.js"></script>
<script src="../new/js/echarts/highcharts-gantt.js"></script>
<link rel="stylesheet" href="../new/css/spectaculars/spectacularsByMobile.css">
<style>
/* 引入OTF字体 */
@font-face {
font-family: 'ysbty'; /* 自定义的字体名称 */
src: url('../../../new/js/font-style/ysbty.otf') format('opentype'); /* OTF字体文件路径 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体风格 */
}
/* 引入TTF字体 */
@font-face {
font-family: 'pmzd'; /* 另一个自定义的字体名称 */
src: url('../../../new/js/font-style/pmzd.ttf') format('truetype'); /* TTF字体文件路径 */
font-weight: bold; /* 字体粗细 */
font-style: italic; /* 字体风格 */
}
/*滚动条样式*/
div::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
background-color: transparent !important;
}
div::-webkit-scrollbar-track {
border-radius: 5px;
background-color: #00489b !important;
background-color: transparent !important;
}
div::-webkit-scrollbar-thumb {
background-color: #00489b !important;
}
/*tabs页样式*/
.van-tabs__nav--line.van-tabs__nav--complete{
background-color: #181818;
}
.van-tab--active{
color: #00FFFF;
}
.van-tabs__line{
background-color: #00FFFF;
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="header">
<div class="one">
<div style="width: 25%;height: 40px;">LOGO</div>
<img src="../../new/image/spectaculars/app_menu_icon.svg" alt="" style="position: absolute;right: 30px;" @click="showPopup">
<van-popup position="right" v-model="show" :style="{height: '100%',width:'50%'}">内容</van-popup>
</div>
<div class="two">
<div class="title" style="margin-top: 20px;">某某某某某某某某某项目</div>
<div class="con">
<div style="font-size: 28px;color: #00FFFF;font-family: 'pmzd';margin-top: 10px;">
项目综合看板
</div>
<img src="../../new/image/spectaculars/app_guang.png" alt="" style="width: 100%;height: 150px; position: absolute;">
<div class="group" style="margin-top: 25px;">
<div class="item active">
项目概况
</div>
<div class="item" style="margin-left: -5%;">
项目进度
</div>
</div>
<div class="group">
<div class="item">
施工过程
</div>
<div class="item" style="margin-left: -5%;">
项目现场
</div>
</div>
</div>
</div>
</div>
<div class="content">
<van-tabs v-model="active" scrollspy sticky>
<van-tab title="经营专项">
<div class="jyzx">
<img src="../../new/image/spectaculars/app_con_background.svg" alt="" width="100%" style="position: absolute;top: 0px;">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">经营专项一览</div>
<div style="font-size: 12px; color: #878787;">（单位：万元）</div>
</div>
<div class="con">
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;justify-content: center;align-items: center;">
<div>
<div style="font-size: 16px;">项目预算/资金计划</div>
<div style="font-size: 26px;font-family: 'pmzd';font-weight: bold;">59,381.04/29,381.04</div>
</div>
</div>
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;">
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">项目收支</div>
<div style="font-size: 18px;color: #00FFFF">23,456.78</div>
<img src="../../new/image/spectaculars/app_jyzx_xmszIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">当前成本</div>
<div style="font-size: 18px;color: #00FFFF">23,456.78</div>
<img src="../../new/image/spectaculars/app_jyzx_dqcbIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">当前利润</div>
<div style="font-size: 18px;color: #00FFFF">23,456.78</div>
<img src="../../new/image/spectaculars/app_jyzx_dqlrIcon.png" alt="" width="45px">
</div>
</div>
</div>
</div>
<div style="width: 208px;height: 42px;margin-top: 20px;" @click="onJyzxyl()">
<img src="../../new/image/spectaculars/app_ckxq.png" alt="" width="100%" height="100%">
</div>
</div>
</van-tab>
<van-tab title="材料专项">
<div class="clzx">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">材料专项一览</div>
<div style="font-size: 12px; color: #878787;">（单位：万元）</div>
</div>
<div class="con" >
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;justify-content: center;align-items: center;">
<div>
<div style="font-size: 16px;">项目预算/资金计划</div>
<div style="font-size: 26px;font-family: 'pmzd';font-weight: bold;">59,381.04/29,381.04</div>
</div>
</div>
<div id="review_box" style="width: 100%;height: 140px;list-style: none;background: #2b3038; display: flex;flex-direction: column; margin-top: 15px;overflow: hidden;">
<ul id="roll1" ref="roll1" style="width: 90%;margin-left: 5%;list-style: none;">
<li style="width: 90%;margin-top: 10px; display: flex;flex-direction: row;align-items: center;" v-for="item in 8">
<img src="../../new/image/spectaculars/app_clzx_tzIcon.svg" alt="" width="12px"height="12px">
<div style="font-size: 14px;color: #FFF;margin-left: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">某某某某某某材料验收消息通知！</div>
</li>
</ul>
<ul id="roll2" ref="roll2" style="width: 90%;margin-left: 5%;list-style: none;"></ul>
</div>
</div>
</div>
<div style="width: 208px;height: 42px;margin-top: 20px;">
<img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%">
</div>
</div>
</van-tab>
<van-tab title="合同信息">
<div class="htxx">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">合同信息一览</div>
<div style="font-size: 12px; color: #878787;">（单位：份）</div>
</div>
<div class="con">
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">项目合同信息</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">1,225</div>
</div>
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">同比增减</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">+50%</div>
</div>
</div>
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;">
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">分包合同数</div>
<div style="font-size: 18px;color: #00FFFF">123</div>
<img src="../../new/image/spectaculars/app_htxx_fbhtIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">劳务合同数</div>
<div style="font-size: 18px;color: #00FFFF">865</div>
<img src="../../new/image/spectaculars/app_htxx_lwhtIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">材料合同数</div>
<div style="font-size: 18px;color: #00FFFF">85</div>
<img src="../../new/image/spectaculars/app_htxx_clhtIcon.png" alt="" width="45px">
</div>
</div>
</div>
</div>
<div style="width: 208px;height: 42px;margin-top: 20px;">
<img src="../../new/image/spectaculars/app_ckxq.png" alt="" width="100%" height="100%">
</div>
</div>
</van-tab>
<van-tab title="项目进度甘特图">
<div class="xmjdgtt">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div>
<div style="font-size: 12px; color: #878787;"></div>
</div>
<div class="con">
<div id="xmjdgttChart" style="width: 900px;">
</div>
</div>
</div>
<div style="width: 208px;height: 42px;margin-top: 20px;">
<img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%">
</div>
</div>
</van-tab>
<van-tab title="项目现场信息">
<div class="xmxcxx">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div>
<div style="font-size: 12px; color: #878787;"></div>
</div>
<div class="con">
<div class="group" style="width: 142px;margin-bottom: 20px;" v-for="item in 6">
<div style="position: relative;">
<img src="../../new/image/spectaculars/picture1.jpg" alt="" width="100%" height="93px" style="border: 2px solid rgba(0, 255, 255, 0.6);">
<img src="../../new/image/spectaculars/app_xmxcxx_border.svg" alt="" style="position: absolute;left: 3px;top: 3px;">
</div>
<div style="width: 100%;height: 35px;margin-top: 10px; font-size: 12px;overflow: hidden;line-height: 18px; -webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;color: #FFFFFF;">
某某某项目-第一现场-第15块地第6号摄像头
</div>
</div>
</div>
</div>
<div style="width: 208px;height: 42px;margin-top: 20px;">
<img src="../../new/image/spectaculars/app_ckgd.png" alt="" width="100%" height="100%">
</div>
</div>
</van-tab>
<van-tab title="项目进度">
<div class="xmjd">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">项目进度</div>
<div style="font-size: 12px; color: #878787;"></div>
</div>
<div class="con">
<div class="group">
招标信息
</div>
<div class="group">
投标信息
</div>
<div class="group">
立项信息
</div>
<div class="group">
设计信息
</div>
<div class="group">
施工过程信息
</div>
<div class="group">
竣工验收信息
</div>
</div>
</div>
</div>
</van-tab>
<van-tab title="本月安全">
<div class="byaqyl">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">本月安全一览</div>
<div style="font-size: 12px; color: #878787;">（单位：个）</div>
</div>
<div class="con">
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">隐患数</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">15</div>
</div>
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">同比增减</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">-25%</div>
</div>
</div>
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;">
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">安全培训次数</div>
<div style="font-size: 18px;color: #00FFFF">123</div>
<img src="../../new/image/spectaculars/app_aqyl_pxcsIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">安全简报数量</div>
<div style="font-size: 18px;color: #00FFFF">865</div>
<img src="../../new/image/spectaculars/app_htxx_lwhtIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">安全会议数量</div>
<div style="font-size: 18px;color: #00FFFF">85</div>
<img src="../../new/image/spectaculars/app_htxx_clhtIcon.png" alt="" width="45px">
</div>
</div>
</div>
</div>
</div>
</van-tab>
<van-tab title="本月质量">
<div class="byzlyl">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">本月质量一览</div>
<div style="font-size: 12px; color: #878787;">（单位：项）</div>
</div>
<div class="con">
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">未整改项数</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">25</div>
</div>
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">同比增减</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">-25%</div>
</div>
</div>
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;">
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">检查次数</div>
<div style="font-size: 18px;color: #00FFFF">123</div>
<img src="../../new/image/spectaculars/app_zlyl_jccsIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">自检次数</div>
<div style="font-size: 18px;color: #00FFFF">865</div>
<img src="../../new/image/spectaculars/app_zlyl_zjcsIcon.png" alt="" width="45px">
</div>
<div style="width: 94px;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">整改项数</div>
<div style="font-size: 18px;color: #00FFFF">85</div>
<img src="../../new/image/spectaculars/app_zlyl_zgxsIcon.png" alt="" width="45px">
</div>
</div>
</div>
</div>
</div>
</van-tab>
<van-tab title="证件资质">
<div class="zjzzyl">
<div class="box">
<div class="title">
<div style="font-size: 16px; color: #FFFFFF;margin-left: 15px;">证件资质一览</div>
<div style="font-size: 12px; color: #878787;">（单位：个）</div>
</div>
<div class="con">
<div style="width: 100%;height: 80px;border-radius: 3px;background-color: #05DEF6;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">资质信息</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">85</div>
</div>
<div style="width: 50%">
<div style="margin-left: 20px;font-size: 16px;">同比增减</div>
<div style="margin-left: 20px;font-size: 26px;font-family: 'pmzd';font-weight: bold;">+25%</div>
</div>
</div>
<div style="width: 100%;display: flex;flex-direction: row;justify-content: space-between; margin-top: 15px;">
<div style="width: 46%;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">人员培训数量</div>
<div style="font-size: 18px;color: #00FFFF">23</div>
<img src="../../new/image/spectaculars/app_zzyl_pxcsIcon.png" alt="" width="45px">
</div>
<div style="width: 46%;height: 140px;border-radius: 3px;background: #2b3038;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div style="font-size: 12px;color: #FFFFFF;">人员证件数量</div>
<div style="font-size: 18px;color: #00FFFF">865</div>
<img src="../../new/image/spectaculars/app_zzyl_zjslIcon.png" alt="" width="45px">
</div>
</div>
</div>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</template>
</div>
</body>
<script src="../new/js/app/spectaculars/spectacularsByMobile.js"></script>
</html>
移动端页面配置：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,userscalable=no"/>
自定义字体引入：
一种是OTF格式一种是TTF格式类型不一样需要注意，样式自行修改
滚动条样式这里可以省略，我这里是因为样式被覆盖了所以多写一遍。
template标签实时渲染页面Vue2中需要用到，Vue3中可以省略，具体两者有什么区别去看官方文档吧因为我也不知道。哈哈哈
页面上主要是用到一个Vnat的tabs标签组件 吸顶定位样式。
<van-tabs v-model="active" scrollspy sticky>
<van-tab v-for="index in 8" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>具体参数配置可以看官方文档有的时候网不太好可能进不去。注意版本区别与兼容性。
https://vant-ui.github.io/vant/v2/#/zh-CN/
https://vant-ui.github.io/vant/v2/#/zh-CN/https://vant-ui.github.io/vant/#/zh-CNhttps://vant-ui.github.io/vant/#/zh-CN其他地方就没什么好说的了。
三、
CSS:
样式这里随便看看就行了，有很多也可以省略实现，自己修改吧
html, body,#app {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #181818;
}
#app {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.header{
width: 100%;
height: 35%;
padding-top: 2%;
display: flex;
flex-direction: column;
}
.header .one{
width: 100%;
height: 10%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
}
.header .two{
width: 100%;
height: 90%;
text-align: center;
}
.header .two .title{
font-size: 28px;
color: #ffffff;
font-family: 'pmzd';
}
.header .two .con{
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.header .two .con .group{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
color: #FFFFFF;
font-family: 'ysbty';
margin-top: 20px;
}
.header .two .con .group .item{
width: 45%;
height: 50px;
font-size: 20px;
background-image: url('../../../new/image/spectaculars/app_btn_none.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.header .two .con .group .active {
background-image: url('../../../new/image/spectaculars/app_btn_action.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.header .three{
width: 100%;
overflow: auto;
white-space: nowrap;
}
.content{
width: 100%;
padding-bottom: 30px;
}
/*经营专项*/
.content .jyzx{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.content .jyzx .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .jyzx .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .jyzx .con{
width: 100%;
padding: 15px;
}
/*材料专项*/
.content .clzx{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .clzx .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .clzx .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .clzx .con{
width: 100%;
padding: 15px;
}
/*合同信息*/
.content .htxx{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .htxx .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .htxx .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .htxx .con{
width: 100%;
padding: 15px;
}
/*项目进度甘特图*/
.content .xmjdgtt{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .xmjdgtt .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .xmjdgtt .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .xmjdgtt .con{
width: 100%;
padding: 15px;
background-color: #2b3038;
overflow: auto;
}
/*项目现场信息*/
.content .xmxcxx{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .xmxcxx .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .xmxcxx .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .xmxcxx .con{
width: 100%;
padding: 15px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
/*项目进度*/
.content .xmjd{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .xmjd .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .xmjd .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .xmjd .con{
width: 100%;
padding: 15px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.content .xmjd .con .group{
width: 140px;
height: 60px;
margin-bottom: 20px;
color: #FFF;
font-size: 20px;
font-family: 'ysbty';
background-image: url('../../../new/image/spectaculars/app_button_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*本月安全一览*/
.content .byaqyl{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .byaqyl .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .byaqyl .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .byaqyl .con{
width: 100%;
padding: 15px;
}
/*本月质量一览*/
.content .byzlyl{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .byzlyl .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .byzlyl .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .byzlyl .con{
width: 100%;
padding: 15px;
}
/*证件资质一览*/
.content .zjzzyl{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content .zjzzyl .box{
width: 90%;
margin-top: 30px;
border-left: 2px solid #142e3b;
border-right: 2px solid #142e3b;
border-bottom: 2px solid #142e3b;
}
.content .zjzzyl .title{
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url('../../../new/image/spectaculars/app_title_background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.content .zjzzyl .con{
width: 100%;
padding: 15px;
}四、
JS:
const vm = new Vue({
el: '#app',
data() {
return {
active: 0,
show: false,
rolltimer:null,
}
},
created() {
},
mounted() {
var $this=this;
/*点击切换样式*/
$(".header .two .con .group div").each(function () {
//给当前项添加点击事件（点击后切换样式）
$(this).bind('click', function () {
// 移除其他所有项的active类
$(".header .two .con .group div").each(function () {
$(this).removeClass('active');
})
// 给当前项添加active类
$(this).addClass('active');
})
});
$this.roll(60);//材料专项一览滚动
$this.xmjdGantChart();//项目进度甘特图
},
methods: {
/*点击右侧弹出*/
showPopup() {
this.show = true;
},
/*材料专项一览滚动*/
roll(t){
var $this=this;
var ul1 = $this.$el.querySelector('#roll1');
var ul2 = $this.$el.querySelector('#roll2');
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
setInterval($this.rollStart, t);
},
rollStart(t){
var ul1 = document.getElementById("roll1");
var ul2 = document.getElementById("roll2");
var ulbox = document.getElementById("review_box");
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
},
/*项目进度甘特图*/
xmjdGantChart(){
const day = 24 * 36e5, today = Math.floor(Date.now() / day) * day;
var startDay1=Date.parse('2024-09-01');
var endDay1=Date.parse('2024-09-03');
var startDay2=Date.parse('2024-09-05');
var endDay2=Date.parse('2024-09-07')+ (23.9 * 60 * 60 * 1000);//结束时间加一天精确到当天结束（00:00点）
const options = {
chart: {
backgroundColor: 'rgba(0,0,0,0)',
},
plotOptions: {
series: {
borderRadius: '50%',
connectors: {
dashStyle: 'ShortDot',
lineWidth: 2,
radius: 5,
startMarker: {
enabled: false
}
},
groupPadding: 0,
dataLabels: [{
enabled: true,
align: 'left',
format: '{point.name}',
padding: 10,
style: {
fontWeight: 'normal',
textOutline: 'none'
}
}, {
enabled: true,
align: 'right',
format: '{#if point.completed}{(multiply ' +
'point.completed.amount 100):.0f}%{/if}',
padding: 10,
style: {
fontWeight: 'normal',
textOutline: 'none',
opacity: 0.6
}
}]
}
},
series: [{
name: '工程一类',//类别名称（注意这里！！缺少这里的name属性图表会出不来）
data: [{
name: '项目一',//项目名称
id: '90a784f184c64c729e03fec63e829f7e',//项目id
owner: '张总',//项目创建人
}, {
name: '任务一',//任务名称（任务第一次）
id: 'b23d60f2f5bc40d2a55139e07e94df56',//任务id
dependency: 'b23d60f2f5bc40d2a55139e07e94df56',//上一次任务所属id(第一次任务可以是他本身的id)
parent: '90a784f184c64c729e03fec63e829f7e',//任务父级id（项目id）
start: startDay1,//开始时间（时间戳）
end: endDay1,//结束时间（时间戳）
completed: {
amount: 0.2,//完成进度（百分比,0为百分之0,1为百分之百）
},
owner: '李工',//任务创建人
}, {
name: '任务二',//任务名称（任务第二次）
id: '16fe05c5f6544b118af5ae3e25f2998e',//任务id
dependency: 'b23d60f2f5bc40d2a55139e07e94df56',//任务所属id（上一次任务所属id,这个参数可以理解为一个项目可以分为很多次任务完成,此次任务应该接住上一次的任务的id,所以这里应该是第一次任务的id）
parent: '90a784f184c64c729e03fec63e829f7e',//任务父级id（项目id）
start: startDay2,//开始时间（时间戳）
end: endDay2,//结束时间（时间戳）
completed: {
amount: 1,//完成进度（百分比）
},
owner: '王工',//任务创建人
}]
}],
tooltip: {
pointFormat: '<span style="font-weight: bold">{point.name}</span><br>' +
'{point.start:%e %b}' +
'{#unless point.milestone} → {point.end:%e %b}{/unless}' +
'<br>' +
'{#if point.completed}' +
'完成进度: {multiply point.completed.amount 100}%<br>' +
'{/if}' +
'创建人: {#if point.owner}{point.owner}{else}unassigned{/if}'
},
title: {
text: '',
enabled: false,
},
//去水印
credits: {
enabled: false,
},
xAxis: [{
labels: {
style: {
color: '#FFFFFF',
},
},
dateTimeLabelFormats: {
day: '%e<br><span style="opacity: 0.5; font-size: 0.7em">%a</span>'
},
grid: {
borderWidth: 0
},
gridLineWidth: 1,
}],
yAxis: {
grid: {
borderWidth: 0
},
gridLineWidth: 0,
labels: {
style: {
color: '#FFFFFF',
},
symbol: {
width: 8,
height: 6,
x: -4,
y: -2
}
},
staticScale: 30
},
// scrollbar: {
// enabled: true,//显示滚动条
// },
};
//图表配置中文显示
Highcharts.setOptions({
lang:{
contextButtonTitle:"图表导出菜单",
decimalPoint:".",
downloadJPEG:"下载JPEG图片",
downloadPDF:"下载PDF文件",
downloadPNG:"下载PNG文件",
downloadSVG:"下载SVG文件",
drillUpText:"返回 {series.name}",
loading:"加载中",
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
noData:"没有数据",
numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
printChart:"打印图表",
resetZoom:"恢复缩放",
resetZoomTitle:"恢复图表",
shortMonths: [ "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
thousandsSep:",",
weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
}
});
Highcharts.ganttChart('xmjdgttChart', options);
},
/*经营专项一览点击查看更多*/
onJyzxyl(){
console.log(66666)
},
/*获取经营专项一览数据*/
getJyzxData(){
axios.get('http://localhost:8080/******/*******', {
params: {
//参数ID
}
}).then(function (response) { //请求成功
console.log(response);
}).catch(function (error) { //请求失败
console.log(error);
});
}
}
})
列表无限滚动这里需要用Vue获取页面DOM元素，不能直接使用innerHTML
甘特图配置这里是显示中文
其他的就和常规Echarts图表配置方法一样，细节样式参考官方文档即可
如果要接后端数据的话用Vue的axios或者ajax请求即可，如果用axios请求的话需要另外引入axios.min.js文件
扫一扫
647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
