centaline-data-driven 1.6.63 → 1.6.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/build/centaline/centaline.path.js +1 -0
  2. package/package.json +2 -1
  3. package/release-log.md +22 -0
  4. package/src/SearchList.vue +2 -2
  5. package/src/SearchTree.vue +3 -3
  6. package/src/centaline/dialogList/src/dialog.vue +332 -322
  7. package/src/centaline/dynamicFile/src/dynamicFile.vue +62 -14
  8. package/src/centaline/dynamicForm/src/dynamicForm.vue +1714 -1450
  9. package/src/centaline/dynamicMarkdownViewer/index.js +11 -0
  10. package/src/centaline/dynamicMarkdownViewer/src/dynamicMarkdownViewer.vue +128 -0
  11. package/src/centaline/dynamicMo/src/dynamicMo.vue +4 -0
  12. package/src/centaline/dynamicSearchList/src/dynamicSearchTable.vue +1 -1
  13. package/src/centaline/dynamicTags/src/dynamicTags.vue +4 -0
  14. package/src/centaline/dynamicTreeList/src/dynamicTreeList.vue +2 -2
  15. package/src/centaline/dynamicViewerFile/src/dynamicViewerFile.vue +374 -392
  16. package/src/centaline/dynamicViewerFile/src/dynamicViewerImage.vue +1 -1
  17. package/src/centaline/loader/src/ctl/MarkdownViewer.js +17 -0
  18. package/src/centaline/loader/src/ctl/Router.js +13 -0
  19. package/src/centaline/loader/src/ctl/lib/LibFunction.js +5 -0
  20. package/src/centaline/loader/src/ctl.js +1 -0
  21. package/src/main.js +5 -5
  22. package/wwwroot/static/centaline/centaline-data-driven.js +6324 -5682
  23. package/wwwroot/static/centaline/centaline-data-driven.js.map +1 -1
  24. package/wwwroot/static/centaline/fonts/element-icons.535877f5.woff +0 -0
  25. package/wwwroot/static/centaline/fonts/element-icons.732389de.ttf +0 -0
  26. package/wwwroot/static/centaline/fonts/fontawesome-webfont.674f50d2.eot +0 -0
  27. package/wwwroot/static/centaline/fonts/fontawesome-webfont.af7ae505.woff2 +0 -0
  28. package/wwwroot/static/centaline/fonts/fontawesome-webfont.b06871f2.ttf +0 -0
  29. package/wwwroot/static/centaline/fonts/fontawesome-webfont.fee66e71.woff +0 -0
  30. package/wwwroot/static/centaline/static/img/fontawesome-webfont.912ec66d.912ec66.svg +2671 -0
package/src/centaline/dynamicViewerFile/src/dynamicViewerFile.vue CHANGED
@@ -1,17 +1,10 @@
1
1
  <template>
2
- <div style="height: 100%"
3
- id="viewer-file"
4
- ref="viewerfile"
5
- @contextmenu="handleMouse" class="ccai">
2
+ <div style="height: 100%" id="viewer-file" ref="viewerfile" @contextmenu="handleMouse" class="ccai">
6
3
  <el-container style="height: 100%; border: 1px solid #eee">
7
- <el-aside style="background-color: rgb(238, 241, 246)" class="ccai-aside">
4
+ <el-aside style="background-color: rgb(238, 241, 246)" class="ccai-aside" v-if="flagLeft">
8
5
  <div style="height: 100%" class="viewerMenu">
9
- <el-menu :default-openeds="openeds"
10
- :default-active="activeitem"
11
- style="height: 100%">
12
- <el-submenu :key="groupIndex"
13
- :index="groupIndex.toString()"
14
- v-for="(group, groupIndex) in MediaAlbum">
6
+ <el-menu :default-openeds="openeds" :default-active="activeitem" style="height: 100%">
7
+ <el-submenu :key="groupIndex" :index="groupIndex.toString()" v-for="(group, groupIndex) in MediaAlbum">
15
8
  <template slot="title">
16
9
  <i></i>
17
10
  <div style="
@@ -23,142 +16,112 @@
23
16
  </div>
24
17
  </template>
25
18
  <el-menu-item-group>
26
- <el-menu-item @click="handleClick(item, groupIndex, index)"
27
- :key="index"
28
- :index="groupIndex.toString() + '-' + index.toString()"
29
- v-for="(item, index) in group.medias">{{ item.mediaLabelName || item.fileName }}</el-menu-item>
19
+ <el-menu-item @click="handleClick(item, groupIndex, index)" :key="index"
20
+ :index="groupIndex.toString() + '-' + index.toString()" v-for="(item, index) in group.medias">{{
21
+ item.mediaLabelName
22
+ || item.fileName }}</el-menu-item>
30
23
  </el-menu-item-group>
31
24
  </el-submenu>
32
25
  </el-menu>
33
26
  </div>
34
27
  </el-aside>
35
- <el-main ref="displayArea" v-loading="downloadLoading" element-loading-spinner="el-icon-loading" :element-loading-custom-class="'cloading'">
36
- <div style="position: relative; width: 100%"
37
- :style="{ height: displayAreaHeight - 78 + 'px' }"
38
- v-if="resultObject">
28
+ <el-main ref="displayArea" v-loading="downloadLoading" element-loading-spinner="el-icon-loading"
29
+ :element-loading-custom-class="'cloading'" style="background-color: white;">
30
+ <div v-if="!flagLeft" style="position: absolute; top: 10px; right: 10px;cursor: pointer;color:red"
31
+ @click="closeViewerFile">
32
+ <i class="el-icon-circle-close" style="font-size: 20px;"></i>
33
+
34
+ </div>
35
+ <div style="position: relative; width: 100%" :style="{ height: displayAreaHeight - 78 + 'px' }"
36
+ v-if="resultObject">
39
37
  <!--VR-->
40
- <template v-if="itemFile.mediaTypeID == '1'||(itemFile.mediaTypeID+'').toLowerCase()=='vr'">
41
- <iframe :src="resultObject"
42
- :height="displayAreaHeight - 80 + 'px'"
43
- :width="displayAreaWidth + 'px'" style="border-width: 0px;">
38
+ <template v-if="itemFile.mediaTypeID == '1' || (itemFile.mediaTypeID + '').toLowerCase() == 'vr'">
39
+ <iframe :src="resultObject" :height="displayAreaHeight - 80 + 'px'" :width="displayAreaWidth + 'px'"
40
+ style="border-width: 0px;">
44
41
  </iframe>
45
42
  </template>
46
43
  <!--Photo-->
47
- <template v-else-if="itemFile.mediaTypeID == '2'||(itemFile.mediaTypeID+'').toLowerCase()=='photo'">
44
+ <template v-else-if="itemFile.mediaTypeID == '2' || (itemFile.mediaTypeID + '').toLowerCase() == 'photo'">
48
45
  <ct-viewerImage ref="viewerImage"
49
- :imgUrl="resultObject+((!itemFile.flagUrl)?'/'+displayAreaWidth+'/'+displayAreaHeight+'?FlagC=0':'')"
50
- :rotate="rotate"></ct-viewerImage>
46
+ :imgUrl="resultObject + ((!itemFile.flagUrl) ? '/' + displayAreaWidth + '/' + displayAreaHeight + '?FlagC=0' : '')"
47
+ :rotate="rotate"></ct-viewerImage>
51
48
  </template>
52
49
  <!--ThreeDimensional-->
53
- <template v-else-if="itemFile.mediaTypeID == '3'||(itemFile.mediaTypeID+'').toLowerCase()=='threedimensional'">
50
+ <template
51
+ v-else-if="itemFile.mediaTypeID == '3' || (itemFile.mediaTypeID + '').toLowerCase() == 'threedimensional'">
54
52
  暂不支持ThreeDimensional
55
53
  </template>
56
54
  <!--Video-->
57
- <template v-else-if="itemFile.mediaTypeID == '4'||(itemFile.mediaTypeID+'').toLowerCase()=='video'">
55
+ <template v-else-if="itemFile.mediaTypeID == '4' || (itemFile.mediaTypeID + '').toLowerCase() == 'video'">
58
56
  <div class="viewerContent">
59
- <template v-if="itemFile.thumbnailUrl">
60
- <video preload="none" :poster="itemFile.thumbnailUrl"
61
- :src="resultObject"
62
- controls="controls"
63
- class="viewerContent"
64
- controlslist="nodownload"
65
- :height="500"
66
- :width="800">
67
- 您的浏览器不支持 video 标签。
68
- </video>
57
+ <template v-if="itemFile.thumbnailUrl">
58
+ <video preload="none" :poster="itemFile.thumbnailUrl" :src="resultObject" controls="controls"
59
+ class="viewerContent" controlslist="nodownload" :height="500" :width="800">
60
+ 您的浏览器不支持 video 标签。
61
+ </video>
69
62
  </template>
70
63
  <template v-else>
71
- <video preload="none"
72
- :src="resultObject"
73
- controls="controls"
74
- class="viewerContent"
75
- controlslist="nodownload"
76
- :height="500"
77
- :width="800">
78
- 您的浏览器不支持 video 标签。
79
- </video>
64
+ <video preload="none" :src="resultObject" controls="controls" class="viewerContent"
65
+ controlslist="nodownload" :height="500" :width="800">
66
+ 您的浏览器不支持 video 标签。
67
+ </video>
80
68
  </template>
81
69
  </div>
82
70
  </template>
83
71
  <!--Audio-->
84
- <template v-else-if="itemFile.mediaTypeID == '5'||(itemFile.mediaTypeID+'').toLowerCase()=='audio'">
72
+ <template v-else-if="itemFile.mediaTypeID == '5' || (itemFile.mediaTypeID + '').toLowerCase() == 'audio'">
85
73
  <div class="viewerContent">
86
- <audio preload="none"
87
- :src="resultObject"
88
- controls="controls"
89
- class="viewerContent"
90
- controlslist="nodownload"
91
- style="width: 50%">
74
+ <audio preload="none" :src="resultObject" controls="controls" class="viewerContent"
75
+ controlslist="nodownload" style="width: 50%">
92
76
  您的浏览器不支持 audio 标签。
93
77
  </audio>
94
78
  </div>
95
79
  </template>
96
80
  <!--File-->
97
- <template v-else-if="itemFile.mediaTypeID == '6'||(itemFile.mediaTypeID+'').toLowerCase()=='file'">
98
- <template v-if="'pdf' .search(itemFile.fileExtension.toLowerCase())>-1 ">
99
- <ct-viewerPDF :pdfUrl="resultObject"
100
- :displayAreaHeight="displayAreaHeight"
101
- :displayAreaWidth="displayAreaWidth">
81
+ <template v-else-if="itemFile.mediaTypeID == '6' || (itemFile.mediaTypeID + '').toLowerCase() == 'file'">
82
+ <template v-if="'pdf'.search(itemFile.fileExtension.toLowerCase()) > -1">
83
+ <ct-viewerPDF :pdfUrl="resultObject" :displayAreaHeight="displayAreaHeight"
84
+ :displayAreaWidth="displayAreaWidth">
102
85
  </ct-viewerPDF>
103
86
  </template>
104
- <template v-else>
105
- <div class="viewerContent"
106
- style="max-height: 200px; text-align: center">
87
+ <template v-else>
88
+ <div class="viewerContent" style="max-height: 200px; text-align: center">
107
89
  <a :href="resultObject" target="_blank">
108
90
  <img :src="itemFile.thumbnailUrl" /><br />{{
109
91
  itemFile.mediaLabelName || itemFile.fileName
110
92
  }}
111
93
  </a>
112
- </div>
113
- </template>
94
+ </div>
95
+ </template>
114
96
  </template>
115
97
  <template v-else>
116
- <div class="viewerContent"
117
- style="max-height: 200px; text-align: center">
118
- <a :href="resultObject" target="_blank">
119
- <img :src="itemFile.thumbnailUrl" /><br />{{
120
- itemFile.mediaLabelName || itemFile.fileName
121
- }}
122
- </a>
123
- </div>
98
+ <div class="viewerContent" style="max-height: 200px; text-align: center">
99
+ <a :href="resultObject" target="_blank">
100
+ <img :src="itemFile.thumbnailUrl" /><br />{{
101
+ itemFile.mediaLabelName || itemFile.fileName
102
+ }}
103
+ </a>
104
+ </div>
124
105
  </template>
125
106
 
126
107
  <template v-if="resultObject != ''">
127
- <div class="magnify-footer"
128
- :style="{
129
- width: displayAreaWidth + 'px',
130
- bottom: displayAreabtm + 10 + 'px',
131
- }">
132
- <div class="magnify-toolbar"
133
- :style="{ 'margin-left': displayArealeft + 'px' }">
134
- <a href="javascript:void(0)"
135
- class="magnify-btn el-icon-back"
136
- title="上一个"
137
- @click="jump(-1)"></a><a href="javascript:void(0)"
138
- class="magnify-btn el-icon-right"
139
- title="下一个"
140
- @click="jump(1)"></a>
141
- <template v-if="itemFile.mediaTypeID == '2'||(itemFile.mediaTypeID+'').toLowerCase()=='photo'">
142
- <a href="javascript:void(0)"
143
- class="magnify-btn el-icon-refresh-left"
144
- title="左旋转"
145
- @click="rotateImg('L')"></a>
146
- <a href="javascript:void(0)"
147
- class="magnify-btn el-icon-refresh-right"
148
- title="右旋转"
149
- @click="rotateImg('R')"></a>
150
- <a href="javascript:void(0)"
151
- class="magnify-btn el-icon-zoom-in"
152
- title="放大"
153
- @click="zoom(0.2)"></a>
154
- <a href="javascript:void(0)"
155
- class="magnify-btn el-icon-refresh"
156
- title="实际尺寸"
157
- @click="actualSize()"></a>
158
- <a href="javascript:void(0)"
159
- class="magnify-btn el-icon-zoom-out"
160
- title="缩小"
161
- @click="zoom(-0.2)">
108
+ <div class="magnify-footer" :style="{
109
+ width: displayAreaWidth + 'px',
110
+ bottom: displayAreabtm + 10 + 'px',
111
+ position: !flagLeft ? 'absolute' : 'fixed',
112
+ }">
113
+ <div class="magnify-toolbar" :style="{ 'margin-left': displayArealeft + 'px' }">
114
+ <a href="javascript:void(0)" class="magnify-btn el-icon-back" title="上一个" @click="jump(-1)"></a><a
115
+ href="javascript:void(0)" class="magnify-btn el-icon-right" title="下一个" @click="jump(1)"></a>
116
+ <template v-if="itemFile.mediaTypeID == '2' || (itemFile.mediaTypeID + '').toLowerCase() == 'photo'">
117
+ <a href="javascript:void(0)" class="magnify-btn el-icon-refresh-left" title="左旋转"
118
+ @click="rotateImg('L')"></a>
119
+ <a href="javascript:void(0)" class="magnify-btn el-icon-refresh-right" title="右旋转"
120
+ @click="rotateImg('R')"></a>
121
+ <a href="javascript:void(0)" class="magnify-btn el-icon-zoom-in" title="放大" @click="zoom(0.2)"></a>
122
+ <a href="javascript:void(0)" class="magnify-btn el-icon-refresh" title="实际尺寸"
123
+ @click="actualSize()"></a>
124
+ <a href="javascript:void(0)" class="magnify-btn el-icon-zoom-out" title="缩小" @click="zoom(-0.2)">
162
125
  </a>
163
126
  </template>
164
127
  <!--<a v-if="itemFile.rightDownload"
@@ -168,11 +131,9 @@
168
131
  :download="(itemFile.mediaLabelName || itemFile.fileName)"
169
132
  @click="handDownload(resultObject)"
170
133
  ></a>-->
171
- <a href="javascript:void(0)" v-if="itemFile.rightDownload&&(itemFile.mediaTypeID !='1'
172
- &&(itemFile.mediaTypeID+'').toLowerCase()!='vr')"
173
- class="magnify-btn el-icon-download"
174
- title="下载"
175
- @click="handDownload(resultObject,itemFile)"></a>
134
+ <a href="javascript:void(0)" v-if="itemFile.rightDownload && (itemFile.mediaTypeID != '1'
135
+ && (itemFile.mediaTypeID + '').toLowerCase() != 'vr')" class="magnify-btn el-icon-download"
136
+ title="下载" @click="handDownload(resultObject, itemFile)"></a>
176
137
 
177
138
 
178
139
  </div>
@@ -188,95 +149,104 @@
188
149
 
189
150
 
190
151
  <script>
191
- import dynamicElement from "../../mixins/dynamicElement";
192
- import dynamicViewerImage from "./dynamicViewerImage.vue";
193
- import dynamicViewerPDF from "./dynamicViewerPDF.vue";
194
- //import dynamicViewerVR from "./dynamicViewerVR.vue";
195
- export default {
196
- name: "ct-viewerfile",
197
- mixins: [dynamicElement],
198
- components: {
199
- "ct-viewerImage": dynamicViewerImage,
200
- "ct-viewerPDF": dynamicViewerPDF,
201
- // "ct-viewerVR": dynamicViewerVR,
202
- },
203
- props: {
204
- MediaAlbum: Array,
205
- groupIndex: Number,
206
- index: Number,
207
- },
208
- data() {
209
- return {
210
- rotate: 0,
211
- activeIndex: -1,
212
- activeGroup: -1,
213
- resultObject: "",
214
- itemFile: {},
215
- groupCountLen: 0,
216
- activeitem: "",
217
- openeds: [],
218
- displayAreaWidth: 0,
219
- displayAreabtm: 0,
220
- displayArealeft: 0,
221
- displayAreaHeight: 0,
222
- downloadUrl: "",
223
- downloadLoading: false
224
- };
225
- },
226
- created() {
227
- var self = this;
228
- this.groupCountLen = 0;
229
- this.MediaAlbum.forEach((item, n) => {
230
- self.openeds.push(n.toString());
231
- item.medias.forEach((v) => {
232
- this.groupCountLen++;
233
- });
152
+ import dynamicElement from "../../mixins/dynamicElement";
153
+ import dynamicViewerImage from "./dynamicViewerImage.vue";
154
+ import dynamicViewerPDF from "./dynamicViewerPDF.vue";
155
+ //import dynamicViewerVR from "./dynamicViewerVR.vue";
156
+ export default {
157
+ name: "ct-viewerfile",
158
+ mixins: [dynamicElement],
159
+ components: {
160
+ "ct-viewerImage": dynamicViewerImage,
161
+ "ct-viewerPDF": dynamicViewerPDF,
162
+ // "ct-viewerVR": dynamicViewerVR,
163
+ },
164
+ props: {
165
+ MediaAlbum: Array,
166
+ groupIndex: Number,
167
+ index: Number,
168
+ flagLeft: {
169
+ type: Boolean,
170
+ default: true
171
+ }
172
+ },
173
+ data() {
174
+ return {
175
+ rotate: 0,
176
+ activeIndex: -1,
177
+ activeGroup: -1,
178
+ resultObject: "",
179
+ itemFile: {},
180
+ groupCountLen: 0,
181
+ activeitem: "",
182
+ openeds: [],
183
+ displayAreaWidth: 0,
184
+ displayAreabtm: 0,
185
+ displayArealeft: 0,
186
+ displayAreaHeight: 0,
187
+ downloadUrl: "",
188
+ downloadLoading: false
189
+ };
190
+ },
191
+ created() {
192
+ var self = this;
193
+ this.groupCountLen = 0;
194
+ this.MediaAlbum.forEach((item, n) => {
195
+ self.openeds.push(n.toString());
196
+ item.medias.forEach((v) => {
197
+ this.groupCountLen++;
234
198
  });
235
- },
236
- destroyed (){
237
- if(this.timeoutHandle){
238
- clearTimeout(this.timeoutHandle)
239
- }
240
- },
241
- deactivated(){
242
- this.downloadUrl="";
243
- },
244
- mounted() {
245
- var self = this;
246
- self.displayAreaWidth = this.DomWidth();
199
+ });
200
+ },
201
+ destroyed() {
202
+ if (this.timeoutHandle) {
203
+ clearTimeout(this.timeoutHandle)
204
+ }
205
+ },
206
+ deactivated() {
207
+ this.downloadUrl = "";
208
+ },
209
+ mounted() {
210
+ var self = this;
211
+ self.displayAreaWidth = this.DomWidth();
212
+ self.displayArealeft = self.DomLeft();
213
+ self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
214
+ self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
215
+ if (!this.flagLeft) {
216
+ self.displayAreaHeight = self.displayAreaHeight - 5;
217
+ }
218
+ window.onresize = () => {
219
+ self.displayAreaWidth = self.DomWidth();
247
220
  self.displayArealeft = self.DomLeft();
248
221
  self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
249
222
  self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
250
- window.onresize = () => {
251
- self.displayAreaWidth = self.DomWidth();
252
- self.displayArealeft = self.DomLeft();
253
- self.displayAreabtm = self.DomTop(self.$refs.displayArea.$el);
254
- self.displayAreaHeight = self.$refs.displayArea.$el.offsetHeight;
255
- };
256
-
257
- if (
258
- this.groupIndex != undefined &&
259
- this.index != undefined &&
260
- this.groupIndex > -1 &&
261
- this.index > -1
262
- ) {
263
- var item = this.MediaAlbum[this.groupIndex].medias[this.index];
264
- this.handleClick(item, this.groupIndex, this.index);
223
+ if (!this.flagLeft) {
224
+ self.displayAreaHeight = self.displayAreaHeight - 5;
225
+ }
226
+ };
227
+ if (
228
+ this.groupIndex != undefined &&
229
+ this.index != undefined &&
230
+ this.groupIndex > -1 &&
231
+ this.index > -1
232
+ ) {
233
+ var item = this.MediaAlbum[this.groupIndex].medias[this.index];
234
+ this.handleClick(item, this.groupIndex, this.index);
235
+ }
236
+ },
237
+ methods: {
238
+ getDownloadUrl(url) {
239
+ if (/\/viewer\//.test(url)) {
240
+ return url.replace(/\/viewer\//, '/download/');
241
+ }
242
+ else if (/\/preview$/.test(url)) {
243
+ return url.replace(/\/preview$/, '/download');
244
+ }
245
+ else {
246
+ return url;
265
247
  }
266
248
  },
267
- methods: {
268
- getDownloadUrl(url) {
269
- if (/\/viewer\//.test(url)) {
270
- return url.replace(/\/viewer\//, '/download/');
271
- }
272
- else if (/\/preview$/.test(url)) {
273
- return url.replace(/\/preview$/, '/download');
274
- }
275
- else {
276
- return url;
277
- }
278
- },
279
- handDownload(url, itemFile) {
249
+ handDownload(url, itemFile) {
280
250
  let self = this;
281
251
  self.downloadLoading = true;
282
252
  if (itemFile.downloadLogAction) {
@@ -291,235 +261,247 @@
291
261
  self.handDownloadUrl(url);
292
262
  }
293
263
  },
294
- handDownloadUrl(url){
264
+ handDownloadUrl(url) {
295
265
  let self = this;
296
266
  if (url.indexOf("?") > -1) {
297
- self.downloadUrl = self.getDownloadUrl(url) + "&download=1&" + Math.random();
298
- }
299
- else {
300
- self.downloadUrl = self.getDownloadUrl(url) + "?download=1&" + Math.random();
301
- }
302
- self.timeoutHandle=setTimeout(function () {
303
- self.downloadLoading = false;
304
- }, 1000);
267
+ self.downloadUrl = self.getDownloadUrl(url) + "&download=1&" + Math.random();
268
+ }
269
+ else {
270
+ self.downloadUrl = self.getDownloadUrl(url) + "?download=1&" + Math.random();
271
+ }
272
+ self.timeoutHandle = setTimeout(function () {
273
+ self.downloadLoading = false;
274
+ }, 1000);
305
275
  },
306
- handleMouse(e) {
307
- e.preventDefault();
308
- },
309
- DomWidth() {
310
- let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
311
- arrLength = arrLength > 0 ? arrLength : 0;
312
- var Width =
313
- window.innerWidth -
314
- arrLength -
315
- this.$refs.displayArea.$el.offsetLeft -
316
- 40;
317
-
318
- return Width;
319
- },
320
- DomLeft() {
321
- let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
322
- arrLength = arrLength > 0 ? arrLength : 0;
323
- var Width =
324
- window.innerWidth -
325
- arrLength -
326
- this.$refs.displayArea.$el.offsetLeft -
327
- 40;
276
+ handleMouse(e) {
277
+ e.preventDefault();
278
+ },
279
+ DomWidth() {
280
+ if (!this.flagLeft) {
281
+ return this.$refs.displayArea.$el.offsetWidth - 40;
282
+ }
283
+ let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
284
+ arrLength = arrLength > 0 ? arrLength : 0;
285
+ var Width =
286
+ window.innerWidth -
287
+ arrLength -
288
+ this.$refs.displayArea.$el.offsetLeft -
289
+ 40;
328
290
 
329
- return Width / 2 - 524 + this.$refs.displayArea.$el.offsetLeft - 40;
330
- },
331
- DomTop() {
332
- const height = window.innerHeight; //可视区窗口高度
333
- const curDomHeight = this.$refs.viewerfile.offsetHeight;
334
- // const curDomHeight = dom.getBoundingClientRect().height
335
- const curDomY = this.$refs.viewerfile.getBoundingClientRect().y;
336
- let curDomBottom = height - curDomHeight - curDomY;
337
- curDomBottom = curDomBottom > 0 ? curDomBottom : 0;
338
- return curDomBottom;
339
- },
340
- FileExtension(item) {
341
- return item.savedFileName.replace(/.+\./, "").toLowerCase();
342
- },
343
- offsetLeft(elements) {
344
- var left = elements.offsetLeft;
345
- var parent = elements.offsetParent;
346
- while (parent != null) {
347
- left += parent.offsetLeft;
348
- parent = parent.offsetParent;
349
- }
291
+ return Width;
292
+ },
293
+ DomLeft() {
294
+ if (!this.flagLeft) {
295
+ return 65;
296
+ }
297
+ let arrLength = window.innerWidth - this.$refs.viewerfile.offsetWidth;
298
+ arrLength = arrLength > 0 ? arrLength : 0;
299
+ var Width =
300
+ window.innerWidth -
301
+ arrLength -
302
+ this.$refs.displayArea.$el.offsetLeft -
303
+ 40;
350
304
 
351
- return left;
352
- },
353
- handleClick(item, groupIndex, index) {
354
- if (index == this.activeIndex && groupIndex == this.activeGroup) return;
355
- this.activeIndex = index;
356
- this.activeGroup = groupIndex;
357
- this.itemFile = item;
305
+ return Width / 2 - 524 + this.$refs.displayArea.$el.offsetLeft - 40;
306
+ },
307
+ DomTop() {
308
+ if (!this.flagLeft) {
309
+ return -65;
310
+ }
311
+ const height = window.innerHeight; //可视区窗口高度
312
+ const curDomHeight = this.$refs.viewerfile.offsetHeight;
313
+ // const curDomHeight = dom.getBoundingClientRect().height
314
+ const curDomY = this.$refs.viewerfile.getBoundingClientRect().y;
315
+ let curDomBottom = height - curDomHeight - curDomY;
316
+ curDomBottom = curDomBottom > 0 ? curDomBottom : 0;
317
+ return curDomBottom;
318
+ },
319
+ FileExtension(item) {
320
+ return item.savedFileName.replace(/.+\./, "").toLowerCase();
321
+ },
322
+ offsetLeft(elements) {
323
+ var left = elements.offsetLeft;
324
+ var parent = elements.offsetParent;
325
+ while (parent != null) {
326
+ left += parent.offsetLeft;
327
+ parent = parent.offsetParent;
328
+ }
358
329
 
359
- this.activeitem = groupIndex + "-" + index;
330
+ return left;
331
+ },
332
+ handleClick(item, groupIndex, index) {
333
+ if (index == this.activeIndex && groupIndex == this.activeGroup) return;
334
+ this.activeIndex = index;
335
+ this.activeGroup = groupIndex;
336
+ this.itemFile = item;
360
337
 
361
- this.resultObject = this.itemFile.mediaUrl;
338
+ this.activeitem = groupIndex + "-" + index;
362
339
 
363
- this.$forceUpdate();
364
- },
365
- jump(n) {
366
- var item = {};
367
- var groupIndex = this.activeGroup;
368
- var index = -1;
369
- if (n > 0) {
370
- if (
371
- this.activeGroup * 1 + this.activeIndex + 1 + n >
372
- this.groupCountLen
373
- ) {
374
- groupIndex = 0;
375
- index = 0;
340
+ this.resultObject = this.itemFile.mediaUrl;
341
+ this.$emit('ViewerFilechangeIndex', { groupIndex, index });
342
+ this.$forceUpdate();
343
+ },
344
+ jump(n) {
345
+ var item = {};
346
+ var groupIndex = this.activeGroup;
347
+ var index = -1;
348
+ if (n > 0) {
349
+ if (
350
+ this.activeGroup * 1 + this.activeIndex + 1 + n >
351
+ this.groupCountLen
352
+ ) {
353
+ groupIndex = 0;
354
+ index = 0;
355
+ } else {
356
+ if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
357
+ index = this.activeIndex + n;
376
358
  } else {
377
- if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
378
- index = this.activeIndex + n;
359
+ if (
360
+ this.MediaAlbum[this.activeGroup + n] &&
361
+ this.MediaAlbum[this.activeGroup + n].medias[0]
362
+ ) {
363
+ index = 0;
364
+ groupIndex = this.activeGroup + n;
379
365
  } else {
380
- if (
381
- this.MediaAlbum[this.activeGroup + n] &&
382
- this.MediaAlbum[this.activeGroup + n].medias[0]
383
- ) {
384
- index = 0;
385
- groupIndex = this.activeGroup + n;
386
- } else {
387
- groupIndex = 0;
388
- index = 0;
389
- }
366
+ groupIndex = 0;
367
+ index = 0;
390
368
  }
391
369
  }
392
- } else if (n < 0) {
393
- if (this.activeGroup * 1 + this.activeIndex + n < 0) {
394
- groupIndex = this.MediaAlbum.length - 1;
395
- index = this.MediaAlbum[groupIndex].medias.length - 1;
370
+ }
371
+ } else if (n < 0) {
372
+ if (this.activeGroup * 1 + this.activeIndex + n < 0) {
373
+ groupIndex = this.MediaAlbum.length - 1;
374
+ index = this.MediaAlbum[groupIndex].medias.length - 1;
375
+ } else {
376
+ if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
377
+ index = this.activeIndex + n;
396
378
  } else {
397
- if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
398
- index = this.activeIndex + n;
379
+ if (
380
+ this.MediaAlbum[this.activeGroup + n].medias[
381
+ this.MediaAlbum[this.activeGroup + n].medias.length - 1
382
+ ]
383
+ ) {
384
+ index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
385
+ groupIndex = this.activeGroup + n;
399
386
  } else {
400
- if (
401
- this.MediaAlbum[this.activeGroup + n].medias[
402
- this.MediaAlbum[this.activeGroup + n].medias.length - 1
403
- ]
404
- ) {
405
- index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
406
- groupIndex = this.activeGroup + n;
407
- } else {
408
- groupIndex = this.MediaAlbum.length - 1;
409
- index = this.MediaAlbum[groupIndex].medias.length - 1;
410
- }
387
+ groupIndex = this.MediaAlbum.length - 1;
388
+ index = this.MediaAlbum[groupIndex].medias.length - 1;
411
389
  }
412
390
  }
413
391
  }
414
- item = this.MediaAlbum[groupIndex].medias[index];
415
- this.handleClick(item, groupIndex, index);
416
- },
417
-
418
- //旋转图片
419
- rotateImg(type) {
420
- var currentDeg = this.rotate || 0;
421
-
422
- if (type == "L") {
423
- currentDeg = currentDeg - 90;
424
- } else if (type == "R") {
425
- currentDeg = currentDeg + 90;
426
- }
427
- if (Math.abs(currentDeg) >= 360) {
428
- currentDeg = currentDeg % 360;
429
- }
430
- this.rotate = currentDeg;
431
- this.$forceUpdate();
432
- },
392
+ }
393
+ item = this.MediaAlbum[groupIndex].medias[index];
394
+ this.handleClick(item, groupIndex, index);
395
+ },
396
+ //旋转图片
397
+ rotateImg(type) {
398
+ var currentDeg = this.rotate || 0;
433
399
 
434
- actualSize() {
435
- this.rotate = 0;
436
- this.$refs.viewerImage.actualSize();
437
- },
438
- zoom(n) {
439
- this.$refs.viewerImage.zoom(n);
400
+ if (type == "L") {
401
+ currentDeg = currentDeg - 90;
402
+ } else if (type == "R") {
403
+ currentDeg = currentDeg + 90;
404
+ }
405
+ if (Math.abs(currentDeg) >= 360) {
406
+ currentDeg = currentDeg % 360;
440
407
  }
408
+ this.rotate = currentDeg;
409
+ this.$forceUpdate();
441
410
  },
442
- destroyed() {
443
- window.onresize = null;
411
+
412
+ actualSize() {
413
+ this.rotate = 0;
414
+ this.$refs.viewerImage.actualSize();
415
+ },
416
+ zoom(n) {
417
+ this.$refs.viewerImage.zoom(n);
444
418
  },
445
- };
419
+ closeViewerFile() {
420
+ this.$emit('closeViewerFile')
421
+ }
422
+ },
423
+ destroyed() {
424
+ window.onresize = null;
425
+ },
426
+ };
446
427
  </script>
447
428
 
448
429
  <style>
449
- body,
450
- html {
451
- height: 100%;
452
- }
430
+ body,
431
+ html {
432
+ height: 100%;
433
+ }
453
434
 
454
- #viewer-file .el-container {
455
- margin-bottom: 40px;
456
- height: 100%;
457
- }
435
+ #viewer-file .el-container {
436
+ margin-bottom: 40px;
437
+ height: 100%;
438
+ }
458
439
 
459
- .viewerContent {
460
- cursor: move;
461
- position: absolute !important;
462
- top: 0;
463
- bottom: 0;
464
- left: 0;
465
- right: 0;
466
- margin: auto;
467
- }
440
+ .viewerContent {
441
+ cursor: move;
442
+ position: absolute !important;
443
+ top: 0;
444
+ bottom: 0;
445
+ left: 0;
446
+ right: 0;
447
+ margin: auto;
448
+ }
468
449
 
469
- .magnify-footer {
470
- position: fixed;
471
- height: 50px;
472
- bottom: 0px;
473
- /* text-align: center; */
474
- color: #fff;
475
- z-index: 9;
476
- }
450
+ .magnify-footer {
451
+ position: fixed;
452
+ height: 50px;
453
+ bottom: 0px;
454
+ /* text-align: center; */
455
+ color: #fff;
456
+ z-index: 9;
457
+ }
477
458
 
478
- .magnify-toolbar {
479
- display: inline-block;
480
- background-color: rgba(0, 0, 0, 0.5);
481
- -webkit-border-radius: 5px;
482
- -moz-border-radius: 5px;
483
- border-radius: 5px;
484
- }
459
+ .magnify-toolbar {
460
+ display: inline-block;
461
+ background-color: rgba(0, 0, 0, 0.5);
462
+ -webkit-border-radius: 5px;
463
+ -moz-border-radius: 5px;
464
+ border-radius: 5px;
465
+ }
485
466
 
486
- .magnify-toolbar .magnify-btn {
487
- margin: 15px 20px;
488
- color: #999;
489
- font-size: 25px;
490
- font-weight: 800;
491
- }
467
+ .magnify-toolbar .magnify-btn {
468
+ margin: 15px 20px;
469
+ color: #999;
470
+ font-size: 25px;
471
+ font-weight: 800;
472
+ }
492
473
 
493
- .magnify-toolbar .magnify-btn:hover,
494
- .magnify-btn-close:hover {
495
- color: #fff;
496
- }
474
+ .magnify-toolbar .magnify-btn:hover,
475
+ .magnify-btn-close:hover {
476
+ color: #fff;
477
+ }
497
478
 
498
- .viewerMenu {
499
- border-right: solid 2px #e6e6e6 !important;
500
- }
479
+ .viewerMenu {
480
+ border-right: solid 2px #e6e6e6 !important;
481
+ }
501
482
 
502
- .viewerMenu .el-submenu > .el-submenu__title {
503
- display: inline !important;
504
- }
483
+ .viewerMenu .el-submenu>.el-submenu__title {
484
+ display: inline !important;
485
+ }
505
486
 
506
- .viewerMenu .el-submenu__title,
507
- .viewerMenu .el-menu-item {
508
- height: 30px !important;
509
- line-height: 30px !important;
510
- min-height: 30px !important;
511
- }
512
-
513
- .viewerMenu .el-menu-item-group__title {
514
- line-height: 1px;
515
- height: 1px;
516
- display: none;
517
- }
487
+ .viewerMenu .el-submenu__title,
488
+ .viewerMenu .el-menu-item {
489
+ height: 30px !important;
490
+ line-height: 30px !important;
491
+ min-height: 30px !important;
492
+ }
518
493
 
519
- .viewerMenu .el-submenu__title .el-submenu__icon-arrow {
520
- display: inline-block !important;
521
- }
522
- .cloading {
523
- font-size: 50px;
524
- }
494
+ .viewerMenu .el-menu-item-group__title {
495
+ line-height: 1px;
496
+ height: 1px;
497
+ display: none;
498
+ }
499
+
500
+ .viewerMenu .el-submenu__title .el-submenu__icon-arrow {
501
+ display: inline-block !important;
502
+ }
503
+
504
+ .cloading {
505
+ font-size: 50px;
506
+ }
525
507
  </style>