center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: eslint fix

Browse Source
This commit is contained in:
dataeaseShu 2022-10-11 15:09:32 +08:00
parent e96fd41768
commit 79f75b4590
438 changed files with 21388 additions and 7842 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.husky/pre-commit Executable file
View File

@ -0,0 +1,5 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
cd ./frontend
npm run lint-staged

3
frontend/.eslintignore
View File

@ -1,4 +1,7 @@
build/*.js
src/assets
src/styles/deicon/iconfont.js
src/components/canvas/assets/iconfont/iconfont.js
public
dist
node_modules

12
frontend/.eslintrc.js
View File

@ -14,16 +14,12 @@ module.exports = {
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-mutating-props": "off",
"vue/multi-word-component-names": "off",
"vue/require-default-prop": "off",
// "vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {

27
frontend/package.json
View File

@ -10,9 +10,19 @@
"build:stage": "vue-cli-service build --mode staging",
"dll": "webpack -p --progress --config ./webpack.dll.conf.js",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"lint": "eslint --ext .js,.vue src --fix",
"lint-staged": "lint-staged",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
},
"lint-staged": {
"src/**/*.js": "eslint --ext .js",
"src/**/*.vue": "eslint --ext .vue"
},
"dependencies": {
"@antv/g2plot": "^2.4.9",
"@antv/l7-maps": "^2.8.35",
@ -74,17 +84,24 @@
"@babel/plugin-proposal-optional-chaining": "^7.18.6",
"@babel/register": "7.0.0",
"@vue/cli-plugin-babel": "3.6.0",
"@vue/cli-plugin-eslint": "^3.9.1",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-service": "^3.3.1",
"add-asset-html-webpack-plugin": "^3.1.3",
"babel-eslint": "^8.2.2",
"babel-eslint": "^10.1.0",
"chalk": "2.4.2",
"clean-webpack-plugin": "^1.0.1",
"connect": "3.6.6",
"copy-webpack-plugin": "^4.6.0",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^9.1.0",
"html-webpack-plugin": "3.2.0",
"husky": "^8.0.1",
"less": "^3.0.0",
"less-loader": "^5.0.0",
"lint-staged": "^13.0.1",
"mockjs": "1.0.1-beta3",
"runjs": "^4.1.3",
"sass": "^1.33.0",

10
frontend/src/App.vue
View File

@ -1,7 +1,11 @@
<template>
<div id="app">
<router-view/>
<plugin-com v-show="false" ref="de-theme" component-name="ThemeSetting"/>
<router-view />
<plugin-com
v-show="false"
ref="de-theme"
component-name="ThemeSetting"
/>
</div>
</template>
@ -10,7 +14,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
export default {
name: 'App',
components: {PluginCom},
components: { PluginCom },
beforeCreate() {
}

2
frontend/src/api/dataset/dataset.js
View File

@ -246,7 +246,7 @@ export function exportExcel(data) {
export function dsTable(page, size, id) {
return request({
url: '/datasource/getTables/' + id + '/' + page + '/' + size,
method: 'post',
method: 'post'
})
}
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, checkCustomDs }

7
frontend/src/api/panel/panel.js
View File

@ -293,18 +293,17 @@ export function removePanelCache(panelId) {
})
}
export function findPanelElementInfo(viewId) {
return request({
url: 'panel/group/findPanelElementInfo/'+viewId,
url: 'panel/group/findPanelElementInfo/' + viewId,
method: 'get',
loading: false
})
}
export function export2AppCheck(panelId){
export function export2AppCheck(panelId) {
return request({
url: 'panel/group/export2AppCheck/'+panelId,
url: 'panel/group/export2AppCheck/' + panelId,
method: 'get',
loading: false
})

2
frontend/src/api/system/datasource.js
View File

@ -152,7 +152,7 @@ export function getDatasourceDetail(id) {
return request({
url: `/datasource/get/${id}`,
loading: true,
method: 'post',
method: 'post'
})
}
export default { getDatasourceDetail, dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }

4
frontend/src/api/system/engine.js
View File

@ -1,5 +1,4 @@
import request from '@/utils/request'
import { validateDs } from '@/api/system/datasource'
export function engineMode() {
return request({
@ -35,7 +34,6 @@ export function save(data) {
})
}
export function dbPreview(data) {
return request({
url: '/dataset/table/dbPreview',
@ -43,4 +41,4 @@ export function dbPreview(data) {
loading: true,
data
})
}
}

1
frontend/src/api/system/kettle.js
View File

@ -1,5 +1,4 @@
import request from '@/utils/request'
import { validateDs } from '@/api/system/datasource'
export function validate(data) {
return request({

BIN
frontend/src/assets/DataEase-0.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
frontend/src/assets/DataEase-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 88 KiB

BIN
frontend/src/assets/DataEase-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 KiB

BIN
frontend/src/assets/DataEase-3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 85 KiB

BIN
frontend/src/assets/DataEase-4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
frontend/src/assets/DataEase-5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 125 KiB

151
frontend/src/assets/blue_1.svg
View File

@ -1,151 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none meet"
viewBox="0 0 454.2 286.6" style="enable-background:new 0 0 454.2 286.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0B101E;}
.st1{opacity:0.1;fill:#006CE2;}
.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
.st3{fill:#31ECFF;}
.st4{opacity:0.75;fill:#31ECFF;}
.st5{opacity:0.5;fill:#31ECFF;}
.st6{opacity:0.25;fill:#31ECFF;}
.st7{opacity:0.25;fill:#006CE2;}
</style>
<rect x="2743.8" y="-1694.6" class="st0" width="1920" height="1080"/>
<g>
<polygon class="st1" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 "/>
<polygon class="st1" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 "/>
<polygon class="st2" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 "/>
<polygon class="st2" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 "/>
<g>
<rect x="52.2" y="-474.1" class="st3" width="12" height="2.4"/>
<rect x="57" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -414.7073 -540.6516)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="-394.8" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -866.4924 -88.8664)" class="st3" width="12" height="2.4"/>
<rect x="-390" y="-474.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -768.0378 -945.7705)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="56.6" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 814.0578 -688.874)" class="st3" width="12" height="2.4"/>
<rect x="51.8" y="-757.4" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="-389.7" y="-757.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -767.3794 -1512.5201)" class="st3" width="12" height="2.4"/>
<rect x="-394.5" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 362.9821 -1139.9497)" class="st3" width="12" height="2.4"/>
</g>
</g>
<g>
<polygon class="st1" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 "/>
<polygon class="st2" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 "/>
<polyline class="st2" points="-367.2,-1419 63.9,-1419 84.6,-1434.2 "/>
<polygon class="st3" points="20,-1421.6 12,-1421.6 24.3,-1431.5 32.3,-1431.5 "/>
<polygon class="st4" points="34.1,-1421.6 26.1,-1421.6 38.4,-1431.5 46.4,-1431.5 "/>
<polygon class="st5" points="48.2,-1421.6 40.2,-1421.6 52.5,-1431.5 60.5,-1431.5 "/>
<polygon class="st6" points="62.3,-1421.6 54.3,-1421.6 66.6,-1431.5 74.6,-1431.5 "/>
<polygon class="st3" points="-367.5,-1450.9 -367.5,-1463 -355.9,-1463 "/>
</g>
<g>
<polygon class="st1" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 "/>
<polygon class="st2" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 "/>
<g>
<rect x="4.9" y="-845.7" class="st3" width="12" height="2.4"/>
<rect x="9.7" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -833.7073 -864.9849)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="-442.1" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -1285.4924 -413.1997)" class="st3" width="12" height="2.4"/>
<rect x="-437.3" y="-845.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.7045 -1689.1039)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="-437" y="-1129.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.0461 -2255.8535)" class="st3" width="12" height="2.4"/>
<rect x="-441.8" y="-1124.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 687.3154 -1558.9497)" class="st3" width="12" height="2.4"/>
</g>
<polygon class="st3" points="-54.9,-1114.3 -76.3,-1114.3 -89.6,-1124.2 -68.2,-1124.2 "/>
<polygon class="st4" points="-28.8,-1114.3 -47.5,-1114.3 -60.8,-1124.2 -42.1,-1124.2 "/>
<polygon class="st5" points="-5.4,-1114.3 -21.4,-1114.3 -34.7,-1124.2 -18.7,-1124.2 "/>
<polygon class="st6" points="15.4,-1114.3 2,-1114.3 -11.2,-1124.2 15.4,-1124.2 "/>
<rect x="-436.1" y="-1081.9" class="st3" width="451.8" height="1.8"/>
</g>
<g>
<polygon class="st1" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 "/>
<polygon class="st2" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 "/>
<polyline class="st2" points="1731,-1308.7 2162.1,-1308.7 2182.7,-1323.9 "/>
<polygon class="st3" points="2118.2,-1311.3 2110.2,-1311.3 2122.5,-1321.3 2130.5,-1321.3 "/>
<polygon class="st4" points="2132.3,-1311.3 2124.3,-1311.3 2136.6,-1321.3 2144.6,-1321.3 "/>
<polygon class="st5" points="2146.4,-1311.3 2138.4,-1311.3 2150.7,-1321.3 2158.7,-1321.3 "/>
<polygon class="st6" points="2160.5,-1311.3 2152.4,-1311.3 2164.8,-1321.3 2172.8,-1321.3 "/>
<polygon class="st3" points="1730.7,-1340.6 1730.7,-1352.8 1742.3,-1352.8 "/>
</g>
<g>
<polygon class="st1" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 "/>
<polygon class="st2" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 "/>
<g>
<rect x="2171.8" y="-751.8" class="st3" width="12" height="2.4"/>
<rect x="2176.6" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1427.1624 -2938.0291)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="1724.8" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 975.3772 -2486.2439)" class="st3" width="12" height="2.4"/>
<rect x="1729.6" y="-751.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.2095 -1501.2784)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="1730" y="-1035.2" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.8679 -2068.0281)" class="st3" width="12" height="2.4"/>
<rect x="1725.2" y="-1030.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 2760.3596 701.9199)" class="st3" width="12" height="2.4"/>
</g>
<polygon class="st3" points="2112,-1020.3 2090.6,-1020.3 2077.4,-1030.3 2098.7,-1030.3 "/>
<polygon class="st4" points="2138.1,-1020.3 2119.4,-1020.3 2106.2,-1030.3 2124.9,-1030.3 "/>
<polygon class="st5" points="2161.6,-1020.3 2145.5,-1020.3 2132.3,-1030.3 2148.3,-1030.3 "/>
<polygon class="st6" points="2182.3,-1020.3 2169,-1020.3 2155.7,-1030.3 2182.3,-1030.3 "/>
<rect x="1730.8" y="-988" class="st3" width="451.8" height="1.8"/>
</g>
<g>
<polygon class="st1" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 "/>
<polygon class="st2" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 "/>
<g>
<rect x="1671.7" y="-751.9" class="st3" width="12" height="2.4"/>
<rect x="1676.5" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 926.9837 -2438.0081)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="844.3" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 94.7936 -1605.818)" class="st3" width="12" height="2.4"/>
<rect x="849.1" y="-751.9" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.2 -1501.436)" class="st3" width="12" height="2.4"/>
</g>
<g>
<rect x="849.4" y="-1035.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.8583 -2068.1858)" class="st3" width="12" height="2.4"/>
<rect x="844.7" y="-1030.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 1879.9337 -178.6637)" class="st3" width="12" height="2.4"/>
</g>
<polygon class="st3" points="1611.9,-1020.4 1590.5,-1020.4 1577.3,-1030.4 1598.6,-1030.4 "/>
<polygon class="st4" points="1638,-1020.4 1619.3,-1020.4 1606.1,-1030.4 1624.8,-1030.4 "/>
<polygon class="st5" points="1661.5,-1020.4 1645.4,-1020.4 1632.2,-1030.4 1648.2,-1030.4 "/>
<polygon class="st6" points="1682.2,-1020.4 1668.9,-1020.4 1655.6,-1030.4 1682.2,-1030.4 "/>
<rect x="850.2" y="-988.1" class="st3" width="832.3" height="1.8"/>
</g>
<g>
<polygon class="st1" points="444.4,285.1 2.4,285.1 2.4,11.8 12.1,1.6 454.2,1.6 454.2,275 "/>
<polygon class="st3" points="414.3,3.2 194.9,3.2 191.7,0 417.3,0 "/>
<polyline class="st2" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.3,1.6 12.4,1.6 2.4,11.9 2.4,18.5 "/>
<rect x="25.5" y="283.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 314.9124 570.0419)" class="st3" width="263.9" height="3.2"/>
<polyline class="st2" points="2.4,249.9 2.4,285 444.2,285 454.2,274.7 454.2,268.2 "/>
<polygon class="st7" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.2,1.6 12.1,1.6 2.4,11.8 2.4,50 "/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

11
frontend/src/components/AssistButton/ColorButton.vue
View File

@ -1,7 +1,14 @@
<template>
<div class="color-button-main">
<div class="color-button-outer" :class="active?'color-button-active':''" @click.stop="colorButtonClick">
<div class="color-button-inner" :class="'color-button-inner-'+colorType" />
<div
class="color-button-outer"
:class="active?'color-button-active':''"
@click.stop="colorButtonClick"
>
<div
class="color-button-inner"
:class="'color-button-inner-'+colorType"
/>
</div>
<span class="text-area">
<slot />

2
frontend/src/components/AsyncSoltComponent/index.vue
View File

@ -5,7 +5,7 @@
v-bind="$attrs"
v-on="$listeners"
>
<template v-slot:default>
<template #default>
<slot name="default" />
</template>
</component>

20
frontend/src/components/Breadcrumb/index.vue
View File

@ -1,10 +1,22 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<el-breadcrumb
class="app-breadcrumb"
separator="/"
>
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<el-breadcrumb-item
v-for="(item,index) in levelList"
:key="item.path"
>
<span v-if="index === 0">当前位置：</span>
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<span
v-if="item.redirect==='noRedirect'||index==levelList.length-1"
class="no-redirect"
>{{ item.meta.title }}</span>
<a
v-else
@click.prevent="handleLink(item)"
>{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>

5
frontend/src/components/DeDrag/MoveInShadow.vue
View File

@ -1,5 +1,8 @@
<template>
<div style="z-index:-1" :style="style" />
<div
style="z-index:-1"
:style="style"
/>
</template>
<script>

23
frontend/src/components/DeDrag/index.vue
View File

@ -44,7 +44,11 @@
@boardSet="boardSet"
@fieldSelect="fieldSelect"
/>
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
<mobile-check-bar
v-if="mobileCheckBarShow"
:element="element"
@amRemoveItem="amRemoveItem"
/>
<div
v-if="resizing"
style="transform: translateZ(11px);position: absolute; z-index: 3"
@ -60,8 +64,17 @@
>
<slot :name="handlei" />
</div>
<div :id="componentCanvasId" :style="mainSlotStyleInner" class="main-background">
<svg-icon v-if="svgInnerEnable" :style="{'color':this.element.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
<div
:id="componentCanvasId"
:style="mainSlotStyleInner"
class="main-background"
>
<svg-icon
v-if="svgInnerEnable"
:style="{'color':element.commonBackground.innerImageColor}"
class="svg-background"
:icon-class="mainSlotSvgInner"
/>
<slot />
</div>
</div>
@ -81,7 +94,7 @@ import { mapState } from 'vuex'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import {imgUrlTrans} from "@/components/canvas/utils/utils";
import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
replace: true,
@ -819,7 +832,7 @@ export default {
this.mobileLayoutStatus && this.$store.commit('topComponent')
eventsFor = events.mouse
this.elementDown(e)
this.$nextTick(()=>{
this.$nextTick(() => {
this.$store.commit('setCurComponent', { component: this.element, index: this.index })
})
},

8
frontend/src/components/DeDrag/shadow.vue
View File

@ -1,12 +1,16 @@
<template>
<div class="main-shadow" style="z-index:-1" :style="styleInfo" />
<div
class="main-shadow"
style="z-index:-1"
:style="styleInfo"
/>
</template>
<script>
import { mapState } from 'vuex'
export default {
replace: true,
name: 'Shadow',
name: 'ShadowDe',
computed: {
styleInfo() {
let left = 0

30
frontend/src/components/DeViewSelect/index.bak.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="el-view-select" :class="selectClass">
<div
class="el-view-select"
:class="selectClass"
>
<el-select
ref="select"
v-model="innerValues"
@ -20,8 +23,22 @@
/>
</el-select>
<el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
<el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
<el-popover
ref="popover"
v-model="visible"
:placement="placement"
:transition="transition"
:popper-class="popperClass"
:width="width"
trigger="click"
>
<el-scrollbar
v-if="viewLoaded"
tag="div"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
class="is-empty"
>
<div :style="{'height': panelHeight + 'px'}">
<Preview
:component-data="componentData"
@ -32,7 +49,12 @@
</div>
</el-scrollbar>
<el-empty v-else style="height: 150px;" :image-size="120" description="" />
<el-empty
v-else
style="height: 150px;"
:image-size="120"
description=""
/>
</el-popover>
</div>

27
frontend/src/components/DeViewSelect/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="el-view-select" :class="selectClass">
<div
class="el-view-select"
:class="selectClass"
>
<el-select
ref="select"
v-model="innerValues"
@ -25,7 +28,11 @@
class="dialog-css"
:fullscreen="true"
>
<div v-if="dialogShow && viewLoaded" ref="contaninerDiv" :style="{'height': panelHeight + 'px'}">
<div
v-if="dialogShow && viewLoaded"
ref="contaninerDiv"
:style="{'height': panelHeight + 'px'}"
>
<Preview
:component-data="componentData"
:canvas-style-data="canvasStyleData"
@ -34,13 +41,23 @@
/>
</div>
<div slot="title" class="dialog-footer title-text">
<div
slot="title"
class="dialog-footer title-text"
>
<span style="font-size: 14px;">
选择视图
</span>
<span style="float: right;">
<el-button type="primary" size="mini" @click="sureDialog()">{{ $t('commons.confirm') }}</el-button>
<el-button size="mini" @click="cancelDialog()">{{ $t('commons.cancel') }}</el-button>
<el-button
type="primary"
size="mini"
@click="sureDialog()"
>{{ $t('commons.confirm') }}</el-button>
<el-button
size="mini"
@click="cancelDialog()"
>{{ $t('commons.cancel') }}</el-button>
</span>
</div>
</el-dialog>

5
frontend/src/components/Doc/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<svg-icon icon-class="doc" @click="click" />
<svg-icon
icon-class="doc"
@click="click"
/>
</div>
</template>

35
frontend/src/components/DragItem/index.vue
View File

@ -1,12 +1,23 @@
<template>
<span>
<el-dropdown trigger="click" size="mini" @command="clickItem">
<el-dropdown
trigger="click"
size="mini"
@command="clickItem"
>
<span class="el-dropdown-link">
<el-tag size="small" class="item-axis">
<el-tag
size="small"
class="item-axis"
>
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
</el-tag>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('none')">
<el-dropdown-item
v-if="isSortWidget"
:disabled="disabledSort"
:command="beforeClickItem('none')"
>
<span
class="de-sort-menu"
:class="!disabledSort && (!sortNode || sortNode.sort === 'none') ? 'de-active-li': ''"
@ -14,7 +25,11 @@
$t('chart.none')
}}</span>
</el-dropdown-item>
<el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('asc')">
<el-dropdown-item
v-if="isSortWidget"
:disabled="disabledSort"
:command="beforeClickItem('asc')"
>
<span
v-popover:popoverasc
class="el-dropdown-link inner-dropdown-menu de-sort-menu"
@ -47,7 +62,11 @@
</ul>
</el-popover>
</el-dropdown-item>
<el-dropdown-item v-if="isSortWidget" :disabled="disabledSort" :command="beforeClickItem('desc')">
<el-dropdown-item
v-if="isSortWidget"
:disabled="disabledSort"
:command="beforeClickItem('desc')"
>
<span
v-popover:popoverdesc
class="el-dropdown-link inner-dropdown-menu de-sort-menu"
@ -80,7 +99,11 @@
</ul>
</el-popover>
</el-dropdown-item>
<el-dropdown-item :divided="isSortWidget" icon="el-icon-delete" :command="beforeClickItem('remove')">
<el-dropdown-item
:divided="isSortWidget"
icon="el-icon-delete"
:command="beforeClickItem('remove')"
>
<span class="de-delete-field">{{ $t('chart.delete') }}</span>
</el-dropdown-item>
<slot />

53
frontend/src/components/ElTreeSelect/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="el-tree-select" :class="selectClass">
<div
class="el-tree-select"
:class="selectClass"
>
<el-select
:id="'el-tree-select-' + guid"
ref="select"
@ -20,12 +23,45 @@
@clear="_selectClearFun"
@focus="_popoverShowFun"
/>
<el-popover ref="popover" v-model="visible" :append-to-body="popperAppendToBody" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click" @show="showPopover">
<el-input v-if="treeParams.filterable" ref="input" v-model="keywords" size="mini" class="input-with-select mb10">
<el-button slot="append" icon="el-icon-search" @click="_searchFun" />
<el-popover
ref="popover"
v-model="visible"
:append-to-body="popperAppendToBody"
:placement="placement"
:transition="transition"
:popper-class="popperClass"
:width="width"
trigger="click"
@show="showPopover"
>
<el-input
v-if="treeParams.filterable"
ref="input"
v-model="keywords"
size="mini"
class="input-with-select mb10"
>
<el-button
slot="append"
icon="el-icon-search"
@click="_searchFun"
/>
</el-input>
<p v-if="selectParams.multiple" class="tree-select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
<el-scrollbar tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
<p
v-if="selectParams.multiple"
class="tree-select-all"
><el-checkbox
v-model="selectAll"
v-customStyle="customStyle"
:indeterminate="isIndeterminate"
@change="selectAllChane"
>{{ $t('dataset.check_all') }}</el-checkbox></p>
<el-scrollbar
tag="div"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
class="is-empty"
>
<el-tree
v-show="data.length > 0"
ref="tree"
@ -42,7 +78,10 @@
@check="_treeCheckFun"
@check-change="_treeCheckChange"
/>
<div v-if="data.length === 0" class="no-data">暂无数据</div>
<div
v-if="data.length === 0"
class="no-data"
>暂无数据</div>
</el-scrollbar>
</el-popover>
</div>

18
frontend/src/components/ElVisualSelect/index.vue
View File

@ -12,8 +12,22 @@
@change="visualChange"
@visible-change="popChange"
>
<p v-if="startIndex === 0 && $attrs.multiple" class="select-all"><el-checkbox v-model="selectAll" v-customStyle="customStyle" :indeterminate="isIndeterminate" @change="selectAllChane">{{ $t('dataset.check_all') }}</el-checkbox></p>
<el-option v-for="item in options" :key="item.id" :label="item.text" :value="item.id" :class="setSelect(item.id)" />
<p
v-if="startIndex === 0 && $attrs.multiple"
class="select-all"
><el-checkbox
v-model="selectAll"
v-customStyle="customStyle"
:indeterminate="isIndeterminate"
@change="selectAllChane"
>{{ $t('dataset.check_all') }}</el-checkbox></p>
<el-option
v-for="item in options"
:key="item.id"
:label="item.text"
:value="item.id"
:class="setSelect(item.id)"
/>
</el-select>
</template>

8
frontend/src/components/GridButton/index.vue
View File

@ -1,6 +1,12 @@
<template>
<el-tooltip :content="tooltip">
<el-button circle class="fu-search-bar-button" :type="type" :size="size" @click="click">
<el-button
circle
class="fu-search-bar-button"
:type="type"
:size="size"
@click="click"
>
<slot>
<i :class="icon" />
</slot>

5
frontend/src/components/Hamburger/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div style="padding: 0 15px;" @click="toggleClick">
<div
style="padding: 0 15px;"
@click="toggleClick"
>
<svg
:class="{'is-active':isActive}"
class="hamburger"

25
frontend/src/components/IconSelect/index.vue
View File

@ -1,12 +1,29 @@
<!-- @author zhengjie -->
<template>
<div class="icon-body">
<el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
<i slot="suffix" class="el-icon-search el-input__icon" />
<el-input
v-model="name"
style="position: relative;"
clearable
placeholder="请输入图标名称"
@clear="filterIcons"
@input.native="filterIcons"
>
<i
slot="suffix"
class="el-icon-search el-input__icon"
/>
</el-input>
<div class="icon-list">
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
<div
v-for="(item, index) in iconList"
:key="index"
@click="selectedIcon(item)"
>
<svg-icon
:icon-class="item"
style="height: 30px;width: 16px;"
/>
<span>{{ item }}</span>
</div>
</div>

28
frontend/src/components/LangSelect/index.vue
View File

@ -1,16 +1,34 @@
<template>
<el-dropdown style="display: flex;align-items: center;" trigger="click" class="international" @command="handleSetLanguage">
<el-dropdown
style="display: flex;align-items: center;"
trigger="click"
class="international"
@command="handleSetLanguage"
>
<div>
<svg-icon style="color: var(--TextPrimary)" class-name="international-icon" icon-class="language" />
<svg-icon
style="color: var(--TextPrimary)"
class-name="international-icon"
icon-class="language"
/>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
<el-dropdown-item
:disabled="language==='zh_CN'"
command="zh_CN"
>
简体中文
</el-dropdown-item>
<el-dropdown-item :disabled="language==='zh_TW'" command="zh_TW">
<el-dropdown-item
:disabled="language==='zh_TW'"
command="zh_TW"
>
繁体中文
</el-dropdown-item>
<el-dropdown-item :disabled="language==='en_US'" command="en_US">
<el-dropdown-item
:disabled="language==='en_US'"
command="en_US"
>
English
</el-dropdown-item>
<!-- <el-dropdown-item :disabled="language==='es'" command="es">

43
frontend/src/components/Notification/index.vue
View File

@ -13,8 +13,15 @@
<div style="float: left;font-size:16px;font-weight:bold;">
<span>{{ $t('webmsg.web_msg') }}</span>
</div>
<div v-if="showSetting" style="float: right;">
<a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
<div
v-if="showSetting"
style="float: right;"
>
<a
href="#"
style="text-detext-decoratext-decoration:none;cursor:point;"
@click="msgSetting"
>消息规则</a>
</div>
</div>
@ -26,10 +33,16 @@
:highlight-current-row="true"
style="width: 100%"
>
<el-table-column prop="content" :label="$t('commons.name')">
<el-table-column
prop="content"
:label="$t('commons.name')"
>
<template slot-scope="scope">
<div class="start-item">
<div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
<div
class="filter-db-row star-item-content"
@click="showDetail(scope.row)"
>
<!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
<div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
<div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
@ -41,15 +54,29 @@
</template>
</el-table-column>
</el-table>
<div class="msg-foot-class" @click="showMore">
<el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
<div
class="msg-foot-class"
@click="showMore"
>
<el-row
style="padding: 5px 0;margin-bottom: -5px;cursor:point;"
@click="showMore"
>
<span>{{ $t('webmsg.show_more') }}</span>
</el-row>
</div>
</div>
<div slot="reference">
<el-badge :value="visible && !loading ? paginationConfig.total : count" :hidden="!count && !paginationConfig.total" :max="99" class="item">
<svg-icon class-name="notification" icon-class="notification" />
<el-badge
:value="visible && !loading ? paginationConfig.total : count"
:hidden="!count && !paginationConfig.total"
:max="99"
class="item"
>
<svg-icon
class-name="notification"
icon-class="notification"
/>
</el-badge>
</div></el-popover>

5
frontend/src/components/Pagination/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<div
:class="{'hidden':hidden}"
class="pagination-container"
>
<el-pagination
:background="background"
:current-page.sync="currentPage"

5
frontend/src/components/Screenfull/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
<svg-icon
:icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
@click="click"
/>
</div>
</template>

17
frontend/src/components/SizeSelect/index.vue
View File

@ -1,10 +1,21 @@
<template>
<el-dropdown trigger="click" @command="handleSetSize">
<el-dropdown
trigger="click"
@command="handleSetSize"
>
<div>
<svg-icon class-name="size-icon" icon-class="size" />
<svg-icon
class-name="size-icon"
icon-class="size"
/>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
<el-dropdown-item
v-for="item of sizeOptions"
:key="item.value"
:disabled="size===item.value"
:command="item.value"
>
{{
item.label }}
</el-dropdown-item>

14
frontend/src/components/SvgIcon/index.vue
View File

@ -1,6 +1,16 @@
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg
v-else
:class="svgClass"
aria-hidden="true"
v-on="$listeners"
>
<use :href="iconName" />
</svg>
</template>

10
frontend/src/components/TreeSelector/index.vue
View File

@ -7,12 +7,18 @@
highlight-current
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" :class="treeClass(data,node)">
<span
slot-scope="{ node, data }"
:class="treeClass(data,node)"
>
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<svg-icon icon-class="scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
<span
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
:title="data.name"
>{{ data.name }}</span>
</span>
</span>
</el-tree>

5
frontend/src/components/back-button/index.vue
View File

@ -1,5 +1,8 @@
<template>
<i class="el-icon-arrow-left back-button" @click="jump" />
<i
class="el-icon-arrow-left back-button"
@click="jump"
/>
</template>
<script>

14
frontend/src/components/business/DeLayoutContent.vue
View File

@ -1,10 +1,18 @@
<template>
<div class="layout-container">
<p class="route-title">
<back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
<back-button
v-if="showBack"
:path="backPath"
:name="backName"
:to="backTo"
/>
<span>{{ routeTitle }}</span>
</p>
<div class="container-wrapper" :class="[needInnerPadding ? 'layout-inner-padding' : '']">
<div
class="container-wrapper"
:class="[needInnerPadding ? 'layout-inner-padding' : '']"
>
<slot />
</div>
</div>
@ -34,7 +42,7 @@ export default {
return backPath || backName || backTo
},
needInnerPadding() {
return ['sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', "sys-task-dataset", "sys-msg-web-all", "system-plugin"].includes(this.$route.name)
return ['sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', 'sys-task-dataset', 'sys-msg-web-all', 'system-plugin'].includes(this.$route.name)
}
}
}

15
frontend/src/components/business/ElSelectAll/index.vue
View File

@ -1,6 +1,17 @@
<template>
<el-select v-model="selected" multiple v-bind="$attrsAll" v-on="$listenserAll" @change="onChange">
<el-option v-for="item in mdoptionsList" :key="item.key" :label="item.label" :value="item.value" />
<el-select
v-model="selected"
multiple
v-bind="$attrsAll"
v-on="$listenserAll"
@change="onChange"
>
<el-option
v-for="item in mdoptionsList"
:key="item.key"
:label="item.label"
:value="item.value"
/>
<slot name="default" />
</el-select>
</template>

17
frontend/src/components/business/LayoutContent.vue
View File

@ -1,12 +1,23 @@
<template>
<div class="content-container">
<div v-if="$slots.header || header" class="content-container__header">
<div
v-if="$slots.header || header"
class="content-container__header"
>
<slot name="header">
<back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
<back-button
v-if="showBack"
:path="backPath"
:name="backName"
:to="backTo"
/>
{{ header }}
</slot>
</div>
<div v-if="$slots.toolbar" class="content-container__toolbar">
<div
v-if="$slots.toolbar"
class="content-container__toolbar"
>
<slot name="toolbar" />
</div>
<slot />

33
frontend/src/components/business/complex-table/index.vue
View File

@ -1,30 +1,51 @@
<template>
<div class="complex-table">
<div v-if="$slots.header || header" class="complex-table__header">
<div
v-if="$slots.header || header"
class="complex-table__header"
>
<slot name="header">{{ header }}</slot>
</div>
<div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
<div
v-if="$slots.toolbar || searchConfig"
class="complex-table__toolbar"
>
<div>
<slot name="toolbar" />
</div>
<fu-search-bar ref="search" v-bind="searchConfig" @exec="search">
<fu-search-bar
ref="search"
v-bind="searchConfig"
@exec="search"
>
<template #complex>
<slot name="complex" />
</template>
<slot name="buttons" />
<fu-table-column-select v-if="!hideColumns" :columns="columns" />
<fu-table-column-select
v-if="!hideColumns"
:columns="columns"
/>
</fu-search-bar>
</div>
<div class="complex-table__body">
<fu-table v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
<fu-table
v-bind="$attrs"
:columns="columns"
:local-key="localKey"
v-on="$listeners"
>
<slot />
</fu-table>
</div>
<div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
<div
v-if="$slots.pagination || paginationConfig"
class="complex-table__pagination"
>
<slot name="pagination">
<fu-table-pagination
:current-page.sync="paginationConfig.currentPage"

14
frontend/src/components/business/condition-table/DeComplexInput.vue
View File

@ -1,6 +1,16 @@
<template>
<de-complex-operator v-model="operator" :label="label" :operators="operators" :size="configSize">
<el-input v-model="value" :placeholder="$t('fu.search_bar.please_input')" :size="configSize" v-bind="$attrs" />
<de-complex-operator
v-model="operator"
:label="label"
:operators="operators"
:size="configSize"
>
<el-input
v-model="value"
:placeholder="$t('fu.search_bar.please_input')"
:size="configSize"
v-bind="$attrs"
/>
</de-complex-operator>
</template>

7
frontend/src/components/business/condition-table/DeComplexOperator.vue
View File

@ -13,7 +13,12 @@
@change="change"
@input="change"
>
<el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value" />
<el-option
v-for="o in operators"
:key="o.value"
:label="$t(o.label)"
:value="o.value"
/>
</el-select>
</div>
<div class="fu-operator-component__value">

15
frontend/src/components/business/condition-table/DeComplexSelect.vue
View File

@ -1,5 +1,11 @@
<template>
<de-complex-operator v-model="operator" :label="label" :operators="operators" :size="configSize" disabled>
<de-complex-operator
v-model="operator"
:label="label"
:operators="operators"
:size="configSize"
disabled
>
<el-select
v-model="value"
class="fu-complex-select"
@ -8,7 +14,12 @@
clearable
v-bind="$attrs"
>
<el-option v-for="o in options" :key="o.value" :label="o.label" :value="o.value" />
<el-option
v-for="o in options"
:key="o.value"
:label="o.label"
:value="o.value"
/>
</el-select>
</de-complex-operator>
</template>

6
frontend/src/components/business/condition-table/index.vue
View File

@ -7,9 +7,9 @@
:options="options"
:load-options="loadData"
style="width: 200px"
:noChildrenText="$t('commons.treeselect.no_children_text')"
:noOptionsText="$t('commons.treeselect.no_options_text')"
:noResultsText="$t('commons.treeselect.no_results_text')"
:no-children-text="$t('commons.treeselect.no_children_text')"
:no-options-text="$t('commons.treeselect.no_options_text')"
:no-results-text="$t('commons.treeselect.no_results_text')"
/>
</div>
</template>

20
frontend/src/components/business/tree-table/index.vue
View File

@ -1,10 +1,16 @@
<template>
<div class="complex-table">
<div v-if="$slots.header || header" class="complex-table__header">
<div
v-if="$slots.header || header"
class="complex-table__header"
>
<slot name="header">{{ header }}</slot>
</div>
<div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
<div
v-if="$slots.toolbar || searchConfig"
class="complex-table__toolbar"
>
<!-- <slot name="toolbar">
<fu-search-bar v-bind="searchConfig" @exec="search">
<slot name="buttons" />
@ -14,7 +20,10 @@
<div>
<slot name="toolbar" />
</div>
<fu-search-bar v-bind="searchConfig" @exec="search">
<fu-search-bar
v-bind="searchConfig"
@exec="search"
>
<template #complex>
<slot name="complex" />
</template>
@ -30,7 +39,10 @@
</fu-table> -->
</div>
<div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
<div
v-if="$slots.pagination || paginationConfig"
class="complex-table__pagination"
>
<slot name="pagination">
<fu-table-pagination
:current-page.sync="paginationConfig.currentPage"

7
frontend/src/components/canvas/components/AnimationList.vue
View File

@ -18,7 +18,12 @@
<!-- 选择动画 -->
<Modal v-model="isShowAnimation">
<el-tabs v-model="animationActiveName">
<el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
<el-tab-pane
v-for="item in animationClassData"
:key="item.label"
:label="item.label"
:name="item.label"
>
<el-scrollbar class="animate-container">
<div
v-for="(animate, index) in item.children"

42
frontend/src/components/canvas/components/AttrList.vue
View File

@ -2,11 +2,27 @@
<template>
<div class="attr-list">
<el-form>
<el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]">
<el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
<el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
<el-form-item
v-for="(key, index) in styleKeys.filter(item => item != 'rotate')"
:key="index"
:label="map[key]"
>
<el-color-picker
v-if="key == 'borderColor'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'color'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'backgroundColor'"
v-model="curComponent.style[key]"
/>
<el-select
v-else-if="selectKey.includes(key)"
v-model="curComponent.style[key]"
>
<template v-if="key == 'textAlign'">
<el-option
v-for="item in textAlignOptions"
@ -32,10 +48,20 @@
/>
</template>
</el-select>
<el-input v-else v-model="curComponent.style[key]" type="number" />
<el-input
v-else
v-model="curComponent.style[key]"
type="number"
/>
</el-form-item>
<el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')">
<el-input v-model="curComponent.propValue" type="textarea" />
<el-form-item
v-if="curComponent && !excludes.includes(curComponent.component)"
:label="$t('panel.content')"
>
<el-input
v-model="curComponent.propValue"
type="textarea"
/>
</el-form-item>
</el-form>
</div>

42
frontend/src/components/canvas/components/AttrListExtend.vue
View File

@ -1,12 +1,31 @@
<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template>
<div class="attr-list">
<el-form label-width="80px" size="mini">
<el-form-item v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))" :key="index" :label="map[key]+':'">
<el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
<el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
<el-form
label-width="80px"
size="mini"
>
<el-form-item
v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))"
:key="index"
:label="map[key]+':'"
>
<el-color-picker
v-if="key == 'borderColor'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'color'"
v-model="curComponent.style[key]"
/>
<el-color-picker
v-else-if="key == 'backgroundColor'"
v-model="curComponent.style[key]"
/>
<el-select
v-else-if="selectKey.includes(key)"
v-model="curComponent.style[key]"
>
<template v-if="key == 'textAlign'">
<el-option
v-for="item in textAlignOptions"
@ -32,10 +51,17 @@
/>
</template>
</el-select>
<el-input v-else v-model="curComponent.style[key]" type="number" />
<el-input
v-else
v-model="curComponent.style[key]"
type="number"
/>
</el-form-item>
<el-form-item :label="$t('panel.content_style')+':'">
<div v-if="curComponent.type==='v-text'" style="width: 100%;max-height: 400px;overflow: auto">
<div
v-if="curComponent.type==='v-text'"
style="width: 100%;max-height: 400px;overflow: auto"
>
<VText
style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
:prop-value="curComponent.propValue"

10
frontend/src/components/canvas/components/ComponentList.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="component-list" @dragstart="handleDragStart">
<div
class="component-list"
@dragstart="handleDragStart"
>
<div
v-for="(item, index) in componentList"
:key="index"
@ -7,7 +10,10 @@
draggable
:data-index="index"
>
<span class="iconfont" :class="'icon-' + item.icon" />
<span
class="iconfont"
:class="'icon-' + item.icon"
/>
<span>{{ item.label }}</span>
</div>
</div>

11
frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
View File

@ -1,7 +1,14 @@
<template>
<div v-show="existLinkage" class="bar-main">
<div
v-show="existLinkage"
class="bar-main"
>
<div>
<el-button size="mini" type="warning" @click="clearAllLinkage"><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
<el-button
size="mini"
type="warning"
@click="clearAllLinkage"
><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
</div>
</div>
</template>

26
frontend/src/components/canvas/components/Editor/CloseBar.vue
View File

@ -1,35 +1,17 @@
<template>
<div class="bar-main">
<div style="margin-right: -1px;width: 18px">
<i class="icon iconfont icon-guanbi" @click.stop="closePreview" />
<i
class="icon iconfont icon-guanbi"
@click.stop="closePreview"
/>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import LinkageField from '@/components/canvas/components/Editor/LinkageField'
export default {
components: { },
props: {
},
data() {
return {
}
},
computed: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
closePreview() {
this.$emit('closePreview')

33
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -5,10 +5,29 @@
@click="handleClick"
@mousedown="elementMouseDown"
>
<edit-bar v-if="componentActiveFlag" :source-element="sourceConfig" :terminal="terminal" :element="config" :show-position="showPosition" @showViewDetails="showViewDetails" />
<div :id="componentCanvasId" :style="commonStyle" class="main_view">
<svg-icon v-if="svgInnerEnable" :style="{'color':this.config.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />
<close-bar v-if="previewVisible" @closePreview="closePreview" />
<edit-bar
v-if="componentActiveFlag"
:source-element="sourceConfig"
:terminal="terminal"
:element="config"
:show-position="showPosition"
@showViewDetails="showViewDetails"
/>
<div
:id="componentCanvasId"
:style="commonStyle"
class="main_view"
>
<svg-icon
v-if="svgInnerEnable"
:style="{'color':config.commonBackground.innerImageColor}"
class="svg-background"
:icon-class="mainSlotSvgInner"
/>
<close-bar
v-if="previewVisible"
@closePreview="closePreview"
/>
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
@ -58,7 +77,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
import CloseBar from '@/components/canvas/components/Editor/CloseBar'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import {imgUrlTrans} from "@/components/canvas/utils/utils";
import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
@ -132,7 +151,7 @@ export default {
}
},
svgInnerEnable() {
return !this.screenShot&&this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
return !this.screenShot && this.config.commonBackground.enable && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string'
},
mainSlotSvgInner() {
if (this.svgInnerEnable) {
@ -155,7 +174,7 @@ export default {
}
if (this.config.commonBackground.enable) {
if (this.screenShot && this.config.commonBackground.backgroundType === 'innerImage' && typeof this.config.commonBackground.innerImage === 'string') {
let innerImage = this.config.commonBackground.innerImage.replace('svg', 'png')
const innerImage = this.config.commonBackground.innerImage.replace('svg', 'png')
style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
} else if (this.config.commonBackground.backgroundType === 'outerImage' && typeof this.config.commonBackground.outerImage === 'string') {
style['background'] = `url(${imgUrlTrans(this.config.commonBackground.outerImage)}) no-repeat ${colorRGBA}`

21
frontend/src/components/canvas/components/Editor/ContextMenu.vue
View File

@ -1,9 +1,16 @@
<template>
<div v-show="menuShow" class="contextmenu" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">
<div
v-show="menuShow"
class="contextmenu"
:style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
>
<ul @mouseup="handleMouseUp">
<template v-if="curComponent">
<template v-if="!curComponent.isLock">
<li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
<li
v-if="editFilter.includes(curComponent.type)"
@click="edit"
> {{ $t('panel.edit') }}</li>
<li @click="copy"> {{ $t('panel.copy') }}</li>
<li @click="cut"> {{ $t('panel.cut') }}</li>
<li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
@ -13,9 +20,15 @@
<li @click="upComponent"> {{ $t('panel.upComponent') }}</li>
<li @click="downComponent"> {{ $t('panel.downComponent') }}</li>
</template>
<li v-else @click="unlock">解锁</li>
<li
v-else
@click="unlock"
>解锁</li>
</template>
<li v-else @click="paste">粘贴</li>
<li
v-else
@click="paste"
>粘贴</li>
</ul>
</div>
</template>

27
frontend/src/components/canvas/components/Editor/DateFormat.vue
View File

@ -6,7 +6,12 @@
trigger="click"
>
<el-row>
<el-form ref="form" :inline="true" size="mini" label-width="70px">
<el-form
ref="form"
:inline="true"
size="mini"
label-width="70px"
>
<el-form-item :label="$t('deshowdate.open_mode')">
@ -27,14 +32,23 @@
</el-form-item>
<el-form-item :label="$t('deshowdate.show_week')">
<el-switch v-model="formatInfo.showWeek" size="mini" />
<el-switch
v-model="formatInfo.showWeek"
size="mini"
/>
</el-form-item>
<el-form-item :label="$t('deshowdate.show_date')">
<el-switch v-model="formatInfo.showDate" size="mini" />
<el-switch
v-model="formatInfo.showDate"
size="mini"
/>
</el-form-item>
<el-form-item v-show="formatInfo.showDate" :label="$t('deshowdate.date_format')">
<el-form-item
v-show="formatInfo.showDate"
:label="$t('deshowdate.date_format')"
>
<el-select
v-model="formatInfo.dateFormat"
:placeholder="$t('deshowdate.select_date_format')"
@ -77,7 +91,10 @@
</el-form-item> -->
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-shijiangeshizhuanhuan" />
<i
slot="reference"
class="icon iconfont icon-shijiangeshizhuanhuan"
/>
</el-popover>
</template>

145
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -1,42 +1,116 @@
<template>
<div class="bar-main" :class="showEditPosition" @mousedown="showLabelInfo">
<input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
<div v-if="linkageAreaShow" style="margin-right: -1px;width: 20px">
<el-checkbox v-model="linkageInfo.linkageActive" size="medium" />
<linkage-field v-if="linkageInfo.linkageActive" :element="element" />
<div
class="bar-main"
:class="showEditPosition"
@mousedown="showLabelInfo"
>
<input
id="input"
ref="files"
type="file"
accept="image/*"
hidden
@click="e => {e.target.value = '';}"
@change="handleFileChange"
>
<div
v-if="linkageAreaShow"
style="margin-right: -1px;width: 20px"
>
<el-checkbox
v-model="linkageInfo.linkageActive"
size="medium"
/>
<linkage-field
v-if="linkageInfo.linkageActive"
:element="element"
/>
</div>
<div v-if="positionCheck('multiplexing') && showMultiplexingCheck" style="margin-right: 1px;width: 18px;z-index: 5">
<el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
<div
v-if="positionCheck('multiplexing') && showMultiplexingCheck"
style="margin-right: 1px;width: 18px;z-index: 5"
>
<el-checkbox
v-model="multiplexingCheckModel"
size="medium"
@change="multiplexingCheck"
/>
</div>
<div v-if="batchOptAreaShow" style="margin-right: -1px;width: 20px;z-index: 5">
<el-checkbox size="medium" @change="batchOptChange" />
<div
v-if="batchOptAreaShow"
style="margin-right: -1px;width: 20px;z-index: 5"
>
<el-checkbox
size="medium"
@change="batchOptChange"
/>
</div>
<div v-if="normalAreaShow">
<span :title="$t('panel.edit')">
<i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
<i
v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)"
class="icon iconfont icon-edit"
@click.stop="edit"
/>
</span>
<span :title="$t('panel.matrix')">
<i v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
<i
v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix"
class="icon iconfont icon-shujujuzhen"
@click.stop="auxiliaryMatrixChange"
/>
</span>
<span :title="$t('panel.suspension')">
<i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
<i
v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix"
class="icon iconfont icon-xuanfuanniu"
@click.stop="auxiliaryMatrixChange"
/>
</span>
<span :title="$t('panel.enlarge')">
<i v-if="enlargeShow" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
<i
v-if="enlargeShow"
class="icon iconfont icon-fangda"
@click.stop="showViewDetails('enlarge')"
/>
</span>
<span :title="$t('panel.details')">
<i v-if="detailsShow" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
<i
v-if="detailsShow"
class="icon iconfont icon-chakan"
@click.stop="showViewDetails('details')"
/>
</span>
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet">
<span slot="icon" :title="$t('panel.setting')">
<i class="icon iconfont icon-shezhi" style="margin-top:2px" />
<setting-menu
v-if="activeModel==='edit'"
style="float: right;height: 24px!important;"
@amRemoveItem="amRemoveItem"
@linkJumpSet="linkJumpSet"
@boardSet="boardSet"
>
<span
slot="icon"
:title="$t('panel.setting')"
>
<i
class="icon iconfont icon-shezhi"
style="margin-top:2px"
/>
</span>
</setting-menu>
<span :title="$t('panel.cancel_linkage')">
<i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
<i
v-if="curComponent.type==='view'&&existLinkage"
class="icon iconfont icon-quxiaoliandong"
@click.stop="clearLinkage"
/>
</span>
<span :title="$t('panel.switch_picture')">
<i v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'" class="icon iconfont icon-genghuan" @click.stop="goFile" />
<i
v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'"
class="icon iconfont icon-genghuan"
@click.stop="goFile"
/>
</span>
<el-popover
v-if="selectFieldShow"
@ -44,11 +118,25 @@
trigger="click"
@mousedown="fieldsAreaDown"
>
<fields-list :fields="curFields" :element="element" />
<i slot="reference" :disabled="element.editing" :title="$t('panel.select_field')" class="icon iconfont icon-datasource-select" style="margin-left: 4px;cursor: pointer;font-size: 14px;" />
<fields-list
:fields="curFields"
:element="element"
/>
<i
slot="reference"
:disabled="element.editing"
:title="$t('panel.select_field')"
class="icon iconfont icon-datasource-select"
style="margin-left: 4px;cursor: pointer;font-size: 14px;"
/>
</el-popover>
<span :title="$t('panel.jump')">
<a v-if="showJumpFlag" :title="curComponent.hyperlinks.content " :target="curComponent.hyperlinks.openMode " :href="curComponent.hyperlinks.content ">
<a
v-if="showJumpFlag"
:title="curComponent.hyperlinks.content "
:target="curComponent.hyperlinks.openMode "
:href="curComponent.hyperlinks.content "
>
<i class="icon iconfont icon-com-jump" />
</a>
</span>
@ -117,12 +205,7 @@ export default {
viewXArray: []
}
},
mounted() {
this.initCurFields()
if (this.element.type === 'view') {
bus.$on('initCurFields-' + this.element.id, this.initCurFields)
}
},
computed: {
detailsShow() {
return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView'
@ -212,7 +295,11 @@ export default {
'panelViewDetailsInfo'
])
},
beforeDestroy() {
mounted() {
this.initCurFields()
if (this.element.type === 'view') {
bus.$on('initCurFields-' + this.element.id, this.initCurFields)
}
},
methods: {
fieldsAreaDown(e) {

56
frontend/src/components/canvas/components/Editor/EditBarView.vue
View File

@ -1,21 +1,53 @@
<template>
<div class="bar-main">
<div v-if="!positionCheck('multiplexing') && !positionCheck('email-task')">
<span v-if="isEdit" :title="$t('panel.edit')">
<i class="icon iconfont icon-edit" @click.stop="edit" />
<span
v-if="isEdit"
:title="$t('panel.edit')"
>
<i
class="icon iconfont icon-edit"
@click.stop="edit"
/>
</span>
<span v-show="detailsShow" :title="$t('panel.details')">
<i class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
<span
v-show="detailsShow"
:title="$t('panel.details')"
>
<i
class="icon iconfont icon-chakan"
@click.stop="showViewDetails('details')"
/>
</span>
<span v-show="enlargeShow" :title="$t('panel.enlarge')">
<i class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
<span
v-show="enlargeShow"
:title="$t('panel.enlarge')"
>
<i
class="icon iconfont icon-fangda"
@click.stop="showViewDetails('enlarge')"
/>
</span>
</div>
<div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
<el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
<div
v-if="positionCheck('multiplexing')"
style="margin-right: -1px;width: 18px;z-index: 5"
>
<el-checkbox
v-model="multiplexingCheckModel"
size="medium"
@change="multiplexingCheck"
/>
</div>
<div v-if="positionCheck('email-task') && element.component === 'user-view'" style="margin-right: -1px;width: 18px;z-index: 5">
<el-checkbox v-model="isTaskChecked" size="medium" @change="emailTaskCheck" />
<div
v-if="positionCheck('email-task') && element.component === 'user-view'"
style="margin-right: -1px;width: 18px;z-index: 5"
>
<el-checkbox
v-model="isTaskChecked"
size="medium"
@change="emailTaskCheck"
/>
</div>
</div>
</template>
@ -63,10 +95,10 @@ export default {
}
},
computed: {
detailsShow(){
detailsShow() {
return this.element.propValue.innerType !== 'richTextView'
},
enlargeShow(){
enlargeShow() {
return this.element.propValue.innerType !== 'richTextView'
},
// gapStyle() {

30
frontend/src/components/canvas/components/Editor/FrameLinks.vue
View File

@ -5,7 +5,11 @@
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form
ref="form"
size="mini"
label-width="70px"
>
<el-form-item :label="'Tips:'">
<span style="color: #909399; font-size: 8px;margin-left: 3px">
{{ $t('panel.web_set_tips') }}
@ -15,12 +19,18 @@
<el-input v-model="linkInfoTemp.src" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-chaolianjie" />
<i
slot="reference"
class="icon iconfont icon-chaolianjie"
/>
</el-popover>
</template>
@ -54,6 +64,12 @@ export default {
]
}
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
watch: {
linkInfo: {
handler: function() {
@ -65,14 +81,6 @@ export default {
created() {
this.init()
},
mounted() {
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
methods: {
init() {
this.linkInfoTemp = deepCopy(this.linkInfo)

46
frontend/src/components/canvas/components/Editor/Grid.vue
View File

@ -1,7 +1,17 @@
<template>
<svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<svg
class="grid"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<pattern id="smallGrid" :width="smallGridW" :height="smallGridH" patternUnits="userSpaceOnUse">
<pattern
id="smallGrid"
:width="smallGridW"
:height="smallGridH"
patternUnits="userSpaceOnUse"
>
<path
:d="smallGridPathD"
fill="none"
@ -9,8 +19,17 @@
stroke-width="1"
/>
</pattern>
<pattern id="middleGrid" :width="middleGridW" :height="middleGridH" patternUnits="userSpaceOnUse">
<rect :width="middleGridW" :height="middleGridH" fill="url(#smallGrid)" />
<pattern
id="middleGrid"
:width="middleGridW"
:height="middleGridH"
patternUnits="userSpaceOnUse"
>
<rect
:width="middleGridW"
:height="middleGridH"
fill="url(#smallGrid)"
/>
<path
:d="middleGridPathD"
fill="none"
@ -18,8 +37,17 @@
stroke-width="1.5"
/>
</pattern>
<pattern id="grid" :width="gridW" :height="gridH" patternUnits="userSpaceOnUse">
<rect :width="gridW" :height="gridH" fill="url(#middleGrid)" />
<pattern
id="grid"
:width="gridW"
:height="gridH"
patternUnits="userSpaceOnUse"
>
<rect
:width="gridW"
:height="gridH"
fill="url(#middleGrid)"
/>
<path
:d="pathD"
fill="none"
@ -28,7 +56,11 @@
/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
<rect
width="100%"
height="100%"
fill="url(#grid)"
/>
</svg>
</template>

36
frontend/src/components/canvas/components/Editor/Hyperlinks.vue
View File

@ -6,29 +6,51 @@
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form
ref="form"
size="mini"
label-width="70px"
>
<el-form-item :label="$t('panel.enable_jump')">
<el-switch v-model="linkInfo.enable" size="mini" />
<span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
<el-switch
v-model="linkInfo.enable"
size="mini"
/>
<span
v-show="linkInfo.enable"
style="color: #909399; font-size: 8px;margin-left: 3px"
>
Tips:{{ $t('panel.link_open_tips') }}
</span>
</el-form-item>
<el-form-item :label="$t('panel.open_mode')">
<el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
<el-radio-group
v-model="linkInfo.openMode"
:disabled="!linkInfo.enable"
>
<el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
<el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.hyperLinks')">
<el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
<el-input
v-model="linkInfo.content"
:disabled="!linkInfo.enable"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-font icon-chaolianjie1" />
<i
slot="reference"
class="icon iconfont icon-font icon-chaolianjie1"
/>
</el-popover>
</template>

37
frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
View File

@ -1,23 +1,42 @@
<template>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form
ref="form"
size="mini"
label-width="70px"
>
<el-form-item :label="$t('panel.enable_jump')">
<el-switch v-model="linkInfo.enable" size="mini" />
<span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
<el-switch
v-model="linkInfo.enable"
size="mini"
/>
<span
v-show="linkInfo.enable"
style="color: #909399; font-size: 8px;margin-left: 3px"
>
Tips:{{ $t('panel.link_open_tips') }}
</span>
</el-form-item>
<el-form-item :label="$t('panel.open_mode')">
<el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
<el-radio-group
v-model="linkInfo.openMode"
:disabled="!linkInfo.enable"
>
<el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
<el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.hyperLinks')">
<el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
<el-input
v-model="linkInfo.content"
:disabled="!linkInfo.enable"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
@ -42,14 +61,14 @@ export default {
linkageActiveStatus: false
}
},
mounted() {
this.linkInfo = { ...this.linkInfo }
},
computed: {
...mapState([
'curComponent'
])
},
mounted() {
this.linkInfo = { ...this.linkInfo }
},
methods: {
onSubmit() {
this.linkInfo.content = checkAddHttp(this.linkInfo.content)

106
frontend/src/components/canvas/components/Editor/LinkageField.vue
View File

@ -15,10 +15,17 @@
</el-row>
<el-row style="height: 120px;overflow-y: auto">
<el-row v-for="(itemLinkage, index) in linkageInfo.linkageFields" :key="index">
<el-row
v-for="(itemLinkage, index) in linkageInfo.linkageFields"
:key="index"
>
<el-col :span="11">
<div class="select-filed">
<el-select v-model="itemLinkage.sourceField" size="mini" placeholder="请选择">
<el-select
v-model="itemLinkage.sourceField"
size="mini"
placeholder="请选择"
>
<el-option
v-for="item in sourceLinkageInfo.targetViewFields"
:key="item.id"
@ -26,10 +33,26 @@
:value="item.id"
>
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon
v-if="item.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="item.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="item.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
@ -38,7 +61,11 @@
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select v-model="itemLinkage.targetField" size="mini" placeholder="请选择">
<el-select
v-model="itemLinkage.targetField"
size="mini"
placeholder="请选择"
>
<el-option
v-for="item in linkageInfo.targetViewFields"
:key="item.id"
@ -46,10 +73,26 @@
:value="item.id"
>
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon
v-if="item.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="item.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="item.deType === 2 || item.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="item.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
@ -58,18 +101,33 @@
</el-col>
<el-col :span="2">
<div>
<el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteLinkageField(index)" />
<el-button
icon="el-icon-delete"
type="text"
size="small"
style="float: left"
@click="deleteLinkageField(index)"
/>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkageField(null,null)">追加联动依赖字段</el-button>
<el-button
size="mini"
type="success"
icon="el-icon-plus"
round
@click="addLinkageField(null,null)"
>追加联动依赖字段</el-button>
</el-row>
<!-- <el-button slot="reference">T</el-button>-->
<i slot="reference" class="icon iconfont icon-edit slot-class" />
<i
slot="reference"
class="icon iconfont icon-edit slot-class"
/>
</el-popover>
</template>
@ -105,16 +163,6 @@ export default {
]
}
},
mounted() {
// 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
checkSameDataSet(this.curLinkageView.propValue.viewId, this.element.propValue.viewId).then(res => {
if (res.data === 'YES' && this.linkageInfo.linkageFields.length === 0) {
this.sourceLinkageInfo.targetViewFields.forEach(item => {
this.addLinkageField(item.id, item.id)
})
}
})
},
computed: {
linkageInfo() {
return this.targetLinkageInfo[this.element.propValue.viewId]
@ -134,6 +182,16 @@ export default {
'curLinkageView'
])
},
mounted() {
// 初始化映射关系 如果当前是相同的数据集且没有关联关系，则自动补充映射关系
checkSameDataSet(this.curLinkageView.propValue.viewId, this.element.propValue.viewId).then(res => {
if (res.data === 'YES' && this.linkageInfo.linkageFields.length === 0) {
this.sourceLinkageInfo.targetViewFields.forEach(item => {
this.addLinkageField(item.id, item.id)
})
}
})
},
methods: {
showViewDetails() {
this.$emit('showViewDetails')

5
frontend/src/components/canvas/components/Editor/MobileCheckBar.vue
View File

@ -2,7 +2,10 @@
<div class="bar-main">
<div style="width: 20px">
<!-- <svg-icon icon-class="field_text" class="el-icon-close" />-->
<el-checkbox v-model="element.mobileSelected" @change="onChange" />
<el-checkbox
v-model="element.mobileSelected"
@change="onChange"
/>
</div>
</div>
</template>

15
frontend/src/components/canvas/components/Editor/PGrid.vue
View File

@ -2,9 +2,18 @@
<div class="grid">
<!-- positionBox:{{ positionBox.length }}-->
<!-- <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
<div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
<!-- <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
<div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;">
<div
v-for="(yItem, index) in positionBox"
:key="index+'y'"
style="float: left; width: 105%"
>
<!-- <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
<div
v-for="(xItem, indx) in yItem"
:key="indx+'x'"
:style="classInfo"
style="float: left; border: 0.2px solid #b3d4fc ;"
>
{{ xItem.el?1:0 }}
</div>
</div>

80
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -1,15 +1,32 @@
<template>
<div class="bg" :style="customStyle" @scroll="canvasScroll">
<div
class="bg"
:style="customStyle"
@scroll="canvasScroll"
>
<canvas-opt-bar />
<div id="canvasInfoMain" ref="canvasInfoMain" :style="canvasInfoMainStyle">
<el-row v-if="showUnpublishedArea" class="custom-position">
<div
id="canvasInfoMain"
ref="canvasInfoMain"
:style="canvasInfoMainStyle"
>
<el-row
v-if="showUnpublishedArea"
class="custom-position"
>
<div style="text-align: center">
<svg-icon icon-class="unpublished" style="font-size: 75px" />
<svg-icon
icon-class="unpublished"
style="font-size: 75px"
/>
<br>
<span>{{ $t('panel.panel_off') }}</span>
</div>
</el-row>
<el-row v-else-if="componentDataShow && componentDataShow.length===0" class="custom-position">
<el-row
v-else-if="componentDataShow && componentDataShow.length===0"
class="custom-position"
>
{{ $t('panel.panelNull') }}
</el-row>
<div
@ -44,15 +61,37 @@
:destroy-on-close="true"
top="5vh"
>
<span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
<el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
<span
v-if="chartDetailsVisible"
style="position: absolute;right: 70px;top:15px"
>
<el-button
v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
class="el-icon-picture-outline"
size="mini"
@click="exportViewImg"
>
{{ $t('chart.export_img') }}
</el-button>
<el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
<el-button
v-if="showChartInfoType==='details'"
size="mini"
@click="exportExcel"
>
<svg-icon
icon-class="ds-excel"
class="ds-icon-excel"
/>{{ $t('chart.export') }}Excel
</el-button>
</span>
<UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :canvas-style-data="canvasStyleData" :open-type="showChartInfoType" :chart="showChartInfo" :chart-table="showChartTableInfo" />
<UserViewDialog
v-if="chartDetailsVisible"
ref="userViewDialog"
:canvas-style-data="canvasStyleData"
:open-type="showChartInfoType"
:chart="showChartInfo"
:chart-table="showChartTableInfo"
/>
</el-dialog>
<!--手机视图详情-->
@ -62,7 +101,12 @@
class="mobile-dialog-css"
:destroy-on-close="true"
>
<UserViewMobileDialog v-if="mobileChartDetailsVisible" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
<UserViewMobileDialog
v-if="mobileChartDetailsVisible"
:canvas-style-data="canvasStyleData"
:chart="showChartInfo"
:chart-table="showChartTableInfo"
/>
</el-dialog>
</div>
</div>
@ -177,12 +221,6 @@ export default {
buttonFilterMap: null
}
},
created() {
// 取消视图请求
this.$cancelRequest('/chart/view/getData/**')
this.$cancelRequest('/api/link/viewDetail/**')
this.$cancelRequest('/static-resource/**')
},
computed: {
mainActiveName() {
return this.$store.state.panel.mainActiveName
@ -253,7 +291,7 @@ export default {
},
// 此处单独计算componentData的值 不放入全局mapState中
componentDataInfo() {
return this.componentDataShow||[]
return this.componentDataShow || []
},
...mapState([
'isClickComponent'
@ -297,6 +335,12 @@ export default {
deep: true
}
},
created() {
// 取消视图请求
this.$cancelRequest('/chart/view/getData/**')
this.$cancelRequest('/api/link/viewDetail/**')
this.$cancelRequest('/static-resource/**')
},
mounted() {
this._isMobile()
this.initListen()

6
frontend/src/components/canvas/components/Editor/PreviewEject.vue
View File

@ -1,5 +1,9 @@
<template>
<div v-loading="dataLoading" class="bg" :style="bgStyle">
<div
v-loading="dataLoading"
class="bg"
:style="bgStyle"
>
<Preview
v-if="!dataLoading"
:component-data="componentData"

16
frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue
View File

@ -1,6 +1,10 @@
<template>
<div style="width: 100%;height: 100vh;">
<fullscreen style="height:100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen" @change="fullscreenChange">
<fullscreen
style="height:100%;background: #f7f8fa;overflow-y: auto"
:fullscreen.sync="fullscreen"
@change="fullscreenChange"
>
<Preview
v-if="fullscreen"
:component-data="componentData"
@ -20,6 +24,11 @@ import { mapState } from 'vuex'
export default {
components: { Preview },
data() {
return {
fullscreen: false
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
@ -29,11 +38,6 @@ export default {
'componentData'
])
},
data() {
return {
fullscreen: false
}
},
mounted() {
this.fullscreen = false
this.$nextTick(() => (this.fullscreen = true))

36
frontend/src/components/canvas/components/Editor/PreviewMobile.vue
View File

@ -1,7 +1,14 @@
<template>
<div class="bg" :style="customStyle">
<div
class="bg"
:style="customStyle"
>
<canvas-opt-bar />
<div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
<div
id="canvasInfoMain"
ref="canvasInfoMain"
style="width: 100%;height: 100%"
>
<div
id="canvasInfoTemp"
ref="canvasInfoTemp"
@ -10,7 +17,11 @@
@mouseup="deselectCurComponent"
@mousedown="handleMouseDown"
>
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
<el-row
v-if="componentDataShow.length===0"
style="height: 100%;"
class="custom-position"
>
{{ $t('panel.panelNull') }}
</el-row>
<ComponentWrapper
@ -29,12 +40,23 @@
:destroy-on-close="true"
>
<span style="position: absolute;right: 70px;top:15px">
<el-button size="mini" @click="exportExcel">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
<el-button
size="mini"
@click="exportExcel"
>
<svg-icon
icon-class="ds-excel"
class="ds-icon-excel"
/>
{{ $t('chart.export_details') }}
</el-button>
</span>
<UserViewDialog ref="userViewDialog" :canvas-style-data="canvasStyleData" :chart="showChartInfo" :chart-table="showChartTableInfo" />
<UserViewDialog
ref="userViewDialog"
:canvas-style-data="canvasStyleData"
:chart="showChartInfo"
:chart-table="showChartTableInfo"
/>
</el-dialog>
</div>
</div>
@ -47,7 +69,7 @@ import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import { uuid } from 'vue-uuid'
import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import eventBus from '@/components/canvas/utils/eventBus'
import elementResizeDetectorMaker from 'element-resize-detector'
import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'

89
frontend/src/components/canvas/components/Editor/SettingMenu.vue
View File

@ -1,30 +1,75 @@
<template>
<div>
<div style="width: 100%;">
<el-dropdown trigger="click" @mouseup="handleMouseUp">
<el-dropdown
trigger="click"
@mouseup="handleMouseUp"
>
<slot name="icon" />
<el-dropdown-menu v-if="curComponent">
<el-dropdown-item v-if="editFilter.includes(curComponent.type)" icon="el-icon-edit-outline" @click.native="edit">{{ $t('panel.edit') }}</el-dropdown-item>
<el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
<el-dropdown-item
v-if="editFilter.includes(curComponent.type)"
icon="el-icon-edit-outline"
@click.native="edit"
>{{ $t('panel.edit') }}</el-dropdown-item>
<el-dropdown-item
v-if="curComponent.type != 'custom-button'"
icon="el-icon-document-copy"
@click.native="copy"
>{{ $t('panel.copy') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
@click.native="deleteComponent"
>{{ $t('panel.delete') }}</el-dropdown-item>
<el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
<el-dropdown placement="right-start">
<span class="el-icon-copy-document">
{{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-upload2" @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-download" @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-upload2"
@click.native="topComponent"
>{{ $t('panel.topComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-download"
@click.native="bottomComponent"
>{{ $t('panel.bottomComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-up"
@click.native="upComponent"
>{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-down"
@click.native="downComponent"
>{{ $t('panel.downComponent') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item v-if="linkageSettingShow" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
<el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-plus" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
<el-dropdown-item v-if="linkJumpSetShow" icon="el-icon-connection" @click.native="linkJumpSet">{{ $t('panel.setting_jump') }}</el-dropdown-item>
<el-dropdown-item v-if="curComponent.type != 'custom-button'" icon="el-icon-magic-stick" @click.native="boardSet">{{ $t('panel.component_style') }}</el-dropdown-item>
<el-dropdown-item v-if="curComponent.type != 'custom-button'" @click.native="hyperlinksSet">
<el-dropdown-item
v-if="linkageSettingShow"
icon="el-icon-link"
@click.native="linkageSetting"
>{{ $t('panel.linkage_setting') }}</el-dropdown-item>
<el-dropdown-item
v-if="'de-tabs'===curComponent.type"
icon="el-icon-plus"
@click.native="addTab"
>{{ $t('panel.add_tab') }}</el-dropdown-item>
<el-dropdown-item
v-if="linkJumpSetShow"
icon="el-icon-connection"
@click.native="linkJumpSet"
>{{ $t('panel.setting_jump') }}</el-dropdown-item>
<el-dropdown-item
v-if="curComponent.type != 'custom-button'"
icon="el-icon-magic-stick"
@click.native="boardSet"
>{{ $t('panel.component_style') }}</el-dropdown-item>
<el-dropdown-item
v-if="curComponent.type != 'custom-button'"
@click.native="hyperlinksSet"
>
<i class="icon iconfont icon-font icon-chaolianjie1" />
{{ $t('panel.hyperlinks') }}
</el-dropdown-item>
@ -40,7 +85,11 @@
:append-to-body="true"
:show-close="true"
>
<HyperlinksDialog v-if="hyperlinksSetVisible" :link-info="curComponent.hyperlinks" @onClose="hyperlinksSetVisible = false" />
<HyperlinksDialog
v-if="hyperlinksSetVisible"
:link-info="curComponent.hyperlinks"
@onClose="hyperlinksSetVisible = false"
/>
</el-dialog>
</div>
@ -83,14 +132,14 @@ export default {
},
computed: {
linkJumpSetShow() {
return this.curComponent.type === 'view'
&& !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType)
&& !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
return this.curComponent.type === 'view' &&
!this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
!(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
},
linkageSettingShow() {
return this.curComponent.type === 'view'
&& !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType)
&& !(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
return this.curComponent.type === 'view' &&
!this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType) &&
!(this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
},
panelInfo() {
return this.$store.state.panel.panelInfo

45
frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
View File

@ -1,16 +1,43 @@
<template>
<div>
<div style="width: 100%;">
<el-dropdown trigger="click" @mouseup="handleMouseUp">
<el-button ref="trackButton" class="icon iconfont icon-shezhi">TEST</el-button>
<el-dropdown
trigger="click"
@mouseup="handleMouseUp"
>
<el-button
ref="trackButton"
class="icon iconfont icon-shezhi"
>TEST</el-button>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-document-copy" @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-upload2" @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-download" @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-link" @click.native="linkageSetting">联动设置</el-dropdown-item>
<el-dropdown-item
icon="el-icon-document-copy"
@click.native="copy"
>{{ $t('panel.copy') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
@click.native="deleteComponent"
>{{ $t('panel.delete') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-upload2"
@click.native="topComponent"
>{{ $t('panel.topComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-download"
@click.native="bottomComponent"
>{{ $t('panel.bottomComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-up"
@click.native="upComponent"
>{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-arrow-down"
@click.native="downComponent"
>{{ $t('panel.downComponent') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-link"
@click.native="linkageSetting"
>联动设置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

20
frontend/src/components/canvas/components/Editor/Shape.vue
View File

@ -1,7 +1,21 @@
<template>
<div class="shape" :class="classInfo" @mouseenter="enter" @mouseleave="leave" @click="selectCurComponent" @mousedown="handleMouseDownOnShape">
<span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
<span v-show="element.isLock" class="iconfont icon-suo" />
<div
class="shape"
:class="classInfo"
@mouseenter="enter"
@mouseleave="leave"
@click="selectCurComponent"
@mousedown="handleMouseDownOnShape"
>
<span
v-show="isActive()"
class="iconfont icon-xiangyouxuanzhuan"
@mousedown="handleRotate"
/>
<span
v-show="element.isLock"
class="iconfont icon-suo"
/>
<!-- <span v-show="isActive()" class="iconfont icon-more">-->
<!-- <el-button-->

30
frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
View File

@ -6,7 +6,11 @@
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form
ref="form"
size="mini"
label-width="70px"
>
<el-form-item :label="$t('panel.video_type')">
<el-radio-group v-model="streamMediaInfoTemp.videoType">
<el-radio :label="'flv'">FLV</el-radio>
@ -42,12 +46,18 @@
</el-form-item>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-chaolianjie" />
<i
slot="reference"
class="icon iconfont icon-chaolianjie"
/>
</el-popover>
</template>
@ -81,6 +91,12 @@ export default {
]
}
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
watch: {
linkInfo: {
handler: function() {
@ -92,14 +108,6 @@ export default {
created() {
this.init()
},
mounted() {
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
methods: {
init() {
this.streamMediaInfoTemp = deepCopy(this.linkInfo)

40
frontend/src/components/canvas/components/Editor/VideoLinks.vue
View File

@ -6,7 +6,11 @@
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form
ref="form"
size="mini"
label-width="70px"
>
<!-- <el-form-item :label="$t('panel.video_type')">-->
<!-- <el-radio-group v-model="linkInfoTemp.videoType">-->
<!-- <el-radio :label="'web'">{{$t('panel.online_video')}}</el-radio>-->
@ -15,12 +19,18 @@
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('panel.auto_play')">
<el-switch v-model="linkInfoTemp[linkInfoTemp.videoType].autoplay" size="mini" />
<el-switch
v-model="linkInfoTemp[linkInfoTemp.videoType].autoplay"
size="mini"
/>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips:{{ $t('panel.video_tips') }}
</span>
</el-form-item>
<el-form-item v-if="linkInfoTemp.videoType==='web'" :label="$t('panel.play_frequency')">
<el-form-item
v-if="linkInfoTemp.videoType==='web'"
:label="$t('panel.play_frequency')"
>
<el-radio-group v-model="linkInfoTemp[linkInfoTemp.videoType].loop">
<el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
<el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
@ -30,12 +40,18 @@
<el-input v-model="linkInfoTemp[linkInfoTemp.videoType].sources[0].src" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button
type="primary"
@click="onSubmit"
>{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-chaolianjie" />
<i
slot="reference"
class="icon iconfont icon-chaolianjie"
/>
</el-popover>
</template>
@ -69,6 +85,12 @@ export default {
]
}
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
watch: {
linkInfo: {
handler: function() {
@ -80,14 +102,6 @@ export default {
created() {
this.init()
},
mounted() {
},
computed: {
...mapState([
'curComponent',
'curActiveTabInner'
])
},
methods: {
init() {
this.linkInfoTemp = deepCopy(this.linkInfo)

18
frontend/src/components/canvas/components/Editor/ViewTrackBar.vue
View File

@ -1,9 +1,21 @@
<template>
<div>
<el-dropdown trigger="click">
<input id="input" ref="trackButton" type="button" hidden>
<el-dropdown-menu class="track-menu" :append-to-body="false">
<el-dropdown-item v-for="(item, key) in trackMenu" :key="key" @click.native="trackMenuClick(item)"><span class="menu-item">{{ i18n_map[item] }}</span></el-dropdown-item>
<input
id="input"
ref="trackButton"
type="button"
hidden
>
<el-dropdown-menu
class="track-menu"
:append-to-body="false"
>
<el-dropdown-item
v-for="(item, key) in trackMenu"
:key="key"
@click.native="trackMenuClick(item)"
><span class="menu-item">{{ i18n_map[item] }}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

9
frontend/src/components/canvas/components/Editor/fieldsList.vue
View File

@ -1,6 +1,13 @@
<template>
<div @mousedown="fieldsAreaDown">
<el-button v-for="(field) in fields" :title="field.name" :key="field.id" size="mini" class="field-area" @click="fieldSelect(field)">
<el-button
v-for="(field) in fields"
:key="field.id"
:title="field.name"
size="mini"
class="field-area"
@click="fieldSelect(field)"
>
{{ field.name }}
</el-button>
</div>

47
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -14,8 +14,15 @@
@scroll="canvasScroll"
>
<!-- 网格线 -->
<Grid v-if="showGrid" :matrix-style="matrixStyle" />
<PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
<Grid
v-if="showGrid"
:matrix-style="matrixStyle"
/>
<PGrid
v-if="psDebug"
:position-box="positionBoxInfoArray"
:matrix-style="matrixStyle"
/>
<!--页面组件列表展示-->
<de-drag
v-for="(item, index) in componentData"
@ -140,12 +147,27 @@
:show-close="true"
top="5vh"
>
<span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
<el-button v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
<span
v-if="chartDetailsVisible"
style="position: absolute;right: 70px;top:15px"
>
<el-button
v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
class="el-icon-picture-outline"
size="mini"
@click="exportViewImg"
>
{{ $t('chart.export_img') }}
</el-button>
<el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
<el-button
v-if="showChartInfoType==='details'"
size="mini"
@click="exportExcel"
>
<svg-icon
icon-class="ds-excel"
class="ds-icon-excel"
/>{{ $t('chart.export') }}Excel
</el-button>
</span>
<UserViewDialog
@ -166,7 +188,11 @@
:destroy-on-close="true"
:append-to-body="true"
>
<LinkJumpSet v-if="linkJumpSetVisible" :view-id="linkJumpSetViewId" @closeJumpSetDialog="closeJumpSetDialog" />
<LinkJumpSet
v-if="linkJumpSetVisible"
:view-id="linkJumpSetViewId"
@closeJumpSetDialog="closeJumpSetDialog"
/>
</el-dialog>
<el-dialog
@ -178,7 +204,10 @@
:destroy-on-close="true"
:append-to-body="true"
>
<background v-if="boardSetVisible" @backgroundSetClose="backgroundSetClose" />
<background
v-if="boardSetVisible"
@backgroundSetClose="backgroundSetClose"
/>
</el-dialog>
</div>
</template>
@ -488,6 +517,7 @@ function removeItem(index) {
}
})
this.yourList.splice(index, 1, {})
// eslint-disable-next-line
} catch (e) {
}
}
@ -784,6 +814,7 @@ export default {
Shape,
ContextMenu,
MarkLine,
// eslint-disable-next-line
Area,
Grid,
PGrid,

27
frontend/src/components/canvas/components/EventList.vue
View File

@ -17,10 +17,29 @@
<!-- 选择事件 -->
<Modal v-model="isShowEvent">
<el-tabs v-model="eventActiveName">
<el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
<el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
<el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
<el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
<el-tab-pane
v-for="item in eventList"
:key="item.key"
:label="item.label"
:name="item.key"
style="padding: 0 20px"
>
<el-input
v-if="item.key == 'redirect'"
v-model="item.param"
type="textarea"
placeholder="请输入完整的 URL"
/>
<el-input
v-if="item.key == 'alert'"
v-model="item.param"
type="textarea"
placeholder="请输入要 alert 的内容"
/>
<el-button
style="margin-top: 20px;"
@click="addEvent(item.key, item.param)"
>确定</el-button>
</el-tab-pane>
</el-tabs>
</Modal>

74
frontend/src/components/canvas/components/FilterTextAttr.vue
View File

@ -1,48 +1,100 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<el-card
class="el-card-main"
:style="mainStyle"
>
<div style="position: relative;">
<el-tooltip :content="$t('panel.fontSize')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="iconfont icon-font_size"
/>
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange"/>
<el-input
v-model="styleInfo.fontSize"
type="number"
size="mini"
min="12"
max="128"
@change="styleChange"
/>
</div>
<el-tooltip :content="$t('panel.fontWeight')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-font-weight-bold"
/>
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange"/>
<el-input
v-model="styleInfo.fontWeight"
type="number"
size="mini"
min="100"
step="100"
max="900"
@change="styleChange"
/>
</div>
<el-tooltip :content="$t('panel.letterSpacing')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-letter_spacing"
/>
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange"/>
<el-input
v-model="styleInfo.letterSpacing"
type="number"
size="mini"
min="0"
max="99"
@change="styleChange"
/>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.color')">
<i class="icon iconfont icon-zimua" @click="goColor" />
<i
class="icon iconfont icon-zimua"
@click="goColor"
/>
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
<el-color-picker
ref="colorPicker"
v-model="styleInfo.color"
style="margin-top: 7px;height: 0px"
size="mini"
@change="styleChange"
/>
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
<i
class="iconfont icon-beijingse1"
@click="goBackgroundColor"
/>
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
<el-color-picker
ref="backgroundColorPicker"
v-model="styleInfo.backgroundColor"
style="margin-top: 7px;height: 0px"
size="mini"
@change="styleChange"
/>
</div>
</div>
</div>

11
frontend/src/components/canvas/components/Modal.vue
View File

@ -1,6 +1,13 @@
<template>
<div v-if="show" class="modal-bg" @click="hide">
<div class="fadeInLeft animated modal" @click="stopPropagation">
<div
v-if="show"
class="modal-bg"
@click="hide"
>
<div
class="fadeInLeft animated modal"
@click="stopPropagation"
>
<slot />
</div>
</div>

100
frontend/src/components/canvas/components/RectangleAttr.vue
View File

@ -1,9 +1,16 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<el-card
class="el-card-main"
:style="mainStyle"
>
<div style="position: relative;">
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
<el-select
v-model="styleInfo.borderStyle"
size="mini"
@change="styleChange"
>
<el-option
v-for="item in lineStyle"
:key="item.value"
@ -21,7 +28,12 @@
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
<el-select
v-model="styleInfo.borderWidth"
size="mini"
placeholder=""
@change="styleChange"
>
<el-option
v-for="item in lineFont"
:key="item.value"
@ -33,38 +45,78 @@
</div>
<el-tooltip :content="$t('panel.borderRadius')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-fangxing-"
/>
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
<el-input
v-model="styleInfo.borderRadius"
type="number"
size="mini"
min="0"
max="100"
step="1"
@change="styleChange"
/>
</div>
<el-tooltip :content="$t('panel.opacity')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-touming"
/>
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
<el-input
v-model="innerOpacity"
type="number"
size="mini"
min="0"
max="100"
step="10"
@change="styleChange"
/>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<i class="iconfont icon-huabi" @click="goBoardColor" />
<i
class="iconfont icon-huabi"
@click="goBoardColor"
/>
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker
ref="boardColorPicker"
v-model="styleInfo.borderColor"
style="margin-top: 7px;height: 0px"
size="mini"
@change="styleChange"
/>
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
<i
class="iconfont icon-beijingse1"
@click="goBackgroundColor"
/>
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
<el-color-picker
ref="backgroundColorPicker"
v-model="styleInfo.backgroundColor"
style="margin-top: 7px;height: 0px"
size="mini"
@change="styleChange"
/>
</div>
</div>
@ -122,20 +174,8 @@ export default {
innerOpacity: 0
}
},
watch: {
innerOpacity: {
handler(oldVal, newVal) {
this.styleInfo['opacity'] = this.innerOpacity / 100
}
}
},
mounted() {
if (this.styleInfo['opacity']) {
this.innerOpacity = this.styleInfo['opacity'] * 100
}
},
computed: {
computed: {
boardDivColor() {
const style = {
height: '2px',
@ -175,6 +215,18 @@ export default {
])
},
watch: {
innerOpacity: {
handler(oldVal, newVal) {
this.styleInfo['opacity'] = this.innerOpacity / 100
}
}
},
mounted() {
if (this.styleInfo['opacity']) {
this.innerOpacity = this.styleInfo['opacity'] * 100
}
},
methods: {
goBoardColor() {
this.$refs.boardColorPicker.handleTrigger()

325
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -1,8 +1,21 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<div id="main-attr" style="position: relative;">
<div v-if="attrShow('textAlign')" style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
<el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
<el-card
class="el-card-main"
:style="mainStyle"
>
<div
id="main-attr"
style="position: relative;"
>
<div
v-if="attrShow('textAlign')"
style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-radio-group
v-model="styleInfo.textAlign"
size="mini"
@change="styleChange"
>
<el-radio-button
v-for="item in textAlignOptions"
:key="item.label"
@ -16,9 +29,16 @@
</el-radio-button>
</el-radio-group>
</div>
<div v-if="attrShow('borderStyle')" style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<div
v-if="attrShow('borderStyle')"
style="width: 80px;margin-top: 2px;margin-left: 2px;float: left"
>
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
<el-select
v-model="styleInfo.borderStyle"
size="mini"
@change="styleChange"
>
<el-option
v-for="item in lineStyle"
:key="item.value"
@ -34,9 +54,17 @@
</el-tooltip>
</div>
<div v-if="attrShow('borderWidth')" style="width: 60px;float: left;margin-top: 2px;margin-left: 2px;">
<div
v-if="attrShow('borderWidth')"
style="width: 60px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
<el-select
v-model="styleInfo.borderWidth"
size="mini"
placeholder=""
@change="styleChange"
>
<el-option
v-for="item in lineFont"
:key="item.value"
@ -46,138 +74,323 @@
</el-select>
</el-tooltip>
</div>
<el-tooltip v-if="attrShow('fontSize')" :content="$t('panel.fontSize')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
<el-tooltip
v-if="attrShow('fontSize')"
:content="$t('panel.fontSize')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="iconfont icon-font_size"
/>
</el-tooltip>
<div v-if="attrShow('fontSize')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="initFontSize" type="number" size="mini" :min="miniFontSize" :max="maxFontSize" @change="styleChange" />
<div
v-if="attrShow('fontSize')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="initFontSize"
type="number"
size="mini"
:min="miniFontSize"
:max="maxFontSize"
@change="styleChange"
/>
</div>
<el-tooltip v-if="attrShow('fontWeight')" :content="$t('panel.fontWeight')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
<el-tooltip
v-if="attrShow('fontWeight')"
:content="$t('panel.fontWeight')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-font-weight-bold"
/>
</el-tooltip>
<div v-if="attrShow('fontWeight')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
<div
v-if="attrShow('fontWeight')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="styleInfo.fontWeight"
type="number"
size="mini"
min="100"
step="100"
max="900"
@change="styleChange"
/>
</div>
<el-tooltip v-if="attrShow('letterSpacing')" :content="$t('panel.letterSpacing')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
<el-tooltip
v-if="attrShow('letterSpacing')"
:content="$t('panel.letterSpacing')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-letter_spacing"
/>
</el-tooltip>
<div v-if="attrShow('letterSpacing')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
<div
v-if="attrShow('letterSpacing')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="styleInfo.letterSpacing"
type="number"
size="mini"
min="0"
max="99"
@change="styleChange"
/>
</div>
<el-tooltip v-if="attrShow('margin')" :content="$t('panel.margin')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-margin" />
<el-tooltip
v-if="attrShow('margin')"
:content="$t('panel.margin')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-margin"
/>
</el-tooltip>
<div v-if="attrShow('margin')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.margin" type="number" size="mini" min="0" max="99" @change="styleChange" />
<div
v-if="attrShow('margin')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="styleInfo.margin"
type="number"
size="mini"
min="0"
max="99"
@change="styleChange"
/>
</div>
<el-tooltip v-if="attrShow('opacity')" :content="$t('panel.opacity')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
<el-tooltip
v-if="attrShow('opacity')"
:content="$t('panel.opacity')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-touming"
/>
</el-tooltip>
<div v-if="attrShow('opacity')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
<div
v-if="attrShow('opacity')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="innerOpacity"
type="number"
size="mini"
min="0"
max="100"
step="10"
@change="styleChange"
/>
</div>
<el-tooltip v-if="attrShow('borderRadius')" :content="$t('panel.borderRadius')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
<el-tooltip
v-if="attrShow('borderRadius')"
:content="$t('panel.borderRadius')"
>
<i
style="float: left;margin-top: 3px;margin-left: 2px;"
class="icon iconfont icon-fangxing-"
/>
</el-tooltip>
<div v-if="attrShow('borderRadius')" style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
<div
v-if="attrShow('borderRadius')"
style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-input
v-model="styleInfo.borderRadius"
type="number"
size="mini"
min="0"
max="100"
step="1"
@change="styleChange"
/>
</div>
<div v-if="attrShow('color')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('color')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.color')">
<i class="icon iconfont icon-zimua" @click="goColor" />
<i
class="icon iconfont icon-zimua"
@click="goColor"
/>
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
<el-color-picker
ref="colorPicker"
v-model="styleInfo.color"
style="margin-top: 7px;height: 0px"
size="mini"
:predefine="predefineColors"
@change="styleChange"
/>
</div>
</div>
<div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('borderColor')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.border_color')">
<i class="iconfont icon-huabi" @click="goBoardColor" />
<i
class="iconfont icon-huabi"
@click="goBoardColor"
/>
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" :predefine="predefineColors" @change="styleChange" />
<el-color-picker
ref="boardColorPicker"
v-model="styleInfo.borderColor"
style="margin-top: 7px;height: 0px"
size="mini"
:predefine="predefineColors"
@change="styleChange"
/>
</div>
</div>
<div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('backgroundColor')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.background_color')">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
<i
class="iconfont icon-beijingse1"
@click="goBackgroundColor"
/>
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" :predefine="predefineColors" size="mini" @change="styleChange" />
<el-color-picker
ref="backgroundColorPicker"
v-model="styleInfo.backgroundColor"
style="margin-top: 7px;height: 0px"
:predefine="predefineColors"
size="mini"
@change="styleChange"
/>
</div>
</div>
<div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<div
v-if="attrShow('videoLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :link-info="curComponent.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<div
v-if="attrShow('streamMediaLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<div
v-if="attrShow('frameLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;"
>
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :link-info="curComponent.frameLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('date-format')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.data_format')">
<date-format :format-info="curComponent.formatInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('deTabStyle')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.tab_inner_style')">
<tab-style :style-info="styleInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrShow('titlePostion')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.title_position')">
<title-postion :element-type="elementType" :show-vertical="showVertical" :style-info="styleInfo" />
<title-postion
:element-type="elementType"
:show-vertical="showVertical"
:style-info="styleInfo"
/>
</el-tooltip>
</div>
<!--tab 内部组件样式-->
<div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrTabShow('videoLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :attr-position="'tab'" :link-info="curActiveTabInner.videoLinks" />
<VideoLinks
:attr-position="'tab'"
:link-info="curActiveTabInner.videoLinks"
/>
</el-tooltip>
</div>
<div v-if="attrTabShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrTabShow('streamMediaLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :attr-position="'tab'" :link-info="curActiveTabInner.streamMediaLinks" />
<StreamMediaLinks
:attr-position="'tab'"
:link-info="curActiveTabInner.streamMediaLinks"
/>
</el-tooltip>
</div>
<div v-if="attrTabShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div
v-if="attrTabShow('frameLinks')"
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
>
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :attr-position="'tab'" :link-info="curActiveTabInner.frameLinks" />
<FrameLinks
:attr-position="'tab'"
:link-info="curActiveTabInner.frameLinks"
/>
</el-tooltip>
</div>
<div v-if="attrShow('adaptation')" style="width: 100px;margin-top: 2px;margin-right:2px;float: left">
<div
v-if="attrShow('adaptation')"
style="width: 100px;margin-top: 2px;margin-right:2px;float: left"
>
<el-tooltip :content="$t('panel.pic_size')">
<el-select v-model="styleInfo.adaptation" size="mini" @change="styleChange">
<el-select
v-model="styleInfo.adaptation"
size="mini"
@change="styleChange"
>
<el-option
v-for="item in pictureAdaptation"
:key="item.value"

132
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -1,7 +1,11 @@
<template>
<div>
<div class="switch-position">
<el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
<el-radio-group
v-model="mobileLayoutInitStatus"
size="mini"
@change="openMobileLayout"
>
<el-radio-button :label="false">
<span class="icon iconfont icon-icon_pc_outlined icon16_only" />
</el-radio-button>
@ -10,21 +14,38 @@
</el-radio-button>
</el-radio-group>
</div>
<div v-show="editControlButton" class="toolbar">
<div
v-show="editControlButton"
class="toolbar"
>
<span style="float: right;">
<el-button v-if="mobileLayoutStatus" size="mini" @click="editReset">
<el-button
v-if="mobileLayoutStatus"
size="mini"
@click="editReset"
>
{{ $t('commons.reset') }}
</el-button>
<el-button type="primary" size="mini" @click="editSave">
<el-button
type="primary"
size="mini"
@click="editSave"
>
{{ $t('commons.confirm') }}
</el-button>
<el-button size="mini" @click="editCancel">
<el-button
size="mini"
@click="editCancel"
>
{{ $t('commons.cancel') }}
</el-button>
</span>
</div>
<div v-show="!editControlButton" class="toolbar">
<div
v-show="!editControlButton"
class="toolbar"
>
<div class="panel-info-area">
<!--back to panelList-->
<svg-icon
@ -37,17 +58,36 @@
</span>
</div>
<el-tooltip :content="$t('panel.undo') ">
<svg-icon icon-class="icon_undo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="undo" />
<svg-icon
icon-class="icon_undo_outlined"
class="toolbar-icon-active icon16 margin-right20"
@click="undo"
/>
</el-tooltip>
<el-tooltip :content="$t('panel.redo') ">
<svg-icon icon-class="icon_redo_outlined" class="toolbar-icon-active icon16 margin-right20" @click="redo" />
<svg-icon
icon-class="icon_redo_outlined"
class="toolbar-icon-active icon16 margin-right20"
@click="redo"
/>
</el-tooltip>
<el-tooltip :content="$t('panel.fullscreen_preview')">
<svg-icon icon-class="icon_magnify_outlined" class="toolbar-icon-active icon16" @click="clickPreview" />
<svg-icon
icon-class="icon_magnify_outlined"
class="toolbar-icon-active icon16"
@click="clickPreview"
/>
</el-tooltip>
<el-divider style="margin-left: 20px" direction="vertical" />
<el-divider
style="margin-left: 20px"
direction="vertical"
/>
<span class="button_self">
<el-dropdown :hide-on-click="false" trigger="click" placement="bottom-start">
<el-dropdown
:hide-on-click="false"
trigger="click"
placement="bottom-start"
>
<span class="icon iconfont icon-icon-more insert margin-right20">
<span class="icon-font-margin">{{ $t('panel.more') }}</span>
</span>
@ -57,16 +97,25 @@
<span>
<span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
<span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
<svg-icon icon-class="icon_right_outlined" class="icon16 margin-left8" />
<svg-icon
icon-class="icon_right_outlined"
class="icon16 margin-left8"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="auxiliaryMatrixChange(false)">
<span class="text14"> {{ $t('panel.suspension') }} </span>
<i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
<i
v-if="!canvasStyleData.auxiliaryMatrix"
class=" font-active el-icon-check margin-left52"
/>
</el-dropdown-item>
<el-dropdown-item @click.native="auxiliaryMatrixChange(true)">
<span class="text14"> {{ $t('panel.matrix') }} </span>
<i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check margin-left52" />
<i
v-if="canvasStyleData.auxiliaryMatrix"
class=" font-active el-icon-check margin-left52"
/>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -74,7 +123,12 @@
<el-dropdown-item>
<span class="icon iconfont icon-icon_dialpad_outlined icon16" />
<span class="text14 margin-left8">{{ $t('panel.aided_grid') }}</span>
<el-switch v-model="showGridSwitch" :class="[{['grid-active']: showGridSwitch},'margin-left8']" size="mini" @change="showGridChange" />
<el-switch
v-model="showGridSwitch"
:class="[{['grid-active']: showGridSwitch},'margin-left8']"
size="mini"
@change="showGridChange"
/>
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont icon-icon-quicksetting icon16" />
@ -87,14 +141,25 @@
</el-dropdown-menu>
</el-dropdown>
</span>
<span class="icon iconfont icon-icon_effects_outlined insert margin-right20" @click="showPanel">
<span
class="icon iconfont icon-icon_effects_outlined insert margin-right20"
@click="showPanel"
>
<span class="icon-font-margin">{{ $t('panel.panel_style') }}</span>
</span>
<span class="icon iconfont icon-icon_Batch_outlined insert margin-right20" @click="batchOption"><span
<span
class="icon iconfont icon-icon_Batch_outlined insert margin-right20"
@click="batchOption"
><span
class="icon-font-margin"
>{{ $t('panel.batch_opt') }}</span></span>
<span style="float: right;margin-right: 24px">
<el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
<el-button
size="mini"
type="primary"
:disabled="saveButtonDisabled"
@click="save(false)"
>
{{ $t('commons.save') }}
</el-button>
</span>
@ -110,7 +175,10 @@
>
<el-row style="height: 20px">
<el-col :span="4">
<svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
<svg-icon
icon-class="warn-tre"
style="width: 20px;height: 20px;float: right"
/>
</el-col>
<el-col :span="20">
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{
@ -118,10 +186,24 @@
}}</span>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button style="float: left" size="mini" @click="closeNotSave()">{{ $t('panel.do_not_save') }}</el-button>
<el-button size="mini" @click="closePanelVisible=false">{{ $t('panel.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="save(true)">{{ $t('panel.save') }}
<div
slot="footer"
class="dialog-footer"
>
<el-button
style="float: left"
size="mini"
@click="closeNotSave()"
>{{ $t('panel.do_not_save') }}</el-button>
<el-button
size="mini"
@click="closePanelVisible=false"
>{{ $t('panel.cancel') }}</el-button>
<el-button
type="primary"
size="mini"
@click="save(true)"
>{{ $t('panel.save') }}
</el-button>
</div>
</el-dialog>
@ -211,7 +293,7 @@ export default {
this.timer = null
},
methods: {
editPanelInit(){
editPanelInit() {
this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
},
close() {
@ -343,7 +425,7 @@ export default {
_this.timer = setInterval(() => {
if (_this.$store.state.cacheStyleChangeTimes > 0) {
const requestInfo = _this.savePrepare()
const cacheRequest ={
const cacheRequest = {
...this.panelInfo,
...requestInfo
}

48
frontend/src/components/canvas/custom-component/DeFrame.vue
View File

@ -1,19 +1,49 @@
<template>
<el-row class="main-frame">
<div v-if="element.frameLinks.src" class="main-frame">
<iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
<div v-if="editMode==='edit'" class="frame-mask edit-mask">
<div
v-if="element.frameLinks.src"
class="main-frame"
>
<iframe
v-if="frameShow"
id="iframe"
:src="element.frameLinks.src"
scrolling="auto"
frameborder="0"
class="main-frame"
@load="loaded"
@error="onError"
/>
<div
v-if="editMode==='edit'"
class="frame-mask edit-mask"
>
<span style="opacity: 1;">
<span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
</span>
</div>
<!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
<div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
<div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
<div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
<div v-if="screenShot" class="frame-mask" />
<div
v-if="editMode!=='edit'"
class="frame-mask preview-top-mask"
/>
<div
v-if="editMode!=='edit'"
class="frame-mask preview-right-mask"
/>
<div
v-if="editMode!=='edit'"
class="frame-mask preview-left-mask"
/>
<div
v-if="screenShot"
class="frame-mask"
/>
</div>
<div v-else class="info-class">
<div
v-else
class="info-class"
>
{{ $t('panel.web_add_tips') }}
</div>
</el-row>
@ -69,7 +99,7 @@ export default {
},
mounted() {
bus.$on('frameLinksChange-' + this.element.id, this.frameLinksChange)
eventBus.$on('startMoveIn',this.frameLinksChange)
eventBus.$on('startMoveIn', this.frameLinksChange)
},
beforeDestroy() {
bus.$off('frameLinksChange-' + this.element.id, this.frameLinksChange)

5
frontend/src/components/canvas/custom-component/DeRichText.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="rich-main-class" @dblclick="setEdit">
<div
class="rich-main-class"
@dblclick="setEdit"
>
<Editor
v-if="editShow"
:id="tinymceId"

44
frontend/src/components/canvas/custom-component/DeRichTextView.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="rich-main-class" @dblclick="setEdit">
<div
class="rich-main-class"
@dblclick="setEdit"
>
<Editor
v-if="editShow"
:id="tinymceId"
@ -121,23 +124,23 @@ export default {
}
},
myValue(newValue) {
this.initReady&&this.$store.commit('canvasChange')
this.initReady && this.$store.commit('canvasChange')
}
},
mounted() {
this.viewInit()
this.viewInit()
},
beforeDestroy() {
bus.$off('fieldSelect-' + this.element.propValue.viewId)
},
methods: {
viewInit(){
viewInit() {
bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
tinymce.init({})
this.myValue = this.assignment(this.element.propValue.textValue)
bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
this.$nextTick(()=>{
this.initReady=true
this.$nextTick(() => {
this.initReady = true
})
},
initCurFieldsChange() {
@ -154,45 +157,44 @@ export default {
content = content.replace(itm, _this.dataRowNameSelect[ele] !== undefined ? _this.dataRowNameSelect[ele] : '[无法获取字段值]')
})
}
content = content.replace('class="base-selected"','')
content = content.replace('class="base-selected"', '')
this.resetSelect()
return content
},
fieldSelect(field) {
const ed = tinymce.editors[this.tinymceId]
const fieldId = 'changeText-'+uuid.v1()
const value = '<span id="'+fieldId+'"><span class="mceNonEditable" contenteditable="false" data-mce-content="['+field.name +']">[' + field.name + ']</span></span>'
const fieldId = 'changeText-' + uuid.v1()
const value = '<span id="' + fieldId + '"><span class="mceNonEditable" contenteditable="false" data-mce-content="[' + field.name + ']">[' + field.name + ']</span></span>'
const attachValue = '<span id="attachValue">&nbsp;</span>'
ed.insertContent(value)
ed.insertContent(attachValue)
},
onClick(e) {
const edInner = tinymce.get(this.tinymceId);
const node = tinymce.activeEditor.selection.getNode()
this.resetSelect(node)
},
resetSelect(node){
const edInner = tinymce.get(this.tinymceId);
if(edInner.dom){
const nodeArray = edInner.dom.select(".base-selected")
if(nodeArray){
nodeArray.forEach(nodeInner=>{
resetSelect(node) {
const edInner = tinymce.get(this.tinymceId)
if (edInner.dom) {
const nodeArray = edInner.dom.select('.base-selected')
if (nodeArray) {
nodeArray.forEach(nodeInner => {
nodeInner.removeAttribute('class')
})
}
if(node){
if (node) {
const pNode = node.parentElement
if(pNode && pNode.id&& pNode.id.indexOf('changeText')>-1){
const innerId = '#'+pNode.id
if (pNode && pNode.id && pNode.id.indexOf('changeText') > -1) {
const innerId = '#' + pNode.id
const domTest = edInner.dom.select(innerId)[0]
domTest.setAttribute("class",'base-selected')
domTest.setAttribute('class', 'base-selected')
edInner.selection.select(domTest)
}
}
}
},
setEdit() {
if (this.editStatus&&this.canEdit===false) {
if (this.editStatus && this.canEdit === false) {
this.canEdit = true
this.element['editing'] = true
this.myValue = this.element.propValue.textValue

34
frontend/src/components/canvas/custom-component/DeStreamMedia.vue
View File

@ -1,15 +1,37 @@
<template>
<el-row ref="mainPlayer" style="width: 100%;height: 100%">
<div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
<video :ref="'player-'+element.id" class="centered-video" name="centeredVideo" :loop="pOption.loop" :controls="inScreen" muted />
<div v-if="editMode==='edit'" class="stream-mask edit-mask-stream" />
<div v-if="mobileLayoutStatus" class="stream-mask">
<el-row
ref="mainPlayer"
style="width: 100%;height: 100%"
>
<div
v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url"
class="video-container"
>
<video
:ref="'player-'+element.id"
class="centered-video"
name="centeredVideo"
:loop="pOption.loop"
:controls="inScreen"
muted
/>
<div
v-if="editMode==='edit'"
class="stream-mask edit-mask-stream"
/>
<div
v-if="mobileLayoutStatus"
class="stream-mask"
>
<span style="opacity: 0.7;">
<span style="color: lightgray;">{{ $t('panel.stream_mobile_tips') }}</span>
</span>
</div>
</div>
<div v-else class="info-stream-class">
<div
v-else
class="info-stream-class"
>
{{ $t('panel.stream_media_add_tips') }}
</div>
</el-row>

10
frontend/src/components/canvas/custom-component/DeVideo.vue
View File

@ -1,6 +1,9 @@
<template>
<el-row ref="mainPlayer">
<div v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src" class="player">
<div
v-if="element.videoLinks[element.videoLinks.videoType].sources[0].src"
class="player"
>
<video-player
v-if="showVideo"
ref="videoPlayer"
@ -19,7 +22,10 @@
@statechanged="playerStateChanged($event)"
/>
</div>
<div v-else class="info-class">
<div
v-else
class="info-class"
>
{{ $t('panel.video_add_tips') }}
</div>
</el-row>

18
frontend/src/components/canvas/custom-component/Picture.vue
View File

@ -1,8 +1,20 @@
<template>
<div style="overflow: hidden;width: 100%;height: 100%;">
<img v-if="!showLink" :style="imageAdapter" :src="element.propValue">
<a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
<img :style="imageAdapter" :src="element.propValue">
<img
v-if="!showLink"
:style="imageAdapter"
:src="element.propValue"
>
<a
v-if="showLink"
:title="element.hyperlinks.content "
:target="element.hyperlinks.openMode "
:href="element.hyperlinks.content "
>
<img
:style="imageAdapter"
:src="element.propValue"
>
</a>
</div>
</template>

5
frontend/src/components/canvas/custom-component/RectShape.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="rect-shape">
<v-text :prop-value="element.propValue" :element="element" />
<v-text
:prop-value="element.propValue"
:element="element"
/>
</div>
</template>

56
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -18,7 +18,10 @@
:view-id="element.propValue.viewId"
@showViewDetails="openChartDetailsDialog"
/>
<div v-if="requestStatus==='error'" class="chart-error-class">
<div
v-if="requestStatus==='error'"
class="chart-error-class"
>
<div class="chart-error-message-class">
{{ message }},{{ $t('chart.chart_show_error') }}
<br>
@ -110,7 +113,11 @@
@onJumpClick="jumpClick"
/>
<div style="position: absolute;left: 8px;bottom:8px;">
<drill-path :drill-filters="drillFilters" :theme-style="element.commonBackground" @onDrillJump="drillJump" />
<drill-path
:drill-filters="drillFilters"
:theme-style="element.commonBackground"
@onDrillJump="drillJump"
/>
</div>
</div>
</template>
@ -477,7 +484,7 @@ export default {
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams).then(rsp =>{
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
this.active && bus.$emit('current-component-change')
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
@ -494,7 +501,7 @@ export default {
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
viewPropsSave(this.panelInfo.id, updateParams).then(rsp =>{
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
this.active && bus.$emit('current-component-change')
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
@ -660,20 +667,20 @@ export default {
return pre
}, {})
const rowData = chartDetails.data.tableRow[0]
if(chartDetails.type === 'richTextView'){
if (chartDetails.type === 'richTextView') {
let yAxis = []
try {
yAxis = JSON.parse(chartDetails.yaxis)
} catch (err) {
yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis))
}
let yDataeaseNames = []
let yDataeaseNamesCfg = []
const yDataeaseNames = []
const yDataeaseNamesCfg = []
yAxis.forEach(yItem => {
yDataeaseNames.push(yItem.dataeaseName)
yDataeaseNamesCfg[yItem.dataeaseName]=yItem.formatterCfg
yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg
})
this.rowDataFormat(rowData,yDataeaseNames,yDataeaseNamesCfg)
this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg)
}
for (const key in rowData) {
this.dataRowSelect[nameIdMap[key]] = rowData[key]
@ -688,24 +695,23 @@ export default {
})
}
},
rowDataFormat(rowData,yDataeaseNames,yDataeaseNamesCfg) {
rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg) {
for (const key in rowData) {
if(yDataeaseNames.includes(key)){
let formatterCfg = yDataeaseNamesCfg[key]
let value = rowData[key]
if (value === null || value === undefined) {
rowData[key] = '-'
}
if (formatterCfg) {
const v = valueFormatter(value, formatterCfg)
rowData[key] = v.includes('NaN') ? value : v
} else {
const v = valueFormatter(value, formatterItem)
rowData[key] = v.includes('NaN') ? value : v
}
}
if (yDataeaseNames.includes(key)) {
const formatterCfg = yDataeaseNamesCfg[key]
const value = rowData[key]
if (value === null || value === undefined) {
rowData[key] = '-'
}
if (formatterCfg) {
const v = valueFormatter(value, formatterCfg)
rowData[key] = v.includes('NaN') ? value : v
} else {
const v = valueFormatter(value, formatterItem)
rowData[key] = v.includes('NaN') ? value : v
}
}
}
},
viewIdMatch(viewIds, viewId) {
return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)

68
frontend/src/components/canvas/custom-component/UserViewDialog.vue
View File

@ -1,8 +1,21 @@
<template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" :class="isAbsoluteContainer ? 'abs-container' : ''">
<de-main-container v-show="showChartCanvas" class="">
<div id="chartCanvas" class="canvas-class" :style="customStyle">
<div class="canvas-class" :style="commonStyle">
<de-container
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
:class="isAbsoluteContainer ? 'abs-container' : ''"
>
<de-main-container
v-show="showChartCanvas"
class=""
>
<div
id="chartCanvas"
class="canvas-class"
:style="customStyle"
>
<div
class="canvas-class"
:style="commonStyle"
>
<plugin-com
v-if="chart.isPlugin"
:component-name="chart.type + '-view'"
@ -12,17 +25,47 @@
:canvas-style-data="canvasStyleData"
class="chart-class"
/>
<chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
<chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<chart-component-s2 v-else-if="chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
<label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
<table-normal v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'" :chart="chart" class="table-class" />
<chart-component
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
:theme-style="element.commonBackground"
class="chart-class"
:chart="mapChart || chart"
/>
<chart-component-g2
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
class="chart-class"
:chart="chart"
/>
<chart-component-s2
v-else-if="chart.type.includes('table') && renderComponent() === 'antv'"
class="chart-class"
:chart="chart"
/>
<label-normal
v-else-if="chart.type.includes('text')"
:chart="chart"
class="table-class"
/>
<label-normal-text
v-else-if="chart.type === 'label'"
:chart="chart"
class="table-class"
/>
<table-normal
v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'"
:chart="chart"
class="table-class"
/>
</div>
</div>
</de-main-container>
<de-main-container v-show="!showChartCanvas">
<table-normal :enable-scroll="false" :chart="chartTable" :show-summary="false" class="table-class" />
<table-normal
:enable-scroll="false"
:chart="chartTable"
:show-summary="false"
class="table-class"
/>
</de-main-container>
</de-container>
</template>
@ -34,7 +77,6 @@ import TableNormal from '@/views/chart/components/table/TableNormal'
import LabelNormal from '@/views/chart/components/normal/LabelNormal'
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import { mapState } from 'vuex'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import PluginCom from '@/views/system/plugin/PluginCom'
@ -47,7 +89,7 @@ import { deepCopy, exportImg, imgUrlTrans } from '@/components/canvas/utils/util
import { getLinkToken, getToken } from '@/utils/auth'
export default {
name: 'UserViewDialog',
components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
props: {
chart: {
type: Object,

56
frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
View File

@ -1,7 +1,14 @@
<template>
<de-container>
<de-main-container v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'" :style="customStyle" class="full-div">
<div class="canvas-class" :style="commonStyle">
<de-main-container
v-if="chart.type !== 'table-normal' && chart.type !== 'table-info'"
:style="customStyle"
class="full-div"
>
<div
class="canvas-class"
:style="commonStyle"
>
<plugin-com
v-if="chart.isPlugin"
:component-name="chart.type + '-view'"
@ -11,15 +18,40 @@
:canvas-style-data="canvasStyleData"
class="chart-class"
/>
<chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
<chart-component-g2 v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<chart-component-s2 v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<label-normal v-else-if="chart.type.includes('text')" :chart="chart" class="table-class" />
<label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
<chart-component
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
:theme-style="element.commonBackground"
class="chart-class"
:chart="mapChart || chart"
/>
<chart-component-g2
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
class="chart-class"
:chart="chart"
/>
<chart-component-s2
v-else-if="chart.type === 'table-pivot' && renderComponent() === 'antv'"
class="chart-class"
:chart="chart"
/>
<label-normal
v-else-if="chart.type.includes('text')"
:chart="chart"
class="table-class"
/>
<label-normal-text
v-else-if="chart.type === 'label'"
:chart="chart"
class="table-class"
/>
</div>
</de-main-container>
<de-main-container v-else>
<table-normal :chart="chartTable" :show-summary="false" class="table-class" />
<table-normal
:chart="chartTable"
:show-summary="false"
class="table-class"
/>
</de-main-container>
</de-container>
</template>
@ -50,7 +82,7 @@ export default {
type: Object,
default: null
}
},
data() {
return {
@ -59,9 +91,6 @@ export default {
lastMapChart: null
}
},
created() {
this.element = deepCopy(this.curComponent)
},
computed: {
customStyle() {
let style = {
@ -146,6 +175,9 @@ export default {
return null
}
},
created() {
this.element = deepCopy(this.curComponent)
},
methods: {
renderComponent() {

17
frontend/src/components/canvas/custom-component/VText.vue
View File

@ -1,5 +1,10 @@
<template>
<div v-if="editStatus" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">
<div
v-if="editStatus"
class="v-text"
@keydown="handleKeydown"
@keyup="handleKeyup"
>
<!-- tabindex >= 0 使得双击时聚集该元素 -->
<div
v-if="canEdit"
@ -26,8 +31,14 @@
v-html="element.propValue"
/>
</div>
<div v-else class="v-text">
<div :style="{ verticalAlign: element.style.verticalAlign }" v-html="textInfo" />
<div
v-else
class="v-text"
>
<div
:style="{ verticalAlign: element.style.verticalAlign }"
v-html="textInfo"
/>
</div>
</template>

1
frontend/src/components/canvas/custom-component/index.js
View File

@ -12,6 +12,7 @@ import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia'
import DeRichText from '@/components/canvas/custom-component/DeRichText'
Vue.component('DeRichText', DeRichText)
Vue.component('DeStreamMedia', DeStreamMedia)
// eslint-disable-next-line
Vue.component('Picture', Picture)
Vue.component('VText', VText)
Vue.component('VButton', VButton)

16
frontend/src/components/canvas/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="home">
<Toolbar/>
<Toolbar />
<main>
<section class="center">
<div
@ -10,7 +10,7 @@
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor/>
<Editor />
</div>
</section>
@ -22,12 +22,12 @@
import Editor from '@/components/Editor/index'
import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import Toolbar from '@/components/Toolbar'
import {deepCopy} from '@/utils/utils'
import {mapState} from 'vuex'
import { deepCopy } from '@/utils/utils'
import { mapState } from 'vuex'
import generateID from '@/utils/generateID'
import { uuid } from 'vue-uuid'
export default {
components: {Editor, Toolbar},
components: { Editor, Toolbar },
data() {
return {
activeName: 'attr',
@ -80,7 +80,7 @@ export default {
component.style.top = e.offsetY
component.style.left = e.offsetX
component.id = generateID()
this.$store.commit('addComponent', {component})
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
},
@ -95,7 +95,7 @@ export default {
deselectCurComponent(e) {
if (!this.isClickComponent) {
this.$store.commit('setCurComponent', {component: null, index: null})
this.$store.commit('setCurComponent', { component: null, index: null })
}
// 0 左击 1 滚轮 2 右击

2
frontend/src/components/canvas/store/copy.js
View File

@ -5,7 +5,7 @@ import { deepCopy } from '@/components/canvas/utils/utils'
import { chartBatchCopy, chartCopy } from '@/api/chart/chart'
import { uuid } from 'vue-uuid'
import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
import Vue from "vue";
import Vue from 'vue'
export default {
state: {

2
frontend/src/components/canvas/store/layer.js
View File

@ -1,4 +1,4 @@
import { swap, toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
import { toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
import toast from '@/components/canvas/utils/toast'
export default {

Some files were not shown because too many files have changed in this diff Show More