优化

懒羊羊

2023-12-23 1f26a7ec60c5e1da1ef926b6dac1472822a36c28

优化

 jcdm-ui/src/main.js

@@ -37,6 +37,7 @@
import VueMeta from 'vue-meta'
// å­—典数据组件
import DictData from '@/components/DictData'
import './router/directives.js';

// å…¨å±€æ–¹æ³•æŒ‚è½½
Vue.prototype.getDicts = getDicts

 jcdm-ui/src/router/directives.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
import Vue from 'vue'

// v-dialogpop-up: å¼¹çª—拖拽
Vue.directive('dialogpop-up', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')//el-dialog和header之间是两个下划线
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // èŽ·å–原有属性 ie dom元素.currentStyle ç«ç‹è°·æ­Œ window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {
      // é¼ æ ‡æŒ‰ä¸‹ï¼Œè®¡ç®—当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // èŽ·å–到的值带px æ­£åˆ™åŒ¹é…æ›¿æ¢
      let styL, styT

      // æ³¨æ„åœ¨ie中 ç¬¬ä¸€æ¬¡èŽ·å–到的值为组件自带50% ç§»åŠ¨ä¹‹åŽèµ‹å€¼ä¸ºpx
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // é€šè¿‡äº‹ä»¶å§”托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // ç§»åŠ¨å½“前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // å°†æ­¤æ—¶çš„位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

// v-dialogDragWidth: å¼¹çª—宽度拖大 æ‹–小
Vue.directive('dialogDragWidth', {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog')

    el.onmousedown = (e) => {
      // é¼ æ ‡æŒ‰ä¸‹ï¼Œè®¡ç®—当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft

      document.onmousemove = function(e) {
        e.preventDefault() // ç§»åŠ¨æ—¶ç¦ç”¨é»˜è®¤äº‹ä»¶

        // é€šè¿‡äº‹ä»¶å§”托，计算移动的距离
        const l = e.clientX - disX
        dragDom.style.width = `${l}px`
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 jcdm-ui/src/views/main/bs/workshop/index.vue

@@ -129,7 +129,7 @@
    />

    <!-- æ·»åŠ æˆ–修改车间信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
      <span slot="title">
        <i class="el-icon-s-order"></i>
        {{titleName}}

 jcdm-ui/src/views/main/cfkb/Instructions/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,243 @@
<template>
  <div class="app-container">
    <el-row :gutter="3">
      <el-col :span="6">
        <el-card shadow="always">
          æ€»æ˜¯æ˜¾ç¤º
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="always">
          æ€»æ˜¯æ˜¾ç¤º
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card shadow="always">
          æ€»æ˜¯æ˜¾ç¤º
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="3" style="margin-top: 5px">
      <el-col :span="6">
        <div style="height: 600px;overflow: auto;">
          <div  class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
            <span class="centered">居中文本</span>
          </div>
          <div v-for="(item,index) in tableData" :key="item.date" class="outerDiv" :id="'outerDiv'+index">
            <div class="innerDiv1">
              <div class="innerDiv2">
                <span class="content_left">{{ item.date }}</span>
              </div>
              <div class="content_right">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <el-col :span="20">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px">
              {{address}}
            </el-row>
            <el-row style="height: 400px">
              <el-image style="height: 390px;width: 960px" :src="src"></el-image>
<!--              {{src}}-->
            </el-row>
            <el-row style="height: 100px">
              <el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
              <el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px;margin-top: 100px">
              <el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
            </el-row>
            <el-row style="height: 50px;margin-top: 5px">
              <el-button type="primary" @click="product2V91()" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="product191()" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="product0JWF()" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
            </el-row>
          </el-card>
        </el-col>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      tableData: [{
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„上海市普陀区金沙江路 1518 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1519 å¼„'
      }, {
        img: 'htts://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: '222222222222',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }, {
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
        date: '2',
        address: '上海市普陀区金沙江路 1516 å¼„'
      }],
      address: '',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
      // src: 'file:///D:/img/qt.jpg'
    };
  },
  created() {
  },
  mounted() {
    document.getElementById('outerDiv0').style.background = 'yellow'
    this.setImg(0)
    this.autoShow()
  },
  methods: {
    autoShow() {
      const _this = this
      setInterval(() => {
        _this.setBg()
      }, 2000)
    },
    setImg(index) {
      this.address = this.tableData[index].address
      this.src = this.tableData[index].img
    },
    setBg() {
      if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
        this.setImg(0)
        document.getElementById('outerDiv0').style.background = 'yellow'
        for (let j = 1; j < this.tableData.length; j++) {
          document.getElementById('outerDiv' + j).style.background = 'white'
        }
        return;
      }
      for (let i = 0; i < this.tableData.length - 1; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i+1)
          document.getElementById('outerDiv' + i).style.background = 'green'
          document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
          return;
        }
      }
    },
    getUpOrDown(index) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i + index)
          document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
          document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
          return;
        }
      }
    },
    backClick(){
      this.getUpOrDown(-1)
    },
    nextStep(){
      this.getUpOrDown(1)
    },
    processDocuments(){

    },
    product2V91(){

    },
    product191(){

    },
    product0JWF(){

    }
  },
}
</script>

<style scoped>
.outerDiv {
  width: fit-content;
  min-width: 100%;
  /*width: 300px;*/
  height: 50px;
  margin-bottom: 10px;
}

.innerDiv1 {
  /*width: 79%;*/
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid black;
}

.innerDiv2 {
  /*width: 20%;*/
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.content_left {
  font-weight: bold;
}
.content_right {
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* è®¾ç½®div的高度，可根据实际情况调整 */
}

.centered {
  text-align: center;
}

</style>