<template>
|
<div class="page-container colorfff">
|
<div class="nav">
|
<img
|
class="nav-icon"
|
:src="require('@/assets/safety/location.png')"
|
alt=""
|
/>
|
<div class="nav-content">
|
<span>指标评价 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<div class="pointer pos-rel" @click="drop = !drop">
|
{{ currentSelectedName
|
}}<i class="el-icon el-icon-caret-bottom" v-if="!drop"></i>
|
<i class="el-icon el-icon-caret-top" v-if="drop"></i>
|
<div class="dropdown_" v-show="drop" :key="drop">
|
<div
|
v-for="(item, index) in dropList"
|
:class="currentSelected == item.value ? 'active' : ''"
|
:key="index"
|
@click.stop="toggleSence(item)"
|
>
|
{{ item.label }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<branch v-if="currentSelected == '1'"></branch>
|
<station v-if="currentSelected == '2'"></station>
|
<busLine v-if="currentSelected == '3'"></busLine>
|
<site v-if="currentSelected == '5'"></site>
|
<bus v-if="currentSelected == '4'"></bus>
|
<shift v-if="currentSelected == '7'"></shift>
|
<div class="animate-block" style="top: 20vh;left: 3vw">
|
<dv-decoration-4 style="width:5px;height:calc(100vh - 400px);" :color="['#214377', '#257dc1']"/>
|
</div>
|
<div class="animate-block" style="top: 20vh;right: 3vw">
|
<dv-decoration-4 style="width:5px;height:calc(100vh - 400px);" :color="['#214377', '#257dc1']"/>
|
</div>
|
<div class="animate-block" style="right: 3vw">
|
<dv-decoration-3 style="width:250px;height:30px;" :color="['#214377', '#257dc1']"/>
|
</div>
|
<div class="animate-block" style="left: 3vw">
|
<dv-decoration-3 style="width:250px;height:30px;" :color="['#214377', '#257dc1']"/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import branch from "./branch.vue";
|
import station from "./station.vue";
|
import busLine from "./busLine.vue";
|
import site from "./site.vue";
|
import bus from "./bus.vue";
|
import shift from "./shift.vue";
|
// import driver from './driver.vue';
|
export default {
|
name: "basicIndex",
|
components: { branch, station, busLine, site, bus, shift },
|
data() {
|
return {
|
dropList: [
|
{ label: "分公司", value: "1" },
|
{ label: "场站", value: "2" },
|
{ label: "线路", value: "3" },
|
{ label: "车辆", value: "4" },
|
{ label: "站点", value: "5" },
|
{ label: "司机", value: "6" },
|
{ label: "班次", value: "7" },
|
],
|
senceObj: { 1: "分公司", 2: "场站", 3: "线路", 4: "车辆", 5: "站点", 7: '班次'},
|
drop: false,
|
currentSelected: "1",
|
currentSelectedName: "分公司",
|
};
|
},
|
created() {},
|
watch: {
|
'$route.query.sence':{
|
handler (val, oldVal) {
|
if(val != oldVal) {
|
this.currentSelected = this.$route.query.sence || 1;
|
this.currentSelectedName = this.senceObj[this.currentSelected];
|
}
|
},
|
|
}
|
|
},
|
activated() {
|
|
if (this.$route.query.sence) {
|
this.currentSelected = this.$route.query.sence;
|
} else {
|
this.currentSelected = "1";
|
}
|
this.currentSelectedName = this.senceObj[this.currentSelected];
|
},
|
methods: {
|
toggleSence(item) {
|
this.drop = false;
|
if (item.value == "6") {
|
this.$router.push("/driverList");
|
} else {
|
this.currentSelected = item.value;
|
this.currentSelectedName = item.label;
|
document.location.hash = '#/branchOfficeResource?sence='+item.value;
|
this.$forceUpdate();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
.page-container {
|
padding: 20px 100px;
|
padding-bottom: 0;
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 100%;
|
height: 20px;
|
align-items: center;
|
position: relative;
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
.nav-content {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.dropdown_ {
|
position: absolute;
|
z-index: 2100;
|
background: #06203f;
|
border-radius: 4px;
|
padding: 4px 0;
|
top: 30px;
|
left: -30px;
|
> div {
|
padding: 10px 20px;
|
width: 100px;
|
&.active {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
> div:hover {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
.dropdown_::before {
|
content: "";
|
position: absolute;
|
margin: auto;
|
width: 0;
|
height: 0;
|
border-left: 6px solid transparent;
|
border-right: 6px solid transparent;
|
border-bottom: 10px solid #06203f;
|
left: 0;
|
right: 0;
|
top: -10px;
|
}
|
}
|
}
|
.animate-block{
|
position: absolute;
|
}
|
}
|
</style>
|
