From 1f26a7ec60c5e1da1ef926b6dac1472822a36c28 Mon Sep 17 00:00:00 2001
From: 懒羊羊 <15939171744@163.com>
Date: 星期六, 23 十二月 2023 08:49:51 +0800
Subject: [PATCH] 优化
---
jcdm-ui/src/views/main/bs/workshop/index.vue | 2
jcdm-ui/src/views/main/cfkb/Instructions/index.vue | 243 ++++++++++++++++++++++++++++++++++++++++
jcdm-ui/src/router/directives.js | 74 ++++++++++++
jcdm-ui/src/main.js | 1
4 files changed, 319 insertions(+), 1 deletions(-)
diff --git a/jcdm-ui/src/main.js b/jcdm-ui/src/main.js
index 13c6cf2..c9f70f1 100644
--- a/jcdm-ui/src/main.js
+++ b/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
diff --git a/jcdm-ui/src/router/directives.js b/jcdm-ui/src/router/directives.js
new file mode 100644
index 0000000..63e695d
--- /dev/null
+++ b/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鍜宧eader涔嬮棿鏄袱涓笅鍒掔嚎
+ 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
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫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
+ }
+ }
+ }
+})
diff --git a/jcdm-ui/src/views/main/bs/workshop/index.vue b/jcdm-ui/src/views/main/bs/workshop/index.vue
index c49b726..0fd591d 100644
--- a/jcdm-ui/src/views/main/bs/workshop/index.vue
+++ b/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}}
diff --git a/jcdm-ui/src/views/main/cfkb/Instructions/index.vue b/jcdm-ui/src/views/main/cfkb/Instructions/index.vue
new file mode 100644
index 0000000..059f81c
--- /dev/null
+++ b/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>
--
Gitblit v1.9.3