Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4abec01a by 任超
Options

style:材料信息

1 parent 0cebad01
Inline Side-by-side
Showing 7 changed files with 781 additions and 201 deletions
1 <template>
2 <div style="width: 100%;height: 100%">
3 <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType"
4 :overlayStyle="overlayStyle">
5 </vue-photo-zoom-pro>
6 </div>
7 </template>
8
9 <script>
10 import vuePhotoZoomPro from '@/components/photo-zoom/vue-photo-zoom-pro'
11 export default {
12 name: 'PicZoom',
13 components: { vuePhotoZoomPro },
14 data() {
15 return {
16 type: "square",
17 showType: false,
18 }
19 },
20 props: {
21 url: {
22 type: String,
23 required: true,
24 // default: require('@/assets/vehicle_img/blank_vehicle.jpg')
25 },
26 bigWidth: {
27 type: Number,
28 required: true,
29 default: 168
30 },
31 scale: {
32 type: Number,
33 required: true,
34 default: 2
35 },
36 overlayStyle: {
37 type: String,
38 default: 'width:100%;height:100%'
39 }
40 },
41 }
42 </script>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="pic-img">
3 <div class="img-container">
4 <img ref="img" @load="imgLoaded" :src="url" :style="overlayStyle" @error="imgerrorfun" />
5 <div class="overlay" @mousemove.stop="!moveEvent && mouseMove($event)"
6 @mouseout.stop="!leaveEvent && mouseLeave($event)" :style="overlayStyle">
7 </div>
8 <div v-if="!hideZoom && imgLoadedFlag &&!hideSelector" :class="['img-selector', {'circle': type === 'circle'}]"
9 :style="[imgSelectorStyle, imgSelectorSize, imgSelectorPosition, !outShow && imgBg, !outShow && imgBgSize, !outShow && imgBgPosition]">
10 <slot></slot>
11 </div>
12 <div v-if="outShow" v-show="!hideOutShow" :class="['img-out-show', {'base-line': baseline}]"
13 :style="[imgOutShowSize, imgOutShowPosition, imgBg, imgBgSize, imgBgPosition]">
14 <div v-if="pointer" class="img-selector-point"></div>
15 </div>
16 </div>
17 </div>
18
19 </template>
20
21 <script>
22 export default {
23 name: "vue-photo-zoom-pro",
24 props: {
25 url: {
26 type: String,
27 },
28 highUrl: String,
29 width: {
30 type: Number,
31 default: 168
32 },
33 type: {
34 type: String,
35 default: "square",
36 validator: function (value) {
37 return ["circle", "square"].indexOf(value) !== -1;
38 }
39 },
40 selectorStyle: {
41 type: Object,
42 default () {
43 return {};
44 }
45 },
46 outShowStyle: {},
47 scale: {
48 type: Number,
49 default: 3
50 },
51 moveEvent: {
52 type: [Object, MouseEvent],
53 default: null
54 },
55 leaveEvent: {
56 type: [Object, MouseEvent],
57 default: null
58 },
59 hideZoom: {
60 type: Boolean,
61 default: false
62 },
63 outShow: {
64 type: Boolean,
65 default: false
66 },
67 pointer: {
68 type: Boolean,
69 default: false
70 },
71 baseline: {
72 type: Boolean,
73 default: false
74 },
75 overlayStyle: {
76 type: String,
77 default: 'width:100%;height:100%'
78 },
79 },
80 data () {
81 return {
82 selector: {
83 width: this.width,
84 top: 0,
85 left: 0,
86 bgTop: 0,
87 bgLeft: 0,
88 rightBound: 0,
89 bottomBound: 0,
90 absoluteLeft: 0,
91 absoluteTop: 0
92 },
93 imgInfo: {},
94 $img: null,
95 screenWidth: document.body.clientWidth,
96 outShowInitTop: 0,
97 outShowTop: 0,
98 hideOutShow: true,
99 imgLoadedFlag: false,
100 hideSelector: false,
101 timer: null
102 };
103 },
104 watch: {
105 moveEvent (e) {
106 this.mouseMove(e);
107 },
108 leaveEvent (e) {
109 this.mouseLeave(e);
110 },
111 url (n) {
112 this.imgLoadedFlag = false;
113 },
114 width (n) {
115 this.initSelectorProperty(n);
116 },
117 screenWidth (val) {
118 if (!this.timer) {
119 this.screenWidth = val;
120 this.timer = setTimeout(() => {
121 this.imgLoaded();
122 clearTimeout(this.timer);
123 this.timer = null;
124 }, 400);
125 }
126 }
127 },
128 computed: {
129 addWidth () {
130 return !this.outShow ? (this.width / 2) * (1 - this.scale) : 0;
131 },
132 imgSelectorPosition () {
133 let { top, left } = this.selector;
134 return {
135 top: `${top}px`,
136 left: `${left}px`
137 };
138 },
139 imgSelectorSize () {
140 let width = this.selector.width;
141 return {
142 width: `${width}px`,
143 height: `${width}px`,
144 borderRadius: '50%'
145 };
146 },
147 imgSelectorStyle () {
148 return this.selectorStyle;
149 },
150 imgOutShowSize () {
151 let {
152 scale,
153 selector: { width }
154 } = this;
155 return {
156 width: `${width * scale}px`,
157 height: `${width * scale}px`
158 };
159 },
160 imgOutShowPosition () {
161 return {
162 top: `${this.outShowTop}px`,
163 right: `${-8}px`
164 };
165 },
166 imgBg () {
167 return {
168 backgroundImage: `url(${this.highUrl || this.url})`
169 };
170 },
171 imgBgSize () {
172 let {
173 scale,
174 imgInfo: { height, width }
175 } = this;
176 return {
177 backgroundSize: `${width * scale}px ${height * scale}px`
178 };
179 },
180 imgBgPosition () {
181 let { bgLeft, bgTop } = this.selector;
182 return {
183 backgroundPosition: `${bgLeft}px ${bgTop}px`
184 };
185 },
186 },
187 mounted () {
188 this.$img = this.$refs["img"];
189 },
190 methods: {
191 imgLoaded () {
192 let imgInfo = this.$img.getBoundingClientRect();
193 if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
194 this.imgInfo = imgInfo;
195 this.initSelectorProperty(this.width);
196 this.resetOutShowInitPosition();
197 }
198 if (!this.imgLoadedFlag) {
199 this.imgLoadedFlag = true;
200 this.$emit("created", imgInfo);
201 }
202 },
203 mouseMove (e) {
204 if (!this.hideZoom && this.imgLoadedFlag) {
205 this.imgLoaded();
206 const { pageX, pageY, clientY } = e;
207 const { scale, selector, outShow, addWidth, outShowAutoScroll } = this;
208 let { outShowInitTop } = this;
209 const scrollTop = pageY - clientY;
210 const { absoluteLeft, absoluteTop, rightBound, bottomBound } = selector;
211 const x = pageX - absoluteLeft; // 选择器的x坐标 相对于图片
212 const y = pageY - absoluteTop; // 选择器的y坐标
213 if (outShow) {
214 if (!outShowInitTop) {
215 outShowInitTop = this.outShowInitTop = scrollTop + this.imgInfo.top;
216 }
217 this.hideOutShow && (this.hideOutShow = false);
218 this.outShowTop =
219 scrollTop > outShowInitTop ? scrollTop - outShowInitTop : 0;
220 }
221 this.hideSelector && (this.hideSelector = false);
222 selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0;
223 selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0;
224 selector.bgLeft = addWidth - x * scale; // 选择器图片的坐标位置
225 selector.bgTop = addWidth - y * scale;
226 }
227 },
228 initSelectorProperty (selectorWidth) {
229 const selectorHalfWidth = selectorWidth / 2;
230 const selector = this.selector;
231 const { width, height, left, top } = this.imgInfo;
232 const { scrollLeft, scrollTop } = document.documentElement;
233 selector.width = selectorWidth;
234 selector.rightBound = width - selectorWidth;
235 selector.bottomBound = height - selectorWidth;
236 selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
237 selector.absoluteTop = top + selectorHalfWidth + scrollTop;
238 },
239 mouseLeave () {
240 this.hideSelector = true;
241 if (this.outShow) {
242 this.hideOutShow = true;
243 }
244 },
245 reset () {
246 Object.assign(this.selector, {
247 top: 0,
248 left: 0,
249 bgLeft: 0,
250 bgTop: 0
251 });
252 this.resetOutShowInitPosition();
253 },
254 resetOutShowInitPosition () {
255 this.outShowInitTop = 0;
256 },
257 imgerrorfun (e) {
258 // let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
259 // this.url = img
260 // e.target.src = img
261 // e.target.onerror= null
262 }
263 }
264 };
265 </script>
266
267 <style scoped>
268 .img-container {
269 position: relative;
270 max-width: 82%;
271 margin: 0 auto;
272 }
273 .overlay {
274 cursor: crosshair;
275 position: absolute;
276 top: 0;
277 left: 0;
278 opacity: 0.5;
279 z-index: 3;
280 }
281 .img-selector {
282 position: absolute;
283 cursor: crosshair;
284 border: 1px solid rgba(0, 0, 0, 0.1);
285 background-repeat: no-repeat;
286 background-color: rgba(64, 64, 64, 0.6);
287 }
288 .img-selector.circle {
289 border-radius: 50%;
290 }
291 .img-out-show {
292 z-index: 5000;
293 position: absolute;
294 background-repeat: no-repeat;
295 -webkit-background-size: cover;
296 background-color: white;
297 transform: translate(100%, 0);
298 }
299 .img-selector-point {
300 position: absolute;
301 width: 4px;
302 height: 4px;
303 top: 50%;
304 left: 50%;
305 transform: translate(-50%, -50%);
306 background-color: black;
307 }
308 .img-out-show.base-line::after {
309 position: absolute;
310 box-sizing: border-box;
311 content: "";
312 width: 1px;
313 top: 0;
314 bottom: 0;
315 left: 50%;
316 transform: translateX(-50%);
317 }
318 .img-out-show.base-line::before {
319 position: absolute;
320 box-sizing: border-box;
321 content: "";
322 height: 1px;
323 border: 1px dashed rgba(0, 0, 0, 0.36);
324 left: 0;
325 right: 0;
326 top: 50%;
327 transform: translateY(-50%);
328 }
329 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <el-image-viewer
3 :on-close="closeViewer"
4 :url-list="urlList">
5 </el-image-viewer>
6 </template>
7
8 <script>
9 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
10 export default {
11 components: {
12 ElImageViewer,
13 },
14 props: {
15 urlList: {
16 type: Array,
17 default: function () {
18 return []
19 },
20 },
21 },
22 data () {
23 return {
24 wrapperElem: null,
25 }
26 },
27 mounted () {
28 this.$nextTick(() => {
29 let wrapper = document.getElementsByClassName(
30 'el-image-viewer__actions__inner'
31 )
32 let downImg = document.createElement('i')
33 downImg.setAttribute('class', 'el-icon-download')
34 wrapper[0].appendChild(downImg)
35 if (wrapper.length > 0) {
36 this.wrapperElem = wrapper[0]
37 this.wrapperElem.addEventListener('click', this.hideCusBtn)
38 }
39 })
40 },
41 methods: {
42 closeViewer () {
43 this.$emit('close-viewer')
44 },
45 hideCusBtn (e) {
46 let className = e.target.className
47 if (className === 'el-icon-download') {
48 let imgUrl = document.getElementsByClassName(
49 'el-image-viewer__canvas'
50 )[0].children[0].src
51 this.downloadImage(imgUrl)
52 }
53 },
54 downloadImage (imgUrl) {
55 let tmpArr = imgUrl.split('/')
56 let fileName = tmpArr[tmpArr.length - 1]
57 window.URL = window.URL || window.webkitURL
58 let xhr = new XMLHttpRequest()
59 xhr.open('get', imgUrl, true)
60 xhr.responseType = 'blob'
61 xhr.onload = function () {
62 if (this.status == 200) {
63 //得到一个blob对象
64 let blob = this.response
65 let fileUrl = window.URL.createObjectURL(blob)
66 let a = document.createElement('a')
67 ; (document.body || document.documentElement).appendChild(a)
68 a.href = fileUrl
69 if ('download' in a) {
70 a.download = fileName
71 } else {
72 a.setAttribute('download', fileName)
73 }
74 a.target = '_self'
75 a.click()
76 a.remove()
77 }
78 }
79 xhr.send()
80 },
81 },
82 }
83 </script>
84
85 <style lang="scss" scoped>
86 /deep/ .el-image-viewer__close {
87 color: #ffffff;
88 }
89 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663579235470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z" p-id="2392" fill="#ffffff"></path><path d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z" p-id="2393" fill="#ffffff"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="rlPopup">
3 <div class="prev handle-btn" v-if="!isSingle" @click="prev()">
4 <i class="el-icon-arrow-left"></i>
5 </div>
6 <div class="next handle-btn" v-if="!isSingle" @click="next()">
7 <i class="el-icon-arrow-right"></i>
8 </div>
9 <div class="img-list-wrap">
10 <div v-for="(img, i) in previewImg.imgList" :key="i">
11 <photo-zoom :url="img.url" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
12 overlayStyle="width: 100%;height: 563px;">
13 </photo-zoom>
14 </div>
15 </div>
16 <!--缩略图-->
17 <div class="thumb-wrap">
18 <div class="thumb-wrap-button">
19 <el-button type="primary" @click="clickImage">（放大） 显示（缩小）</el-button>
20 <el-upload class="fileUpdate" action="" :show-file-list="false" multiple :limit="5" :auto-upload="false"
21 :on-change="handleChange" accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :before-upload="beforeUpload">
22 <el-button icon="el-icon-upload" type="primary">上传</el-button>
23 </el-upload>
24 <el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
25 </div>
26 <ul>
27 <li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active:previewImg.index === index}"
28 @click="showCurrent(index)">
29 <img :src="img.url">
30 </li>
31 </ul>
32 </div>
33 <!-- 点开后的视图 -->
34 <publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
35 </publicPicture>
36 </div>
37 </template>
38 <script>
39 import PhotoZoom from '@/components/photo-zoom'
40 import publicPicture from '@/components/publicPicture/index.vue'
41 export default {
42 name: 'PreviewImage',
43 props: {
44 previewImg: {
45 type: Object,
46 default: () => { }
47 }
48 },
49 components: {
50 PhotoZoom,
51 publicPicture
52 },
53 data () {
54 return {
55 transform: {
56 scale: 1,
57 degree: 0
58 },
59 // 缩略图
60 thumbnailImages: this.previewImg.imgList,
61 showViewer: false,
62 initialIndex: undefined,
63 allLi: [],
64 }
65 },
66 watch: {
67 previewImg: {
68 handler (newValue, oldValue) {
69 this.allLi = _.cloneDeep(newValue.imgList).map(item => item.url)
70 },
71 deep: true
72 }
73 },
74 computed: {
75 isSingle () {
76 return this.previewImg.imgList.length <= 1
77 },
78 isFirst () {
79 return this.previewImg.index === 0
80 },
81 isLast () {
82 return this.previewImg.index === this.previewImg.imgList.length - 1
83 }
84 },
85 methods: {
86 prev () {
87 if (this.isFirst) {
88 if (this.previewImg.selectedIndex - 1 >= 0) {
89 this.$parent.previewImg.index = 1
90 }
91 return
92 }
93 const len = this.previewImg.imgList.length
94 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
95 this.reset()
96 },
97 next () {
98 if (this.isLast) {
99 if (this.previewImg.selectedIndex + 1 < this.previewImg.attachmentList.length) {
100 this.$parent.previewImg.index = 0
101 }
102 return
103 }
104 const len = this.previewImg.imgList.length
105 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
106 this.reset()
107 },
108 reset () {
109 this.transform = {
110 scale: 1,
111 degree: 0
112 }
113 },
114 showCurrent (index) {
115 this.previewImg.index = index
116 },
117 closeViewer () {
118 this.showViewer = false
119 },
120 clickImage () {
121 this.showViewer = true
122 },
123 // 上传
124 beforeUpload (file) {
125 const isJPEG = file.type === 'image/jpeg'
126 const isPNG = file.type === 'image/png'
127 const isJPG = file.type === 'image/jpg'
128 const isGIF = file.type === 'image/gif'
129 const isLt5M = file.size / 1024 / 1024 < 5
130 if (!isJPEG && !isGIF && !isPNG && !isJPG && !isGIF) {
131 this.$message.error('请选择jpeg/png/jpg/bmp/gif格式的图片后重试')
132 this.loading = false
133 }
134 if (!isLt5M) {
135 this.$message.error('上传图片大小不能超过 5MB!')
136 this.loading = false
137 }
138 this.imgHidden = (isJPG || isJPEG || isPNG || isGIF) && isLt5M
139 return this.imgHidden
140 },
141 async handleChange (file) {
142 let data = _.cloneDeep(this.previewImg.imgList[this.previewImg.index])
143 },
144 handleDelete () {
145 let _this = this
146 this.$confirm('此操作将永久该附件, 是否继续?', '提示', {
147 confirmButtonText: '确定',
148 cancelButtonText: '取消',
149 type: 'warning'
150 }).then(async () => {
151 let bsmFileList = []
152 bsmFileList[0] = this.previewImg.imgList[this.previewImg.index].bsmFile
153 }).catch(() => {
154 this.$message({
155 type: 'info',
156 message: '已取消删除'
157 });
158 });
159 }
160 }
161 }
162 </script>
163
164 <style lang="scss" scoped>
165 // 查看大图
166 .rlPopup {
167 position: relative;
168 width: 100%;
169 text-align: center;
170 height: 100%;
171
172 .handle-btn {
173 position: absolute;
174 top: 50%;
175 transform: translateY(-100%);
176 width: 66px;
177 height: 66px;
178 line-height: 75px;
179 color: #fff;
180 background-color: rgb(198, 198, 198);
181 border-radius: 4px;
182 cursor: pointer;
183 text-align: center;
184
185 i {
186 font-size: 24px;
187 }
188 }
189
190 .prev {
191 left: 0%;
192 }
193
194 .next {
195 right: 0%;
196 }
197
198 .img-list-wrap {
199 width: 100%;
200 display: flex;
201 justify-content: center;
202 height: calc(100% - 80px);
203 align-items: center;
204 background: rgba(194, 190, 190, 0.1);
205
206 img {
207 display: block;
208 object-fit: scale-down;
209 transition: all 0.3s;
210 max-width: 100%;
211 }
212 }
213
214 .thumb-wrap {
215 &-button {
216 display: flex;
217 justify-content: center;
218
219 .fileUpdate {
220 margin: 0 10px;
221 }
222 }
223
224 li {
225 float: left;
226 width: 60px;
227 height: 45px;
228 border: solid 1px #ececec;
229 position: relative;
230 margin-right: 5px;
231 cursor: pointer;
232
233 &:last-child {
234 margin-right: 0;
235 }
236
237 img {
238 max-width: 57px;
239 max-height: 42px;
240 display: block;
241 object-fit: scale-down;
242 position: absolute;
243 top: 50%;
244 left: 50%;
245 transform: translate(-50%, -50%);
246 }
247 }
248
249 .active {
250 border-color: #409eff;
251 }
252 }
253 }
254 </style>
255 <style>
256 .zoom-on-hover {
257 position: relative;
258 overflow: hidden;
259 }
260
261 .zoom-on-hover .normal {
262 width: 100%;
263 }
264
265 .zoom-on-hover .zoom {
266 position: absolute;
267 opacity: 0;
268 transform-origin: top left;
269 }
270
271 .zoom-on-hover.zoomed .zoom {
272 opacity: 1;
273 }
274
275 .zoom-on-hover.zoomed .normal {
276 opacity: 0;
277 }
278 </style>
1 <template> 1 <template>
2 <div class="clxx"> 2 <div class="clxx">
3 <div class="left"> 3 <div class="left">
4 <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'checked' : '']" 4 <div v-for="item in menuList" :key="item.id" :class="['item', checkedId == item.id ? 'active' : '']"
5 @click="menuClick(item)"> 5 @click="menuClick(item)">
6 {{ item.label }} 6 {{ item.label }}
7 </div> 7 </div>
...@@ -13,60 +13,9 @@ ...@@ -13,60 +13,9 @@
13 <lb-table :column="column" :key="key" :heightNum="210" :pagination="false" :data="tableData"> 13 <lb-table :column="column" :key="key" :heightNum="210" :pagination="false" :data="tableData">
14 </lb-table> 14 </lb-table>
15 </div> 15 </div>
16
17 <!-- 材料预览 --> 16 <!-- 材料预览 -->
18 <div class="clyl-box" v-if="checkedId == '2'"> 17 <div class="clyl-box" v-else>
19 <div class="menu-tree"> 18 <image-preview :previewImg="previewImg" />
20 <div class="item">
21 材料目录
22 <i :class="iclass" @click="iconClick()"></i>
23 <el-collapse-transition>
24 <div v-show="menuOpen">
25 <div v-for="item in tableData" :key="item.bsmSj"
26 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
27 {{ item.sjmc }}
28 </div>
29 </div>
30 </el-collapse-transition>
31 </div>
32 </div>
33 <div class="clyl-img">
34 <div class="header">
35 <div class="title" v-if="titleNum == 0">
36 {{ title }}
37 </div>
38 <div class="title" v-else>
39 {{ title }} ({{ titleYs }} / {{ titleNum }})
40 </div>
41 <div class="i-group">
42 <i class="el-icon-zoom-in"></i>
43 <i class="el-icon-zoom-out"></i>
44 <i class="el-icon-refresh-right"></i>
45 <i class="el-icon-refresh-left"></i>
46 <i class="el-icon-document"></i>
47 </div>
48 </div>
49 <div class="prev" @click="imgPrev()" v-if="imgList.length > 0">
50 <i class="el-icon-arrow-left"></i>
51 </div>
52 <div class="img-box">
53 <img :src="showImg.imgUrl" alt="" />
54 </div>
55 <div class="next" @click="imgNext()" v-if="imgList.length > 0">
56 <i class="el-icon-arrow-right"></i>
57 </div>
58 <div class="img-list">
59 <div class="item" v-for="(item, index) in imgList" :key="index">
60 <img :class="showImg.id == item.id ? 'active' : ''" :src="item.imgUrl" alt=""
61 @click="imgClick(item, index)" />
62 </div>
63 </div>
64 <div class="btn-group">
65 <el-button>扫描</el-button>
66 <el-button icon="el-icon-upload2">上传文件</el-button>
67 <el-button icon="el-icon-delete">删除</el-button>
68 </div>
69 </div>
70 </div> 19 </div>
71 </div> 20 </div>
72 <clxxAddDialog v-model="isDialog" /> 21 <clxxAddDialog v-model="isDialog" />
...@@ -75,12 +24,10 @@ ...@@ -75,12 +24,10 @@
75 <script> 24 <script>
76 import { mapGetters } from "vuex"; 25 import { mapGetters } from "vuex";
77 import clxxAddDialog from "./clxxAddDialog.vue"; 26 import clxxAddDialog from "./clxxAddDialog.vue";
78 import { upward, down } from "@/utils/operation"; 27 import imagePreview from '@/views/components/imagePreview.vue'
79 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js"; 28 import { clmlInit, move, save, clmlDelete } from "@/api/fqsq.js";
80 import filter from "@/utils/filter.js";
81
82 export default { 29 export default {
83 components: { clxxAddDialog }, 30 components: { clxxAddDialog, imagePreview },
84 data () { 31 data () {
85 return { 32 return {
86 isDialog: false, 33 isDialog: false,
...@@ -223,18 +170,19 @@ export default { ...@@ -223,18 +170,19 @@ export default {
223 ], 170 ],
224 key: 0, 171 key: 0,
225 tableData: [], 172 tableData: [],
226 menuOpen: true, 173 previewImg: {
227 treeCheckId: "", 174 bsmCatalog: '',
228 defaultProps: { 175 index: 0,
229 children: "children", 176 selectedIndex: 0,
230 label: "label", 177 imgList: [
231 }, 178 {
232 title: "", 179 url: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
233 titleYs: 1, 180 },
234 titleNum: 0, 181 {
235 imgList: [], 182 url: 'https://img1.baidu.com/it/u=2383300938,4241539174&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=500'
236 showImg: {}, 183 }
237 iclass: "itemIcon el-icon-caret-bottom", 184 ],
185 }
238 }; 186 };
239 }, 187 },
240 computed: { 188 computed: {
...@@ -359,14 +307,6 @@ export default { ...@@ -359,14 +307,6 @@ export default {
359 this.showImg = item; 307 this.showImg = item;
360 this.titleYs = index + 1; 308 this.titleYs = index + 1;
361 }, 309 },
362 // 图片上一张
363 imgPrev () {
364
365 },
366 // 图片下一张
367 imgNext () {
368
369 },
370 // 字典 310 // 字典
371 dicStatus (val, code) { 311 dicStatus (val, code) {
372 let data = this.$store.getters.dictData[code], 312 let data = this.$store.getters.dictData[code],
...@@ -384,6 +324,13 @@ export default { ...@@ -384,6 +324,13 @@ export default {
384 }; 324 };
385 </script> 325 </script>
386 <style scoped lang='scss'> 326 <style scoped lang='scss'>
327 @import "~@/styles/mixin.scss";
328
329 .active {
330 background: $light-blue !important;
331 color: #fff;
332 }
333
387 .clxx { 334 .clxx {
388 width: 100%; 335 width: 100%;
389 display: flex; 336 display: flex;
...@@ -391,40 +338,30 @@ export default { ...@@ -391,40 +338,30 @@ export default {
391 height: calc(100vh - 150px); 338 height: calc(100vh - 150px);
392 339
393 .left { 340 .left {
394 width: 52px; 341 display: flex;
395 background: #f3f4f7; 342 flex-direction: column;
396 border-radius: 1px; 343 justify-content: space-between;
397 344
398 .item { 345 .item {
399 width: 42px; 346 width: 42px;
400 height: 50%; 347 height: 49%;
401 margin: 0 0 auto auto; 348 @include flex-center;
402 writing-mode: tb; 349 background-color: #E4E7ED;
403 display: flex; 350 border-bottom-right-radius: 10px;
404 justify-content: center; 351 padding: 15px;
405 align-items: center;
406 font-size: 16px;
407 font-family: PingFangSC-Medium, PingFang SC;
408 color: #7a7a7a;
409 cursor: pointer; 352 cursor: pointer;
410 border-right: 1px solid #d9d9d9; 353 transition: all 0.3s;
411 }
412 354
413 .item.checked { 355 &:hover {
414 background: #ffffff; 356 @extend .active;
415 border-top: 1px solid #d9d9d9; 357 }
416 border-bottom: 1px solid #d9d9d9;
417 border-left: 2px solid #2b7ff1;
418 border-right: none;
419 font-size: 18px;
420 color: #4a4a4a;
421 } 358 }
422 } 359 }
423 360
424 .right { 361 .right {
425 width: calc(100% - 80px); 362 width: 100%;
426 height: 100%; 363 height: 100%;
427 padding: 0 30px; 364 padding: 0 15px;
428 365
429 .clmlmx-box { 366 .clmlmx-box {
430 margin: 0 auto; 367 margin: 0 auto;
...@@ -513,101 +450,6 @@ export default { ...@@ -513,101 +450,6 @@ export default {
513 background: #f3f4f7; 450 background: #f3f4f7;
514 margin: 0 auto; 451 margin: 0 auto;
515 position: relative; 452 position: relative;
516
517 .header {
518 height: 54px;
519 line-height: 52px;
520 background: #eceef2;
521 border: 1px solid #ededed;
522 padding: 0 0 0 30px;
523
524 .title {
525 font-size: 13px;
526 display: inline-block;
527 }
528
529 .i-group {
530 float: right;
531 height: 100%;
532
533 i {
534 width: 50px;
535 height: 52px;
536 cursor: pointer;
537 }
538 }
539 }
540
541 .prev,
542 .next {
543 width: 60px;
544 height: 60px;
545 line-height: 60px;
546 text-align: center;
547 font-size: 40px;
548 border-radius: 6px;
549 cursor: pointer;
550 position: absolute;
551 }
552
553 .prev:hover,
554 .next:hover {
555 background: #7a7a7a;
556 }
557
558 .prev {
559 top: 40%;
560 left: 10px;
561 }
562
563 .next {
564 top: 40%;
565 right: 10px;
566 }
567
568 .img-box {
569 width: 800px;
570 height: calc(100% - 214px);
571 padding: 5px;
572 text-align: center;
573 margin: 0 auto;
574
575 img {
576 max-height: 100%;
577 max-width: 100%;
578 }
579 }
580
581 .img-list {
582 width: 100%;
583 height: 80px;
584 line-height: 80px;
585 background: #eceef2;
586 text-align: center;
587
588 .item {
589 display: inline-block;
590 margin: 10px 5px;
591
592 img {
593 width: 60px;
594 height: 60px;
595 cursor: pointer;
596 }
597
598 .active {
599 border: 1px solid #fff;
600 }
601 }
602 }
603
604 .btn-group {
605 width: 100%;
606 height: 80px;
607 line-height: 80px;
608 background: #fff;
609 text-align: center;
610 }
611 } 453 }
612 } 454 }
613 } 455 }
......
...@@ -95,7 +95,7 @@ export default { ...@@ -95,7 +95,7 @@ export default {
95 }, 95 },
96 { 96 {
97 name: '退出', 97 name: '退出',
98 icon: '', 98 icon: 'del',
99 value: 'tc' 99 value: 'tc'
100 } 100 }
101 ], 101 ],
...@@ -192,10 +192,9 @@ export default { ...@@ -192,10 +192,9 @@ export default {
192 else if (item.value == 'zc') { 192 else if (item.value == 'zc') {
193 this.zcDialog = true 193 this.zcDialog = true
194 this.$refs.zcDialogRef.tablelistFn() 194 this.$refs.zcDialogRef.tablelistFn()
195 } else if (item.value === 'tc') {
196 window.close()
195 } 197 }
196 // if (index == 3) {
197 // window.close()
198 // }
199 }, 198 },
200 loadView (view) { 199 loadView (view) {
201 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 200 return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
......