css

liukangdong

2024-05-22 d836f9914d8d838c5991157006682c3e39d22716

css

 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,50 +1,64 @@
<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"
        :key="index"
        :id="'tags-box-' + index"
        @contextmenu.prevent="openMenu(item,$event)"
        :class="isActive(item.url,index)?'active':''"
        @contextmenu.prevent="openMenu(item, $event)"
        :class="isActive(item.url, index) ? 'active' : ''"
        class="tagsview"
        @click="tagsmenu(item, index)"
      >
        {{ 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";
// 这个就是导入vuex的数据，配合下面...map用
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      //右键菜单隐藏对应布尔值
      // 右键菜单隐藏对应布尔值
      visible: false,
      //右键菜单对应位置
      // 右键菜单对应位置
      top: 0,
      left: 0,
      leftStatus: false,
      rightStatus: false,
      rightStatus: false
    }
  },
  computed: {
    //引入vuex中state中的tags数据，一样this调用就行
    ...mapState(["tags"]),
    // 引入vuex中state中的tags数据，一样this调用就行
    ...mapState(['tags'])
  },
  watch:{
    //监听右键菜单的值是否为true，如果是就创建全局监听点击事件，触发closeMenu事件隐藏菜单，如果是false就删除监听
  watch: {
    // 监听右键菜单的值是否为true，如果是就创建全局监听点击事件，触发closeMenu事件隐藏菜单，如果是false就删除监听
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
@@ -52,10 +66,10 @@
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    $route(to,from){
    $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,109 +82,106 @@
  },
  mounted() {
    this.$refs.tags.addEventListener('scroll', e => {
      
      if (this.$refs.tags.scrollLeft > 0) {
        this.leftStatus = true
      } else {
        this.leftStatus = false
      }
      if (this.$refs.tags.scrollLeft + this.$refs.tags.clientWidth < this.$refs.tags.scrollWidth) {
       this.rightStatus = true
        this.rightStatus = true
      } else {
        this.rightStatus = false
      }

    }, false)
  },
  methods: {
    //引入vuex中mutation方法，可以直接this.xxx调用他
    ...mapMutations(["closeTab", "cleartagsview"]),
    //点击叉叉删除的事件
    // 引入vuex中mutation方法，可以直接this.xxx调用他
    ...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) {
      if (this.tags.length == 1) {
        return
      }
      //先把长度保存下来后面用来比较做判断条件
      let length = this.tags.length - 1;
      //vuex调方法,上面...map引入的vuex方法，不会这种方法的看vue官网文档
      this.closeTab(item);
      // 先把长度保存下来后面用来比较做判断条件
      const length = this.tags.length - 1
      // vuex调方法,上面...map引入的vuex方法，不会这种方法的看vue官网文档
      this.closeTab(item)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (item.url !== this.$route.path) {
        return;
        return
      }
      // 判断：如果index和length是一样的，那就代表都是一样的长度，就是最后一位，那就往左跳转一个
      if (index === length) {
        //再判断：如果length=0，也就是说你删完了所有标签
        // 再判断：如果length=0，也就是说你删完了所有标签
        if (length === 0) {
          //那么再判断：如果当前路由不等于index，也就是我首页的路由
          if (this.$route.path !== "/index") {
            //那么就跳转首页。这一步的意思是：如果删除的最后一个标签不是首页就统一跳转首页，如果你删除的最后一个标签是首页标签，已经在这个首页路由上了，你还跳个什么呢。这不重复操作了吗。
            this.$router.push({ path: "/index" });
          // 那么再判断：如果当前路由不等于index，也就是我首页的路由
          if (this.$route.path !== '/index') {
            // 那么就跳转首页。这一步的意思是：如果删除的最后一个标签不是首页就统一跳转首页，如果你删除的最后一个标签是首页标签，已经在这个首页路由上了，你还跳个什么呢。这不重复操作了吗。
            this.$router.push({ path: '/index' })
          }
        } else {
          //那么，如果上面的条件都不成立，没有length=0.也就是说你还有好几个标签，并且你删除的是最后一位标签，那么就往左边挪一位跳转路由
          this.$router.push({ path: this.tags[index - 1].url });
          // 那么，如果上面的条件都不成立，没有length=0.也就是说你还有好几个标签，并且你删除的是最后一位标签，那么就往左边挪一位跳转路由
          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');
      //判断：当前路由不等于当前选中项的url，也就代表你点击的不是现在选中的标签，是另一个标签就跳转过去，如果你点击的是现在已经选中的标签就不用跳转了，因为你已经在这个路由了还跳什么呢。
      console.log('tagsmenu')
      // 判断：当前路由不等于当前选中项的url，也就代表你点击的不是现在选中的标签，是另一个标签就跳转过去，如果你点击的是现在已经选中的标签就不用跳转了，因为你已经在这个路由了还跳什么呢。
      if (this.$route.path !== item.url) {
        //用path的跳转方法把当前项的url当作地址跳转。
        this.$router.push({ path: item.url });
        let tagsDiv = document.getElementById('tags-box')
        // 用path的跳转方法把当前项的url当作地址跳转。
        this.$router.push({ path: item.url })
        const tagsDiv = document.getElementById('tags-box')
        if (index) {
          tagsDiv.scrollTo(index * 110, 0)
        }
      }
    },
    //通过判断路由一致返回布尔值添加class，添加高亮效果
    // 通过判断路由一致返回布尔值添加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)
    },
    //右键事件，显示右键菜单，并固定好位置。
    // 右键事件，显示右键菜单，并固定好位置。
    openMenu(tag, e) {
      this.visible = true
      this.selectedTag = tag
      const offsetLeft = this.$el.getBoundingClientRect().left
      console.log(tag, e);
      this.left = e.clientX - offsetLeft + 60  //右键菜单距离左边的距离
      this.top = e.clientY +20  //右键菜单距离上面的距离           这两个可以更改，看看自己的右键菜单在什么位置，自己调
      console.log(tag, e)
      this.left = e.clientX - offsetLeft + 60 // 右键菜单距离左边的距离
      this.top = e.clientY + 20 // 右键菜单距离上面的距离           这两个可以更改，看看自己的右键菜单在什么位置，自己调
    },
    //隐藏右键菜单
    // 隐藏右键菜单
    closeMenu() {
      this.visible = false
    },
    //右键菜单关闭所有选项，触发vuex中的方法，把当前路由当参数传过去用于判断
    cleartags(val){
    // 右键菜单关闭所有选项，触发vuex中的方法，把当前路由当参数传过去用于判断
    cleartags(val) {
      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 {
@@ -200,11 +211,11 @@
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    display: none; /* Chrome Safari */
  }
}
#tags-box::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  display: none; /* Chrome Safari */
}
//标签导航样式
.tagsview {
@@ -218,16 +229,15 @@
  color: #000;
  font-size: 14px;
  display: inline-block;

}
//叉号鼠标经过样式
.tagsicon:hover{
.tagsicon:hover {
  color: #f56c6c;
}
//标签高亮
.active{
  color: #2E68EC;
  border-bottom: 2px solid #2E68EC;
.active {
  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,47 +13,68 @@
    <div class="platform_list">
      <div class="item" v-for="i in 2">
        <div class="head">
          <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="left">
            <div class="status mr10">作业中</div>
            <div class="name">6号月台</div>
            <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="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>
            </div>
            <div class="right">
              <span class="green">作业中</span>
              <span class="placeholder9 ml20">作业时长：23分钟26秒</span>
            </div>
          </div>
          <div class="line">
            <div class="left">
              <div>
                <span>运输单号</span
                ><span class="ml10 placeholder9">1231231</span>
        <div class="list">
          <div class="info" v-for="j in 3">
            <div class="line">
              <div class="left">
                <span class="plate">皖A12122</span>
              </div>
              <div>
                <span>总运输量</span
                ><span class="ml10 placeholder9">3000万支</span
                ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">运单详情</span>
              <div class="right">
                <span class="green">作业中</span>
                <span class="green ml20">23分钟26秒</span>
              </div>
            </div>
            <div class="right">
              <el-button type="primary" @click="handleFinish()"
                >作业完成</el-button
              >
              <el-button plain>转移月台</el-button>
              <el-button plain>异常挂起</el-button>
            <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">
                <span class="primaryColor pointer" @click="isShowDetail = true"
                  >运单详情</span
                >
              </div>
              <div class="right">
                <el-button type="primary" @click="handleFinish()"
                  >作业完成</el-button
                >
                <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>
          <div class="line">
            <span class="ccc">运输车辆</span>
            <span>皖A12122</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="plate">皖A12122</div>
          <div class="list">
            <div class="item">
              <span>运输单号：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>总运输量：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>驾驶员：</span>
              <span>22222</span>
            </div>
          </div>
        </div>
        <div class="title">合同列表</div>
        <div class="content">
          <div class="item">
            <div class="line">
              <div>合同号：1292992</div>
              <div class="address">收货地：address</div>
            </div>
            <div class="line">
              <div>物料名称：黄山</div>
              <div>数量：700</div>
            </div>
            <div class="line">
              <div>物料名称：黄山</div>
              <div>数量：200</div>
            <div class="contract">合同号：1292992</div>
            <div class="placeholder6">收货地：address</div>
            <div class="list">
              <div class="line">
                <div class="left"><span>物料名称：</span><span>黄山</span></div>
                <div class="right"><span>数量：</span><span>100</span></div>
              </div>
            </div>
          </div>
        </div>
@@ -154,6 +172,7 @@
    }
  },
  methods: {

    handleFinish(item) {
      this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
        confirmButtonText: '确定',
@@ -173,51 +192,97 @@
<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;
      .name {
        font-size: 16px;
      }
      .status {
      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;
        margin-left: 50px;
        span {
        display: flex;
        align-items: center;
        .name {
          font-size: 16px;
          margin-right: 50px;
        }
        .status {
          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;
      border-radius: 2px;
      margin-bottom: 10px;
      .line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        .left {
          .plate {
            border: 1px solid #4969f6;
            border-radius: 2px;
            padding: 0 5px;
          }
        }
        .right {
      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 {
              font-size: 15px;
              color: #111111;
              padding: 4px 5px;
              font-weight: 700;
              border: 1px solid #279baa;
              background-color: #fff;
            }
          }
          .right {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}

.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;
  }
  .item {
    border-bottom: 1px solid #999999;
  }
  .line {
    display: flex;
    justify-content: space-between;
    .ccc{
      color: #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;
    }
    .address {
      margin-right: 30px;
    .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;
      .item {
        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;
        margin-bottom: 8px;
        &:nth-last-child(1){
          margin: 0;
        }
        div {
          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }
        .left {
          flex: 6;
        }
        .right {
          flex: 4;
        }
      }
    }
  }
}