餐饮微信小程序案例_Vue时间轴 vue

Vue时间轴 vue-light-timeline的用法说明       这篇文章主要介绍了Vue时间轴 vue-light-timeline的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

自己写个好看点的样式就行了

补充知识：Vue可移动水平时间轴

里程碑时间轴具体实现

效果图

编辑里程碑效果图

 template 
 div 
 !-- mile-stone :projectId="projectData.proId" :projectName="projectData.proName" :proNum="projectData.proNum" /mile-stone -- 
 div 
 div 
 el-button @click="mileStoUpdateVisible = true" type="primary" 编辑里程碑 /el-button 
 /div 
 div align="center" 
 div 里程碑状态： /div 
 div 开始 img src="../../assets/images/timeLineA.png" /div 
 div 超期 img src="../../assets/images/timeLineB.png" /div 
 div 关闭 img src="../../assets/images/timeLineC.png" /div 
 /div 
 div @click="moveLeft" 
 img src="../../assets/arrow_left_blue.png" / 
 !-- div /div -- 
 !-- div 上 /div -- 
 /div 
 div v-if="eStatistics" 
 ul ref="mytimeline" 
 li v-for="(item,index) in timeLineList" :key="index" 
 el-tooltip placement="top" effect="light" 
 div slot="content" 
 el-row 
 el-col :span="24" {{'阶段名称：'+item.stageName}} /el-col 
 /el-row 
 el-row 
 el-col :span="24" {{'阶段目标：'+item.stageTarget}} /el-col 
 /el-row 
 el-row 
 el-col :span="24" {{'开始时间：'+item.startTime}} /el-col 
 /el-row 
 el-row 
 el-col :span="24" {{'结束时间：'+item.endTime}} /el-col 
 /el-row 
 el-row 
 el-col :span="24" {{'验收标准：'+item.acceptStar}} /el-col 
 /el-row 
 el-row 
 el-col :span="24" 
 span v-if="item.milepostState==='1'" 里程碑状态：打开 /span 
 span v-if="item.milepostState==='2'" 里程碑状态：超期 /span 
 span v-if="item.milepostState==='3'" 里程碑状态：关闭 /span 
 /el-col 
 /el-row 
 /div 
 !--圈圈节点-- 
 !-- div @click="changeActive(index)" : /div -- 
 div 
 div 
 img v-if="item.milepostState==='1'"
 src="../../assets/images/timeLineA.png" 
 img v-if="item.milepostState==='2'"
 src="../../assets/images/timeLineB.png" 
 img v-if="item.milepostState==='3'"
 src="../../assets/images/timeLineC.png" 
 /div 
 /div 
 /el-tooltip 
 !--线-- 
 : /div 
 !--标注-- 
 div 
 div {{item.endTime}} /div 
 el-tooltip placement="top" effect="light" 
 div slot="content" {{item.endTime}} br/ {{item.stageName}} /div 
 div {{item.stageName}} /div 
 /el-tooltip 
 /div 
 /li 
 /ul 
 /div 
 div @click="moveRight" 
 img src="../../assets/arrow_right_blue.png" / 
 div 下 /div 
 /div 
 /div 
 el-dialog :title="titleMessage" center :visible="mileStoUpdateVisible" width="50%"
 @open="onMileStoUpdateVisibleOpen()" @close="closeMileStone()" 
 stone-detail :projectId="this.projectId" :proNum="this.projectData.proNum" @closeMileStone="closeMileStone()" ref="stone-detail"
 @refreshMileStoneData="searchMileStone()" /stone-detail 
 /el-dialog 
 /div 
 /div 
 /template 
 script 
 import API from '../../api/api_project';
 import StoneDetail from "../..//stonedetail"
 import MemberDetail from "../..//memberdetail.vue"
 export default {
 name: 'project-detail',
 components:{
 MemberDetail,
 StoneDetail,
 data() {
 return {
 eStatistics:true,
 loading: false,
 titleMessage: '',
 mileStoUpdateVisible: false,
 my_timeline_item_line_last: "my_timeline_item_line_last",
 my_timeline_item_line_not_last: "my_timeline_item_line_not_last",
 menuTree:[],
 timeLineList: [],
 page:{
 total:0,
 pageNum: 0,
 pageSize: 10,
 model: {
 select: "",
 searchConent: "",
 projectId: "",
 proName:"",
 projectData:{
 proId: '',
 proNum: '',
 proName: '',
 hwDept: '',
 hwPo: '',
 busineMode: '1',
 buildProDate: '',
 startDate: '',
 expEndDate: '',
 hwPoDate: '',
 hwPoEndDate:'',
 realEndDate: '',
 proManageId:'',
 proQa:'',
 hwPm:'',
 proEstNum: '0',
 proState:'1'
 proPeoId:'',
 projectId:'',
 proPeoUpdateVisible:false,
 projectMember: [],
 mounted(){
 this.projectId=this.$route.params.projectId
 this.searchMileStone()
 this.sortDataArray(this.timeLineList)
 //到数据库获取projectId对应的信息列表存入projectData
 API.getProjectInfo(this.projectId).then((data)= {
 this.projectData=data.data;
 this.projectData.busineMode = this.projectData.busineMode.toString();
 this.projectData.proState = this.projectData.proState.toString();
 this.search();
 methods: {
 searchMileStone() {
 console.log('项目id：'+this.projectId)
 let params={
 proId:this.projectId,
 API.getMileStoneList(params).then(data = {
 let result = data.data
 if (result result.list) {
 if(this.timeLineList.length 0){
 this.timeLineList.splice(0,this.timeLineList.length);
 for(var i=0;i result.list.length;i++){
 this.timeLineList.splice(i, 1, result.list[i])
 this.sortDataArray(this.timeLineList)
 },({msg})= {
 this.$message.error(msg);
console.log('刷新里程碑列表')
console.log(this.timeLineList)
 closeMileStone() {
 this.mileStoUpdateVisible = false;
 // this.projectId = '';
 onMileStoUpdateVisibleOpen() {
 this.titleMessage = this.projectData.proNum + '项目里程碑';
 this.$nextTick(() = {
 let form = this.$refs["stone-detail"];
 form.initPage();
 changeActive(index) {
 this.timeIndex = index;
 moveLeft() {
 let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
 let listNum = 0;
 if (Math.abs(marginLeft) 10) {
 this.$refs.mytimeline.style.marginLeft = marginLeft + 120 + 'px';
 moveRight() {
 let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
 if (marginLeft = 10 (marginLeft = -(this.timeLineList.length * 120))) {
 this.$refs.mytimeline.style.marginLeft = marginLeft - 120 + 'px';
//对数组根据日期进行排序
 sortDataArray(dataArray) {
 return dataArray.sort(function (a, b) {
 return Date.parse(a.endTime.replace(/-/g, "/")) - Date.parse(b.endTime.replace(/-/g, "/"));
 sortByKey(array,key){
 return array.sort(function(a,b){
 var y = a[key];
 var x = b[key];
 return((x y) -1:((x y) 1:0));
 handleCurrentChange(val) {
 this.page.pageNum = val ;
 this.search();
 handleSizeChange(val) {
 this.page.pageSize = val;
 this.search();
 handleSearch(){
 this.page.pageNum= 0;
 this.search();
 /script 
 .content {
 height: 100px;
 .my_timeline_next {
 float: left;
 display: inline-block;
 background-color: #FCFCFC;
 cursor: pointer;
 .my_timeline_prev {
 width: 50px;
 float: left;
 margin-top: 110px;
 .my_timeline_next {
 width: 34px;
 margin-top: 80px;
 .el-col-24 {
 margin-left: 10px;
 padding-bottom: 5px;
 .el-col-12 {
 margin-left: 10px;
 .tooltip {
 .ul_box {
 width: 80%;
 height: 120px;
 display: inline-block;
 float: left;
 margin-top: 50px;
 overflow: hidden;
 .my_timeline_item {
 display: inline-block;
 width: 150px;
 .my_timeline_node {
 background-color: #FCFCFC;
 box-sizing: border-box;
 border-radius: 50%;
 cursor: pointer;
 width: 40px;
 height: 40px;
 .node_picture {
 //margin-top: 20px;
 height: 25px;
 width: 25px;
 margin-left: 5px;
 margin-bottom: -7px;
 .my_timeline_picture {
 margin-top: 13px;
 height: 25px;
 width: 25px;
 .my_timeline_node.active {
 background-color: #fff !important;
 border: 6px solid #f68720;
 .my_timeline_item_line_last {
 width: 100%;
 height: 10px;
 margin: -14px 0 0 28px;
 border-left: none;
 .my_timeline_item_line_not_last {
 width: 100%;
 height: 10px;
 margin: -14px 0 0 25px;
 border-top: 2px solid #E4E7ED;
 border-left: none;
 .my_timeline_item_content {
 margin: 10px 0 0 -10px;
 width: 90%; /*根据自己项目进行定义宽度*/
 font-size: 14px;
 . {
 width: 80%;
 height: 250px;
 padding-bottom: 50px;
 overflow: hidden; /*设置超出的部分进行影藏*/
 text-overflow: elli凡科抠图is; /*设置超出部分使用省略号*/
 white-space: nowrap; /*设置为单行*/
 font-size: 14px;
 .state_grade.process_wrap{
 border-color: #e4ebf0;
 margin-top: 150px;
 border-radius: 2px;
 padding-bottom: 10px;
 .fall-back {
 float:right;
 margin-right: 20px;
 margin-bottom:50px;
 .state_grade{
 border: 1px solid #e6e6e6;
 background: #FCFCFC;
 padding: 10px;
 //position: relative;
 /*height: 90px;*/
 height: 250px;
 margin-bottom: 15px;
 /*margin-top: 15px;*/
 .title_top{
 height: 33px;
 .obj_tit_wrap{
 border-bottom: 1px solid #e6e6e6;
 padding-bottom: 3px;
 font-size: 14px;
 .obj_tit_mile{
 width: 150px;
 height: 35px;
 .tit_deco{
 color: #9a9a9a;
 font-size: 14px;
 .add_contain{
 display:inline-block;
 padding-bottom: 10px;
 padding-top: 20px;
 .project_content_warp{
 background: #fdfdfd;
 margin-bottom: 15px;
 .project_job_add{
 padding-left: 30px;
 background: #FCFCFC;
 border-bottom: 1px solid #E5E5E5;
 line-height: 10px;
 margin-bottom: 15px;
 font-size: 14px;
 ._span{
 display:inline-block;
 padding-left: 10px;
 .el-col-8{
 height: 50px;
 /style 

编辑里程碑

stonedetail.vue

 template 
 div 
 el-row 
 el-col :span="23" 
 div 
 el-tag effect="dark" 里程碑 /el-tag 
 /div 
 /el-col 
 el-col :span="1" 
 img src="../../assets/images/add.png" @click="addItems()"/ 
 /el-col 
 /el-row 
 hr/ 
 el-row 
 el-col :span="3" 
 el-tag 序 #12288;号 /el-tag 
 /el-col 
 el-col :span="8" 
 el-tag 阶段名称 /el-tag 
 /el-col 
 el-col :span="7" 
 el-tag 起始时间 /el-tag 
 /el-col 
 el-col :span="5" 
 el-tag 结束时间 /el-tag 
 /el-col 
 /el-row 
 el-form label-width="100px" align="left" ref="form" :model="model" 
 div v-for="(item, index) in model.timeLineList" :key="index" 
 el-row 
 el-col :span="3" 
 input type="text" v-model="index" disabled="true" 
 /el-col 
 el-col :span="8" 
 input placeholder="请输入阶段名称" type="text"
 v-model="item.stageName" 
 /el-col 
 el-col :span="6" 
 el-date-picker
 type="date"
 :editable="false"
 v-model="item.startTime"
 placeholder="请选择起始时间"
 format="yyyy-MM-dd"
 value-format="yyyy-MM-dd"
 /el-date-picker 
 /el-col 
 el-col :span="6" 
 el-date-picker
 type="date"
 :editable="false"
 v-model="item.endTime"
 placeholder="请选择结束时间"
 format="yyyy-MM-dd"
 value-format="yyyy-MM-dd"
 /el-date-picker 
 /el-col 
 /el-row 
 el-row 
 el-col :span="3" 
 input placeholder="阶段目标" type="text" disabled="true" 
 /el-col 
 el-col :span="20" 
 el-input v-model="item.stageTarget" placeholder="请输入阶段目标" /el-input 
 !-- textarea placeholder="请输入阶段目标" v-model="item.stageTarget" type="text" /textarea -- 
 /el-col 
 /el-row 
 el-row 
 el-col :span="3" 
 input placeholder="验收标准" type="text" disabled="true" 
 /el-col 
 el-col :span="20" 
 el-input v-model="item.acceptStar" placeholder="请输入验收标准" /el-input 
 /el-col 
 /el-row 
 el-row 
 el-col :span="3" 
 input placeholder="里程碑状态" type="text" disabled="true" 
 /el-col 
 el-col :span="20" 
 template 
 el-select v-model="item.milepostState" placeholder="请选择" 
 el-option
 v-for="item in milepostStateList"
 :key="item.ref_id"
 :label="item.ref_value"
 :value="item.ref_id" 
 /el-option 
 /el-select 
 /template 
 /el-col 
 el-col :span="1" 
 img src="../../assets/images/delete.png" @click="deleteItems(index)"/ 
 /el-col 
 /el-row 
 /div 
 /el-form 
 div 
 el-button type="primary" @click="submit()" 确认修改 /el-button 
 /div 
 /div 

 var currentdate = year + seperator1 + month + seperator1 + strDate;
 return currentdate;
 deleteItems(index) {
 this.$confirm('确认删除该记录吗 ', '提示', {
 confirmButtonClass: 'el-button--warning'
 }).then(() = {
 if(this.model.timeLineList[index].milepostId)
 API.deleteMileStone(this.model.timeLineList[index].milepostId).then(data= {
 if(data.code===200)
 this.$ess("删除成功");
 this.model.timeLineList.splice(index, 1);
 this.refreshMileStoneData();
 }else {
 this.$message.error(data.msg);
 else{
 this.model.timeLineList.splice(index, 1);
 }).catch(() = {});

 onProjectIdChange(id) {
 this.model.timeLineList.splice(0,this.model.timeLineList.length)
 // if (id) {
 let params={
 proId:id,
 API.getMileStoneList(params).then(data = {
 let result = data.data
 if (result result.list) {
 for(var i=0;i result.list.length;i++){
 this.model.timeLineList.splice(i, 1, result.list[i])
 }, ({msg}) = {
 this.$message.error(msg);
 // }
 console.log('dailog打开里程碑列表')
 console.log(this.model.timeLineList)
 initPage() {
 this.proId=this.projectId;
 if (this.proId) {
 this.onProjectIdChange(this.proId);
 /script 
 style scoped 
 /style 

以上这篇Vue时间轴 vue-light-timeline的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。