<template>
|
<div class="start">
|
<div class="menu">
|
<div class="menu-left">
|
<div class="menu-left-name">开始工作任务</div>
|
<div class="menu-left-triangle"></div>
|
</div>
|
<div class="menu-right">
|
<!-- <div class="menu-right-item"></div> -->
|
</div>
|
</div>
|
<div class="content">
|
<div class="content-item green link" @click="stationId = null">
|
<div class="sort">1</div>
|
<i class="iconfont icon-gongzhan" />
|
<span v-if="!stationId">请扫描工站二维码</span>
|
<span v-else="!stationId">当前工站：{{ stationInfo.stationName }}</span>
|
</div>
|
<div class="content-item blue link" @click="userId = null">
|
<div class="sort">2</div>
|
<i class="iconfont icon-renyuan" />
|
<span v-if="!userId">请扫描人员二维码</span>
|
<span v-else>操作人员：{{ userInfo.name }}</span>
|
</div>
|
<div class="content-item red link" @click="dutyId = null; workType = null;">
|
<div class="sort">3</div>
|
<i v-if="!workType" class="iconfont icon-zhize" />
|
<span v-if="!workType">请选择工作职责</span>
|
|
<i v-if="workType == 1" class="iconfont icon-zuzhuang" />
|
<span v-if="workType == 1">生产</span>
|
|
<i v-if="workType == 2" class="iconfont icon-ceshi" />
|
<span v-if="workType == 2">测试</span>
|
|
<i v-if="workType == 3" class="iconfont icon-pinjian" />
|
<span v-if="workType == 3">品检</span>
|
|
<i v-if="workType == 4" class="iconfont icon-weixiu" />
|
<span v-if="workType == 4">维修</span>
|
|
<i v-if="workType == 5" class="iconfont icon-zuoyerenyuan" />
|
<span v-if="workType == 5">其他</span>
|
|
<i v-if="workType == 6" class="iconfont icon-ceshi" />
|
<span v-if="workType == 6">自动化测试</span>
|
</div>
|
<div class="content-item yellow link" @click="planId = null, nodeId = null">
|
<div class="sort">4</div>
|
<i class="iconfont icon-renwu" />
|
<span v-if="planId == null || nodeId == null">请选择工作任务</span>
|
<span v-if="planId && nodeId">工作任务：{{ planInfo.name }}</span>
|
<span v-if="planId && nodeId">任务节点：{{ nodeInfo.content }}</span>
|
</div>
|
</div>
|
|
<Dialog :visible="showDuty" @update:visible="showDuty = $event">
|
<div class="duty">
|
<div class="close link" @click="showDuty = false; userId = null;"><i class="close iconfont icon-shanchu" /></div>
|
<div class="duty-list">
|
<div class="duty-item red link" style="width: 280px;" @click="dutyId = 1">
|
<i class="iconfont icon-jihuarenwu" />
|
<span>计划任务</span>
|
</div>
|
<div class="duty-item yellow link" style="width: 280px;" @click="dutyId = 2; planId = null; nodeId = null;">
|
<i class="iconfont icon-linshirenwu" />
|
<span>临时任务</span>
|
</div>
|
<div class="duty-item green link" style="width: 280px;" @click="dutyId = 2; workType = 6; planId = null; nodeId = null;">
|
<i class="iconfont icon-ceshi" />
|
<span>自动化测试</span>
|
</div>
|
</div>
|
<span>请选择您任务种类</span>
|
</div>
|
</Dialog>
|
|
<Dialog :visible="showWorkType" @update:visible="showWorkType = $event">
|
<div class="duty">
|
<div class="close link" @click="showWorkType = false; dutyId = null;"><i class="close iconfont icon-shanchu" /></div>
|
<div class="duty-list">
|
<div v-if="dutyId == 1" class="duty-item green" @click="workType = 1">
|
<i class="iconfont icon-zuzhuang" />
|
<span>生产</span>
|
</div>
|
<div class="duty-item blue link" @click="workType = 2">
|
<i class="iconfont icon-ceshi" />
|
<span>测试</span>
|
</div>
|
<div class="duty-item red link" @click="workType = 3">
|
<i class="iconfont icon-pinjian" />
|
<span>品检</span>
|
</div>
|
<div v-if="dutyId == 2" class="duty-item yellow link" @click="workType = 4">
|
<i class="iconfont icon-weixiu" />
|
<span>维修</span>
|
</div>
|
<div v-if="dutyId == 2" class="duty-item green link" @click="workType = 5">
|
<i class="iconfont icon-zuoyerenyuan" />
|
<span>其他</span>
|
</div>
|
</div>
|
<span>请选择您的工作职责</span>
|
</div>
|
</Dialog>
|
|
<Dialog :visible="showPlan" @update:visible="showPlan = $event">
|
<div class="task">
|
<div class="close link" @click="showPlan = false; workType = null;"><i class="close iconfont icon-shanchu" /></div>
|
<div class="task-title">请选择工作任务</div>
|
<div class="task-header">
|
<span class="index">序号</span>
|
<span class="name">任务名称</span>
|
<span class="date">开始时间</span>
|
<span class="date">结束时间</span>
|
</div>
|
<div class="task-list">
|
<div class="task-list-row link" v-for="(item, index) in planList" :key="index" @click.stop="onSelectTask(item)">
|
<span class="index">{{ index + 1 }}</span>
|
<span class="name">{{ item.name }}</span>
|
<span class="date">{{ item.startDate }}</span>
|
<span class="date">{{ item.endDate }}</span>
|
</div>
|
</div>
|
</div>
|
</Dialog>
|
|
<Dialog :visible="showNode" @update:visible="showNode = $event">
|
<div class="node">
|
<div class="close link" @click="showNode = false"><i class="close iconfont icon-shanchu" /></div>
|
<div class="node-title">请选择工作节点</div>
|
<div class="node-header">
|
<span class="index">序号</span>
|
<span class="name">节点作业内容</span>
|
<span class="date">是否记录设备周期</span>
|
</div>
|
<div class="node-list">
|
<div class="node-list-row link" v-for="(item, index) in planInfo.process.nodes" :key="index"
|
@click.stop="onSelectNode(item)">
|
<span class="index">{{ index + 1 }}</span>
|
<span class="name">{{ item.content }}</span>
|
<span class="date">{{ item.isRecord ? '记录' : '不记录' }}</span>
|
</div>
|
</div>
|
</div>
|
</Dialog>
|
|
<div @click="handleReScan" class="reScan link" v-if="stationId && isScaning">重新扫描工站二维码</div>
|
</div>
|
</template>
|
|
<script>
|
import Dialog from '../components/Dialog.vue'
|
export default {
|
name: "start",
|
components: {
|
Dialog,
|
},
|
data() {
|
return {
|
isAlert: 0, // 弹窗状态
|
isChecking: false, // 网络请求状态
|
isScaning: false, // 扫码中
|
scanType: null, // 扫描类型
|
scanTypeStr: null, // 扫描类型描述
|
stationId: null,//'1032024070609120900003', // 工站id
|
stationInfo: { stationName: null }, // 工站信息
|
userId: null, //'1012024041611231300000', // 用户id
|
userInfo: { name: null }, // 用户信息
|
showDuty: false, // 显示职责选择弹窗
|
dutyId: null, // 职责id
|
showWorkType: false,// 显示工作类型
|
workType: null, // 工作类型
|
showPlan: false, // 显示任务选择弹窗
|
planList: null, // 任务列表
|
planId: null,
|
planInfo: { process: { nodes: null } }, // 任务信息
|
showNode: false, // 显示节点选择弹窗
|
nodeId: null,
|
nodeInfo: { content: null }, // 节点信息
|
processId: null
|
};
|
},
|
computed: {
|
isFinish: function () {
|
if (this.stationId && this.userId && this.dutyId && this.workType && this.planId && this.nodeId) {
|
return true
|
} else if (this.stationId && this.userId && this.dutyId == 2 && this.workType) {
|
return true
|
} else {
|
return false
|
}
|
}
|
},
|
watch: {
|
isFinish: function (newValue, oldValue) {
|
if (newValue) {
|
this.$alert.show({
|
modelTitle: "开始工作",
|
modelContent: '确认后将进入工作台，是否开始当前工作？',
|
callBack: () => {
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
this.handleLogin()
|
},
|
cancleBack: () => {
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
this.$notify({
|
title: '用户已取消',
|
message: `请继续工作任务认领`,
|
type: 'success'
|
})
|
}
|
})
|
}
|
},
|
},
|
mounted() {
|
this.$forceUpdate();
|
// 检查登录状态
|
this.chenkWorkId()
|
// 通过事件总线接收扫描结果
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
// 通过事件总线接收弹窗状态
|
this.$bus.$off('isAlert')
|
this.$bus.$on('isAlert', (val) => {
|
this.isAlert = val
|
})
|
// 通过事件总线接收扫码状态
|
this.$bus.$off('isScaning')
|
this.$bus.$on('isScaning', (val) => {
|
this.isScaning = val
|
})
|
// 加载自动操作引导
|
this.handleAutoGuide()
|
},
|
destroyed() {
|
this.$bus.$off('isAlert')
|
this.$bus.$off('isScaning')
|
this.$bus.$off('scanResult')
|
clearInterval(this.timer)
|
},
|
methods: {
|
// 跳转路由
|
goto: function (path) {
|
if (path != this.$route.name) {
|
this.$router.push({
|
name: path,
|
});
|
}
|
},
|
autoTest: function () {
|
console.log('test')
|
this.goto('test')
|
},
|
// 检查登录状态
|
chenkWorkId: function () {
|
if (!localStorage.workId) {
|
return
|
}
|
var that = this
|
that.isChecking = true;
|
var params = {
|
workId: localStorage.getItem('workId')
|
};
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "station/workOrder/getWorkLast",
|
params: params,
|
})
|
.then((res) => {
|
if (res.success == true) {
|
if (res.content.status == 1) {
|
this.$alert.show({
|
modelTitle: "检测到未结束的工作任务",
|
modelContent: `检测到 ${res.content.stationName} 正在进行 ${res.content.userName} 的 ${res.content.planName} 工作任务，是否继续进行工作？`,
|
callBack: () => {
|
this.$notify({
|
title: '用户已确认',
|
message: `工作任务已继续`,
|
type: 'success'
|
})
|
localStorage.setItem('workId', res.content.id)
|
if (res.content.workType == 1) {
|
that.goto('assemble')
|
} else if (res.content.workType == 2) {
|
that.goto('test')
|
} else if (res.content.workType == 3) {
|
that.goto('qualityInspection')
|
} else if (res.content.workType == 4) {
|
that.goto('repair')
|
} else if (res.content.workType == 5) {
|
that.goto('other')
|
} else if (res.content.workType == 6) {
|
that.goto('autoTest')
|
}
|
},
|
cancleBack: () => {
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
this.$notify({
|
title: '用户已取消',
|
message: `请继续工作任务认领`,
|
type: 'success'
|
})
|
}
|
})
|
}
|
}
|
that.isChecking = false;
|
})
|
.catch((err) => {
|
console.log(err);
|
that.isChecking = false;
|
});
|
|
},
|
// 自动操作引导
|
handleAutoGuide: function () {
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
this.$scan.close()
|
this.$alert.close()
|
this.timer = setInterval(() => {
|
if (this.isAlert || this.isChecking || this.isFinish || this.showDuty || this.showPlan || this.showNode || this.isScaning) {
|
return
|
}
|
if (!this.stationId) {
|
this.onScanStationId()
|
return
|
}
|
if (!this.userId) {
|
this.onScanUserId()
|
return
|
}
|
if (!this.dutyId) {
|
this.$scan.close()
|
this.showDuty = true
|
return
|
}
|
if (!this.workType) {
|
this.$scan.close()
|
this.showWorkType = true
|
return
|
}
|
if (!this.planId || !this.nodeId) {
|
this.$scan.close()
|
this.handleTaskList()
|
return
|
}
|
}, 100)
|
},
|
// 扫码结果处理
|
handleScanVal: function (val) {
|
console.log('[start] 事件总线接收 =>', val)
|
if (this.isAlert) {
|
return
|
}
|
// 二维码处理流程
|
if (val.substr(0, 3) != this.scanType) {
|
this.$notify({
|
title: '扫描错误',
|
message: `非${this.scanTypeStr}二维码，请重新扫描。`,
|
type: 'error'
|
})
|
this.$scan.close()
|
} else {
|
this.$notify({
|
title: `${this.scanTypeStr}二维码扫描成功`,
|
message: `正在查询${this.scanTypeStr}信息`,
|
type: 'success'
|
})
|
if (val.substr(0, 3) == 103) {
|
this.onCheckStationId(val)
|
}
|
if (val.substr(0, 3) == 101) {
|
this.onCheckUserId(val)
|
}
|
}
|
},
|
// 扫描工站二维码
|
onScanStationId: function () {
|
this.$scan.close()
|
this.$scan.show({
|
modelContent: '请扫描工站二维码',
|
scanType: '103'
|
})
|
this.scanType = '103'
|
this.scanTypeStr = '工站'
|
},
|
// 清空并重新扫描工站码
|
handleReScan: function () {
|
this.stationId = null
|
this.$scan.close()
|
},
|
// 检查工站二维码
|
onCheckStationId: function (val) {
|
var that = this;
|
that.isChecking = true;
|
var params = {
|
stationId: val
|
};
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "station/workOrder/checkStationUsed",
|
params: params,
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.stationId = res.content.stationId
|
that.stationInfo = res.content
|
this.$notify({
|
title: '工站信息查询成功',
|
message: `当前工站：${res.content.stationName}`,
|
type: 'success'
|
})
|
if (res.content.status == 1) {
|
this.$alert.show({
|
modelTitle: "检测到未结束的工作任务",
|
modelContent: `检测到 ${res.content.stationName} 正在进行 ${res.content.userName} 的 ${res.content.planName} 工作任务，是否继续进行工作？`,
|
callBack: () => {
|
this.$notify({
|
title: '用户已确认',
|
message: `工作任务已继续`,
|
type: 'success'
|
})
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
localStorage.setItem('workId', res.content.id)
|
if (res.content.workType == 1) {
|
that.goto('assemble')
|
} else if (res.content.workType == 2) {
|
that.goto('test')
|
} else if (res.content.workType == 3) {
|
that.goto('qualityInspection')
|
} else if (res.content.workType == 4) {
|
that.goto('repair')
|
}
|
},
|
cancleBack: () => {
|
this.$bus.$off('scanResult')
|
this.$bus.$on('scanResult', (val) => {
|
this.handleScanVal(val)
|
})
|
this.$notify({
|
title: '用户已取消',
|
message: `请继续工作任务认领`,
|
type: 'success'
|
})
|
}
|
})
|
}
|
} else {
|
this.$notify({
|
title: '工站信息查询失败',
|
message: res.content,
|
type: 'error'
|
})
|
}
|
that.isChecking = false;
|
that.$scan.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
that.isChecking = false;
|
that.$scan.close();
|
});
|
},
|
// 扫描人员二维码
|
onScanUserId: function () {
|
this.$scan.close()
|
this.$scan.show({
|
modelContent: '请扫描人员二维码',
|
scanType: '101'
|
})
|
this.scanType = '101'
|
this.scanTypeStr = '人员'
|
},
|
// 检查人员二维码
|
onCheckUserId: function (val) {
|
var that = this;
|
that.isChecking = true;
|
var params = {
|
userId: val
|
};
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "station/workOrder/getUserInfo",
|
params: params,
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.userId = res.content.id
|
that.userInfo = res.content
|
this.$notify({
|
title: '人员信息查询成功',
|
message: `已退出工作台，请重新认领工作任务。`,
|
type: 'success'
|
})
|
} else {
|
this.$notify({
|
title: '工站信息查询失败',
|
message: res.content,
|
type: 'error'
|
})
|
}
|
that.isChecking = false;
|
that.$scan.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
that.isChecking = false;
|
that.$scan.close();
|
});
|
},
|
// 获取任务列表
|
handleTaskList: function () {
|
var that = this;
|
if (this.showPlan) {
|
return
|
}
|
this.showPlan = true
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "station/workOrder/planList",
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.planList = res.content
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 点击任务列表
|
onSelectTask: function (data) {
|
this.planInfo = JSON.parse(JSON.stringify(data))
|
this.showNode = true
|
},
|
// 点击流程节点
|
onSelectNode: function (data) {
|
this.nodeInfo = JSON.parse(JSON.stringify(data))
|
this.showNode = false
|
this.showPlan = false
|
this.planId = this.planInfo.id
|
this.nodeId = this.nodeInfo.id
|
this.processId = this.planInfo.processId
|
},
|
// 领取任务
|
handleLogin: function () {
|
var that = this;
|
var data = {
|
userId: this.userId,
|
stationId: this.stationId,
|
planId: this.planId,
|
processId: this.processId,
|
nodeId: this.nodeId,
|
workType: this.workType,
|
}
|
that.isChecking = true;
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: "station/workOrder/save",
|
data: JSON.stringify(data)
|
})
|
.then((res) => {
|
|
if (res.success == true) {
|
this.$notify({
|
title: '用户已确认',
|
message: `工作任务已认领`,
|
type: 'success'
|
})
|
localStorage.setItem('workId', res.content.id)
|
if (that.workType == 1) {
|
that.goto('assemble')
|
} else if (that.workType == 2) {
|
that.goto('test')
|
} else if (that.workType == 3) {
|
that.goto('qualityInspection')
|
} else if (that.workType == 4) {
|
that.goto('repair')
|
} else if (that.workType == 5) {
|
that.goto('other')
|
} else if (that.workType == 6) {
|
that.goto('autoTest')
|
}
|
} else {
|
this.$notify({
|
title: '用户已确认',
|
message: res.content,
|
type: 'error'
|
})
|
}
|
that.isChecking = false;
|
})
|
.catch((err) => {
|
that.isChecking = false;
|
console.log(err);
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scope>
|
.start {
|
height: 100%;
|
padding-top: 0;
|
display: flex;
|
flex-direction: column;
|
|
.reScan {
|
position: fixed;
|
width: 500px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
left: 710px;
|
top: 300px;
|
z-index: 999;
|
}
|
|
// 主菜单
|
.menu {
|
border-bottom: 1px solid #0089ff;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 30px;
|
|
// 主菜单左侧标题栏
|
.menu-left {
|
display: flex;
|
|
.menu-left-name {
|
padding: 0 20px 0 30px;
|
border-radius: 10px 0 0 0;
|
height: 40px;
|
line-height: 40px;
|
background-color: #0089ff;
|
font-size: 20px;
|
}
|
|
.menu-left-triangle {
|
margin-left: -1px;
|
width: 30px;
|
height: 40px;
|
background: linear-gradient(60deg, #0089ff 50%, transparent 50%, transparent 100%);
|
}
|
}
|
|
// 主菜单右侧按钮栏
|
.menu-right {
|
display: flex;
|
|
// 主菜单右侧按钮栏按钮
|
.menu-right-item {
|
margin-left: 15px;
|
padding: 0 15px;
|
border-radius: 10px 10px 0 0;
|
height: 40px;
|
line-height: 40px;
|
background-color: #0089ff;
|
font-size: 20px;
|
}
|
}
|
}
|
|
.content {
|
flex-grow: 1;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
overflow: hidden;
|
|
.content-item {
|
background-color: red;
|
width: calc(50% - 15px);
|
height: calc(50% - 15px);
|
border-radius: 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
overflow: hidden;
|
margin-right: 30px;
|
margin-bottom: 30px;
|
|
.sort {
|
width: 60px;
|
height: 60px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background-color: #fff;
|
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
|
color: #002244;
|
font-size: 30px;
|
font-weight: 800;
|
padding-left: 8px;
|
opacity: .8;
|
}
|
|
i {
|
font-size: 180px;
|
margin-bottom: 30px;
|
}
|
|
span {
|
font-size: 30px;
|
}
|
}
|
|
.content-item:nth-child(2n) {
|
margin-right: 0;
|
}
|
}
|
}
|
|
.duty {
|
width: 1080px;
|
height: 620px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border-radius: 10px;
|
overflow: hidden;
|
position: relative;
|
|
.close {
|
font-size: 30px;
|
width: 70px;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
|
.duty-list {
|
display: flex;
|
margin-bottom: 50px;
|
|
.duty-item {
|
width: 180px;
|
height: 280px;
|
border-radius: 10px;
|
margin-right: 30px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
i {
|
font-size: 120px;
|
margin-bottom: 30px;
|
}
|
|
span {
|
font-size: 20px;
|
color: #fff;
|
}
|
}
|
|
.duty-item:last-child {
|
margin-right: 0;
|
}
|
}
|
|
span {
|
font-size: 30px;
|
color: #fff;
|
}
|
}
|
|
.task {
|
width: 1080px;
|
height: 820px;
|
position: relative;
|
.close {
|
font-size: 30px;
|
width: 70px;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
|
.task-title {
|
font-size: 30px;
|
text-align: center;
|
height: 70px;
|
line-height: 70px;
|
border-bottom: 1px solid #fff;
|
box-sizing: border-box;
|
}
|
|
.task-header,
|
.task-list-row {
|
height: 70px;
|
line-height: 70px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 22px;
|
|
.index {
|
width: 100px;
|
margin-left: 30px;
|
}
|
|
.name {
|
flex-grow: 1;
|
}
|
|
.date {
|
margin-right: 30px;
|
width: 200px;
|
text-align: right;
|
}
|
}
|
|
.task-list-row:nth-child(odd) {
|
background-color: rgba(0, 0, 0, .2);
|
}
|
|
.task-list {
|
max-height: 650px;
|
overflow: scroll;
|
scrollbar-width: none;
|
/* Firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
}
|
|
.task-list::-webkit-scrollbar {
|
display: none;
|
/* Chrome Safari */
|
}
|
}
|
|
.node {
|
width: 880px;
|
height: 520px;
|
position: relative;
|
.close {
|
font-size: 30px;
|
width: 70px;
|
height: 70px;
|
line-height: 70px;
|
text-align: center;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
.node-title {
|
font-size: 30px;
|
text-align: center;
|
height: 70px;
|
line-height: 70px;
|
border-bottom: 1px solid #fff;
|
box-sizing: border-box;
|
}
|
|
.node-header,
|
.node-list-row {
|
height: 70px;
|
line-height: 70px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 22px;
|
|
.index {
|
width: 100px;
|
margin-left: 30px;
|
}
|
|
.name {
|
flex-grow: 1;
|
}
|
|
.date {
|
margin-right: 30px;
|
width: 200px;
|
text-align: right;
|
}
|
}
|
|
.node-list-row:nth-child(odd) {
|
background-color: rgba(0, 0, 0, .2);
|
}
|
|
.node-list {
|
max-height: 350px;
|
overflow: scroll;
|
scrollbar-width: none;
|
/* Firefox */
|
-ms-overflow-style: none;
|
/* IE 10+ */
|
}
|
|
.node-list::-webkit-scrollbar {
|
display: none;
|
/* Chrome Safari */
|
}
|
}
|
|
.green {
|
background-color: #336666 !important;
|
}
|
|
.blue {
|
background-color: #003366 !important;
|
}
|
|
.red {
|
background-color: #663366 !important;
|
}
|
|
.yellow {
|
background-color: #999933 !important;
|
}
|
</style>
|
