{{ message }},{{ $t('chart.chart_show_error') }}
@@ -18,7 +17,6 @@
@@ -132,7 +130,6 @@ export default {
})
this.chart.data && this.chart.data.sourceFields && this.chart.data.sourceFields.forEach(item => {
const sourceInfo = this.chart.id + '#' + item.id
- // console.log('nowPanelJumpInfo=>' + JSON.stringify(this.nowPanelJumpInfo))
if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++
}
@@ -140,7 +137,6 @@ export default {
jumpCount && trackMenuInfo.push('jump')
linkageCount && trackMenuInfo.push('linkage')
this.drillFields.length && trackMenuInfo.push('drill')
- // console.log('trackMenuInfo' + JSON.stringify(trackMenuInfo))
return trackMenuInfo
},
chartType() {
@@ -158,12 +154,10 @@ export default {
watch: {
'filters': function(val1, val2) {
- // this.getData(this.element.propValue.viewId)
isChange(val1, val2) && this.getData(this.element.propValue.viewId)
},
linkageFilters: {
handler(newVal, oldVal) {
- // isChange(newVal, oldVal) && this.getData(this.element.propValue.viewId)
if (isChange(newVal, oldVal)) {
this.getData(this.element.propValue.viewId)
}
@@ -173,7 +167,6 @@ export default {
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {
- // this.chart.stylePriority == panel 优先使用仪表板样式
this.mergeStyle()
},
deep: true
@@ -215,7 +208,6 @@ export default {
created() {
this.refId = uuid.v1
- // this.filter.filter = this.$store.getters.conditions
if (this.element && this.element.propValue && this.element.propValue.viewId) {
this.getData(this.element.propValue.viewId)
}
@@ -226,7 +218,6 @@ export default {
},
methods: {
mergeStyle() {
- // this.chart.stylePriority == panel 优先使用仪表板样式
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle)
@@ -235,7 +226,6 @@ export default {
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
// 组件样式-标题设置 - 标题修改为组件自己控制
- // customStyleChart.text = customStylePanel.text
// 组件样式-背景设置
customStyleChart.background = customStylePanel.background
// 图形属性-颜色设置
@@ -368,7 +358,6 @@ export default {
showClose: true
})
}
- // console.log('param=>' + JSON.stringify(param))
},
resetDrill() {
@@ -404,7 +393,6 @@ export default {
this.currentAcreaNode = tempNode
const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
- // this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
},
// 切换下一级地图
@@ -415,12 +403,10 @@ export default {
if (this.currentAcreaNode) {
aCode = this.currentAcreaNode.code
}
- // const aCode = this.currentAcreaNode ? this.currentAcreaNode.code : null
const customAttr = JSON.parse(this.chart.customAttr)
const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places)
if (currentNode && currentNode.children && currentNode.children.length > 0) {
const nextNode = currentNode.children.find(item => item.name === name)
- // this.view.customAttr.areaCode = nextNode.code
this.currentAcreaNode = nextNode
const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
@@ -439,14 +425,8 @@ export default {
}
},
initAreas() {
- // let mapping
- // if ((mapping = localStorage.getItem('areaMapping')) !== null) {
- // this.places = JSON.parse(mapping)
- // return
- // }
Object.keys(this.places).length === 0 && areaMapping().then(res => {
this.places = res.data
- // localStorage.setItem('areaMapping', JSON.stringify(res.data))
})
},
doMapLink(linkFilters) {
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index 0eac6b0498..94d807f23b 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@@ -1,3 +1,17 @@
+// 基础移动端定位样式
+export const BASE_MOBILE_STYLE = {
+ style: {
+ width: 1600,
+ height: 300,
+ borderRadius: 5
+ },
+ x: 1,
+ y: 1,
+ sizex: 6,
+ sizey: 4,
+ auxiliaryMatrix: true
+}
+
// 公共样式
export const commonStyle = {
rotate: 0,
@@ -124,6 +138,7 @@ const list = [
propValue: '双击输入文字',
icon: 'wenben',
type: 'v-text',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 100,
@@ -150,6 +165,7 @@ const list = [
propValue: '按钮',
icon: 'button',
type: 'v-button',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 100,
height: 34,
@@ -172,6 +188,7 @@ const list = [
icon: 'tupian',
type: 'Picture',
propValue: require('@/components/canvas/assets/title.jpg'),
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@@ -189,6 +206,7 @@ const list = [
icon: 'tupian',
type: 'Picture',
propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
borderStyle: 'solid',
borderWidth: 0,
@@ -204,6 +222,7 @@ const list = [
propValue: '',
icon: 'juxing',
type: 'rect-shape',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@@ -225,6 +244,7 @@ const list = [
propValue: '',
icon: 'juxing',
type: 'view',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@@ -243,6 +263,7 @@ const list = [
propValue: '',
icon: 'tabs',
type: 'de-tabs',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 200,
height: 200,
@@ -271,6 +292,7 @@ const list = [
propValue: '',
icon: 'shijian',
type: 'de-show-date',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 250,
height: 100,
@@ -307,6 +329,7 @@ const list = [
label: '图片',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 200,
@@ -324,6 +347,7 @@ const list = [
label: '',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter',
+ mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 200,
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index fdd236650b..b5bd1f942c 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -37,7 +37,21 @@ export function toTop(arr, i, j) {
export function toBottom(arr, i) {
arr.unshift(arr.splice(i, 1)[0])
- }
+}
export function $(selector) {
return document.querySelector(selector)
}
+
+export function mobile2MainCanvas(mainSource, mobileSource) {
+ mainSource.mobileSelected = true
+ mainSource.mobileStyle.style = {
+ width: mobileSource.style.width,
+ height: mobileSource.style.height,
+ left: mobileSource.style.left,
+ top: mobileSource.style.top
+ }
+ mainSource.mobileStyle.x = mobileSource.x
+ mainSource.mobileStyle.y = mobileSource.x
+ mainSource.mobileStyle.sizex = mobileSource.sizex
+ mainSource.mobileStyle.sizey = mobileSource.sizey
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7d19913c38..bd7d31d408 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -83,11 +83,13 @@ import vueToPdf from 'vue-to-pdf'
Vue.use(vueToPdf)
import VueVideoPlayer from 'vue-video-player'
-
import 'video.js/dist/video-js.css'
-
Vue.use(VueVideoPlayer)
+// 控制标签宽高成比例的指令
+import proportion from 'vue-proportion-directive'
+Vue.use(proportion)
+
Vue.prototype.hasDataPermission = function(pTarget, pSource) {
if (this.$store.state.user.user.isAdmin) {
return true
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 2cac3c4eb9..33b785240a 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -41,10 +41,19 @@ const data = {
...layer.state,
...snapshot.state,
...lock.state,
-
- editMode: 'edit', // 编辑器模式 edit preview
- canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
- componentData: [], // 画布组件数据
+ // 编辑器模式 edit preview
+ editMode: 'edit',
+ // 当前页面全局数据 包括扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
+ canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
+ // 当前展示画布缓存数据
+ componentDataCache: null,
+ // 当前展示画布组件数据
+ componentData: [],
+ // PC布局画布组件数据
+ pcComponentData: [],
+ // 移动端布局画布组件数据
+ mobileComponentData: [],
+ // 当前点击组件
curComponent: null,
curCanvasScale: null,
curComponentIndex: null,
@@ -59,17 +68,29 @@ const data = {
// 和当前组件联动的目标组件
targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息
- nowPanelTrackInfo: {}, // 当前仪表板联动 下钻 上卷等信息
-
- nowPanelJumpInfo: {}, // 当前仪表板的跳转信息基础信息
-
- nowPanelJumpInfoTargetPanel: {}, // 当前仪表板的跳转信息(只包括仪表板)
-
+ nowPanelTrackInfo: {},
+ // 当前仪表板的跳转信息基础信息
+ nowPanelJumpInfo: {},
+ // 当前仪表板的跳转信息(只包括仪表板)
+ nowPanelJumpInfoTargetPanel: {},
// 拖拽的组件信息
dragComponentInfo: null,
-
// 仪表板组件间隙大小 px
- componentGap: 5
+ componentGap: 5,
+ // 移动端布局状态
+ mobileLayoutStatus: false,
+ pcMatrixCount: {
+ x: 36,
+ y: 18
+ },
+ mobileMatrixCount: {
+ x: 6,
+ y: 12
+ },
+ mobileLayoutStyle: {
+ x: 300,
+ y: 600
+ }
},
mutations: {
...animation.mutations,
@@ -107,32 +128,18 @@ const data = {
state.styleChangeTimes = 0
state.curComponent = component
state.curComponentIndex = index
- // console.log('setCurComponent:' + JSON.stringify(component))
},
setCurCanvasScale(state, curCanvasScale) {
state.curCanvasScale = curCanvasScale
},
- // setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
- // if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
- // if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
- // if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
- // if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
- // if (rotate || rotate === 0) curComponent.style.rotate = rotate
- // // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
- // },
-
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
- // console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
- const ow = curComponent.style.width
if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
if (rotate || rotate === 0) curComponent.style.rotate = rotate
- // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
- // console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
},
setShapeSingleStyle({ curComponent }, { key, value }) {
@@ -143,6 +150,16 @@ const data = {
Vue.set(state, 'componentData', componentData)
},
+ setPcComponentData(state, pcComponentData = []) {
+ Vue.set(state, 'pcComponentData', pcComponentData)
+ },
+ setComponentDataCache(state, componentDataCache) {
+ Vue.set(state, 'componentDataCache', componentDataCache)
+ },
+
+ setMobileComponentData(state, mobileComponentData = []) {
+ Vue.set(state, 'mobileComponentData', mobileComponentData)
+ },
addComponent(state, { component, index }) {
if (index !== undefined) {
state.componentData.splice(index, 0, component)
@@ -305,6 +322,9 @@ const data = {
bus.$emit('onRemoveLastItem')
}
state.dragComponentInfo = null
+ },
+ setMobileLayoutStatus(state, status) {
+ state.mobileLayoutStatus = status
}
},
modules: {
diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html
index c0cd14e760..f9b2d29b31 100644
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
@@ -54,6 +54,12 @@
+ -
+
+
移动端
+ 
+
+
-
video
@@ -462,9 +468,9 @@
@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1636358286475') format('woff2'),
- url('iconfont.woff?t=1636358286475') format('woff'),
- url('iconfont.ttf?t=1636358286475') format('truetype');
+ src: url('iconfont.woff2?t=1636516993563') format('woff2'),
+ url('iconfont.woff?t=1636516993563') format('woff'),
+ url('iconfont.ttf?t=1636516993563') format('truetype');
}
第二步：定义使用 iconfont 的样式
@@ -490,6 +496,15 @@
+ -
+
+
+ 移动端
+
+ .icon-yidongduan
+
+
+
-
@@ -1102,6 +1117,14 @@
+ -
+
+
移动端
+ #icon-yidongduan
+
+
-