| admin/src/assets/style/style.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| admin/src/assets/style/variables.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| admin/src/components/common/CommonHeader.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| admin/src/components/common/tagsview.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| admin/src/views/platform/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
admin/src/assets/style/style.scss
@@ -214,10 +214,10 @@ color: red !important; } .green{ color: #83cbb2; color: #00BA67; } .primaryColor{ color: $primary-color; color: $primary-color !important; } .placeholder9{ color: #999999; admin/src/assets/style/variables.scss
@@ -1,10 +1,16 @@ // 主色调 $primary-color: #216EEE; $primary-color: #279BAA; $primary-title-start-color: #3582ff; $primary-title-color: #216EcE; $primary-color-sel: #0046c6; $primary-color-sel: #2cbbd1; $primary-color-hover: #1562e2; $icon-background-color: #0d5ada; $icon-background-color: #1e7985; // $primary-color: #216EEE; // $primary-title-start-color: #3582ff; // $primary-title-color: #216EcE; // $primary-color-sel: #0046c6; // $primary-color-hover: #1562e2; // $icon-background-color: #0d5ada; //菜单悬浮色： $menu-hover-color: rgba(33, 110, 238, 0.10); // 头部高度 admin/src/components/common/CommonHeader.vue
@@ -165,7 +165,7 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; .common-header { background-color: #1457C7; background-color: #4d99a8; } .header { overflow: hidden; admin/src/components/common/tagsview.vue
@@ -1,6 +1,11 @@ <template> <div class="tags-view-style" style="display:flex; overflow-x: scroll;"> <i class="el-icon-arrow-left btn" v-if="leftStatus" :class="leftStatus?'nor-btn':'ban-btn'" @click="scrollToStart()"></i> <div class="tags-view-style" style="display: flex; overflow-x: scroll"> <i class="el-icon-arrow-left btn" v-if="leftStatus" :class="leftStatus ? 'nor-btn' : 'ban-btn'" @click="scrollToStart()" ></i> <div id="tags-box" ref="tags"> <div v-for="(item, index) in tags" @@ -13,20 +18,29 @@ > {{ item.label }} <!-- 这个地方一定要click加个stop阻止，不然会因为事件冒泡一直触发父元素的点击事件，无法跳转另一个路由 --> <span v-if="tags.length > 1" class="el-icon-close tagsicon" @click.stop="handleClose(item,index)"></span> <span v-if="tags.length > 1" class="el-icon-close tagsicon" @click.stop="handleClose(item, index)" ></span> <!-- <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}"> <li @click.stop="rightClose()">关闭</li> <li @click.stop="cleartags($route.path)">关闭其他</li> </ul> --> </div> </div> <i class="el-icon-arrow-right btn" v-if="rightStatus" :class="rightStatus?'nor-btn':'ban-btn'" @click="scrollToEnd()"></i> <i class="el-icon-arrow-right btn" v-if="rightStatus" :class="rightStatus ? 'nor-btn' : 'ban-btn'" @click="scrollToEnd()" ></i> </div> </template> <script> //这个就是导入vuex的数据，配合下面...map用 import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from 'vuex' export default { data() { return { @@ -36,12 +50,12 @@ top: 0, left: 0, leftStatus: false, rightStatus: false, rightStatus: false } }, computed: { //引入vuex中state中的tags数据，一样this调用就行 ...mapState(["tags"]), ...mapState(['tags']) }, watch:{ //监听右键菜单的值是否为true，如果是就创建全局监听点击事件，触发closeMenu事件隐藏菜单，如果是false就删除监听 @@ -55,7 +69,7 @@ $route(to,from){ this.tags.forEach((item, index) => { if (item.url === to.path) { let tagsDiv = document.getElementById('tags-box') const tagsDiv = document.getElementById('tags-box') if (index) { tagsDiv.scrollTo(index * 110, 0) } else { @@ -68,7 +82,6 @@ }, mounted() { this.$refs.tags.addEventListener('scroll', e => { if (this.$refs.tags.scrollLeft > 0) { this.leftStatus = true } else { @@ -79,19 +92,18 @@ } else { this.rightStatus = false } }, false) }, methods: { //引入vuex中mutation方法，可以直接this.xxx调用他 ...mapMutations(["closeTab", "cleartagsview"]), ...mapMutations(['closeTab', 'cleartagsview']), //点击叉叉删除的事件 rightClose() { this.visible = false if (this.tags.length == 1) { return } let index = this.tags.indexOf(this.selectedTag) const index = this.tags.indexOf(this.selectedTag) this.handleClose(this.selectedTag, index) }, handleClose(item, index) { @@ -99,39 +111,39 @@ return } //先把长度保存下来后面用来比较做判断条件 let length = this.tags.length - 1; const length = this.tags.length - 1 //vuex调方法,上面...map引入的vuex方法，不会这种方法的看vue官网文档 this.closeTab(item); this.closeTab(item) // 如果关闭的标签不是当前路由的话，就不跳转 if (item.url !== this.$route.path) { return; return } // 判断：如果index和length是一样的，那就代表都是一样的长度，就是最后一位，那就往左跳转一个 if (index === length) { //再判断：如果length=0，也就是说你删完了所有标签 if (length === 0) { //那么再判断：如果当前路由不等于index，也就是我首页的路由 if (this.$route.path !== "/index") { if (this.$route.path !== '/index') { //那么就跳转首页。这一步的意思是：如果删除的最后一个标签不是首页就统一跳转首页，如果你删除的最后一个标签是首页标签，已经在这个首页路由上了，你还跳个什么呢。这不重复操作了吗。 this.$router.push({ path: "/index" }); this.$router.push({ path: '/index' }) } } else { //那么，如果上面的条件都不成立，没有length=0.也就是说你还有好几个标签，并且你删除的是最后一位标签，那么就往左边挪一位跳转路由 this.$router.push({ path: this.tags[index - 1].url }); this.$router.push({ path: this.tags[index - 1].url }) } } else { // 如果你点击不是最后一位标签，点的前面的，那就往右边跳转 this.$router.push({ path: this.tags[index].url }); this.$router.push({ path: this.tags[index].url }) } }, //点击跳转路由 tagsmenu(item, index) { console.log('tagsmenu'); console.log('tagsmenu') //判断：当前路由不等于当前选中项的url，也就代表你点击的不是现在选中的标签，是另一个标签就跳转过去，如果你点击的是现在已经选中的标签就不用跳转了，因为你已经在这个路由了还跳什么呢。 if (this.$route.path !== item.url) { //用path的跳转方法把当前项的url当作地址跳转。 this.$router.push({ path: item.url }); let tagsDiv = document.getElementById('tags-box') this.$router.push({ path: item.url }) const tagsDiv = document.getElementById('tags-box') if (index) { tagsDiv.scrollTo(index * 110, 0) } @@ -139,16 +151,15 @@ }, //通过判断路由一致返回布尔值添加class，添加高亮效果 isActive(route, index) { let res = route === this.$route.path const res = route === this.$route.path return res }, scrollToStart() { let tagsDiv = document.getElementById('tags-box') const tagsDiv = document.getElementById('tags-box') tagsDiv.scrollTo(0, 0) }, scrollToEnd() { let tagsDiv = document.getElementById('tags-box') const tagsDiv = document.getElementById('tags-box') tagsDiv.scrollTo(tagsDiv.scrollWidth, 0) }, //右键事件，显示右键菜单，并固定好位置。 @@ -156,7 +167,7 @@ this.visible = true this.selectedTag = tag const offsetLeft = this.$el.getBoundingClientRect().left console.log(tag, e); console.log(tag, e) this.left = e.clientX - offsetLeft + 60 //右键菜单距离左边的距离 this.top = e.clientY +20 //右键菜单距离上面的距离 这两个可以更改，看看自己的右键菜单在什么位置，自己调 }, @@ -169,8 +180,8 @@ this.visible = false this.cleartagsview(val) } }, }; } } </script> <style lang="scss" scoped> @@ -183,13 +194,13 @@ color: #666; cursor: pointer; &:hover { color: #2E68EC; color: #4d99a8; } } .ban-btn { color: #999; cursor:not-allowed cursor: not-allowed; } #tags-box { @@ -218,7 +229,6 @@ color: #000; font-size: 14px; display: inline-block; } //叉号鼠标经过样式 .tagsicon:hover{ @@ -226,8 +236,8 @@ } //标签高亮 .active{ color: #2E68EC; border-bottom: 2px solid #2E68EC; color: #4d99a8; border-bottom: 2px solid #4d99a8; } //右键菜单样式 .contextmenu { @@ -241,7 +251,7 @@ font-size: 12px; font-weight: 400; color: #333; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); li { margin: 0; padding: 7px 16px; admin/src/views/platform/index.vue
@@ -1,9 +1,10 @@ <template> <div class="main_app"> <div class="df_ac mb20"> <el-select v-model="currentPlatform" class="w300"> <el-option v-for="item in platformList" :key="item.id"></el-option> </el-select> <div class="main_head mb20"> <el-tabs v-model="currentPlatform" class="tabs"> <!-- <el-tab-pane label="用户管理" name="first" v-for="item in platformList" :key="item.id"></el-tab-pane> --> <el-tab-pane label="用户管理" name="first"></el-tab-pane> </el-tabs> <el-button type="primary" class="ml20" @click="handleSet" >配置月台</el-button > @@ -12,40 +13,60 @@ <div class="platform_list"> <div class="item" v-for="i in 2"> <div class="head"> <div class="left"> <div class="status mr10">作业中</div> <div class="name">6号月台</div> <div class="status"> <span class="green">作业中</span> <span class="">作业：1</span> <span>叫号：1</span> <span>等待：1</span> <span class="red">异常：1</span> <div class="ite"> <span class="placeholder9">作业：</span><span>1</span> </div> <div class="ite"> <span class="placeholder9">作业：</span><span>1</span> </div> <div class="ite"> <span class="placeholder9">作业：</span><span class="red">1</span> </div> </div> <el-button type="primary">叫号</el-button> </div> <div class="list"> <div class="info" v-for="j in 3"> <div class="line"> <div class="left"> <span class="plate mr20">皖A12122</span> <span class="placeholder9">驾驶员</span> <span>王某某</span> <span>18888888888</span> <span class="plate">皖A12122</span> </div> <div class="right"> <span class="green">作业中</span> <span class="placeholder9 ml20">作业时长：23分钟26秒</span> <span class="green ml20">23分钟26秒</span> </div> </div> <div class="line"> <div class="ite"> <span>运输单号：</span> <span>202020</span> </div> <div class="ite"> <span>驾驶员：</span> <span>202020</span> </div> <div class="ite"> <span>手机号：</span> <span>202020</span> </div> <div class="ite"> <span>总运输量：</span> <span>202020</span> </div> <div class="ite" style="width: 66.6%"> <span>运输公司：</span> <span>20202dasd玩儿玩儿玩儿额外 额外0</span> </div> <div class="ite"></div> </div> <div class="line"> <div class="left"> <div> <span>运输单号</span ><span class="ml10 placeholder9">1231231</span> </div> <div> <span>总运输量</span ><span class="ml10 placeholder9">3000万支</span ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">运单详情</span> </div> <span class="primaryColor pointer" @click="isShowDetail = true" >运单详情</span > </div> <div class="right"> <el-button type="primary" @click="handleFinish()" @@ -53,6 +74,7 @@ > <el-button plain>转移月台</el-button> <el-button plain>异常挂起</el-button> </div> </div> </div> </div> @@ -69,7 +91,7 @@ <div class="mb20"> <div class="title">入库月台组</div> <div class="list"> <div class="item">1号月台</div> <div class="item active">1号月台</div> <div class="item">2号月台</div> <div class="item">1号月台</div> <div class="item">2号月台</div> @@ -93,42 +115,38 @@ <!-- 运单详情 --> <el-dialog title="运单详情" center :visible.sync="isShowDetail" width="420px" > <div class="detail_modal"> <div class="head"> <div class="line"> <span class="ccc">运输单号</span> <span>28282</span> <div class="plate">皖A12122</div> <div class="list"> <div class="item"> <span>运输单号：</span> <span>22222</span> </div> <div class="line"> <span class="ccc">运输车辆</span> <span>皖A12122</span> <div class="item"> <span>总运输量：</span> <span>22222</span> </div> <div class="line"> <span class="ccc">驾驶员</span> <span>王德发</span> <span>1888888</span> </div> <div class="line"> <span class="ccc">总运输量</span> <span>28282万支</span> <div class="item"> <span>驾驶员：</span> <span>22222</span> </div> </div> </div> <div class="title">合同列表</div> <div class="content"> <div class="item"> <div class="contract">合同号：1292992</div> <div class="placeholder6">收货地：address</div> <div class="list"> <div class="line"> <div>合同号：1292992</div> <div class="address">收货地：address</div> <div class="left"><span>物料名称：</span><span>黄山</span></div> <div class="right"><span>数量：</span><span>100</span></div> </div> <div class="line"> <div>物料名称：黄山</div> <div>数量：700</div> </div> <div class="line"> <div>物料名称：黄山</div> <div>数量：200</div> </div> </div> </div> @@ -154,6 +172,7 @@ } }, methods: { handleFinish(item) { this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', { confirmButtonText: '确定', @@ -173,40 +192,77 @@ <style lang="scss" scoped> .platform_list { .item { padding: 16px 24px; /* padding: 16px 24px; */ background: #ffffff; border-radius: 2px; border: 2px solid #cccccc; border: 1px solid #dfe2e8; margin-bottom: 12px; .head { display: flex; justify-content: space-between; align-items: center; height: 50px; background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%); border-radius: 2px 2px 0px 0px; padding: 0 28px; .left { flex: 1; display: flex; align-items: center; .name { font-size: 16px; margin-right: 50px; } .status { flex: 1; margin-left: 50px; span { line-height: 25px; height: 25px; padding: 0 4px; background: #00ba67; border-radius: 2px; color: #ffffff; } .ite { margin-right: 30px; } } } .info { .list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; border: 1px solid #999999; padding: 6px 8px; padding: 16px; .info { background: #effbf5; border-radius: 2px; border: 1px solid #dfe2e8; padding: 16px; border-radius: 2px; margin-bottom: 10px; width: 30%; .line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; span { &:nth-child(1) { color: #999999; } } .ite { width: 33.3%; margin-top: 8px; } .left { .plate { border: 1px solid #4969f6; border-radius: 2px; padding: 0 5px; font-size: 15px; color: #111111; padding: 4px 5px; font-weight: 700; border: 1px solid #279baa; background-color: #fff; } } .right { @@ -217,7 +273,16 @@ } } } } .main_head { display: flex; justify-content: space-between; align-items: center; .tabs { flex: 1; } } /* */ .set_modal { .title { @@ -233,33 +298,97 @@ cursor: pointer; width: 30%; height: 32px; background-color: #d9d9d9; border: 1px solid #4d99a7; border: 1px solid #dfe2e8; display: flex; justify-content: center; align-items: center; border-radius: 6px; border-radius: 2px; margin-bottom: 12px; } .active { background: rgba(39, 155, 170, 0.06); border: 1px solid #279baa; color: #279baa; } } } /* */ .detail_modal { font-size: 12px; color: #282828; .head { border-bottom: 1px solid #999999; background: rgba(39, 155, 170, 0.05); border-radius: 4px; border: 1px solid #dfe2e8; padding: 16px; .plate { width: 90px; text-align: center; font-size: 15px; color: #111111; padding: 4px 5px; font-weight: 700; border: 1px solid #279baa; background-color: #fff; } .list { display: flex; flex-wrap: wrap; margin-top: 16px; .item { border-bottom: 1px solid #999999; width: 50%; margin-bottom: 8px; span { &:nth-child(1) { color: #666666; } } } } } .title { margin: 16px 0; font-weight: 500; font-size: 16px; color: #222222; } .content { .item { border-radius: 4px; border: 1px solid #dfe2e8; padding: 16px; .list { background: #f7f7f7; border-radius: 4px; padding: 12px 16px; margin-top: 10px; } .contract { font-weight: 500; font-size: 15px; color: #279baa; margin-bottom: 4px; } .line { display: flex; justify-content: space-between; .ccc{ color: #999999; margin-bottom: 8px; &:nth-last-child(1){ margin: 0; } .address { margin-right: 30px; div { span { &:nth-child(1) { color: #666666; } } } .left { flex: 6; } .right { flex: 4; } } } } }
