qianlishi 3 years ago
parent 4a6cd7a282
commit 04472426f2

@ -1,6 +1,21 @@
<template>
<el-dialog class="tree_dialog" title="为角色分配权限" width="60%" :close-on-click-modal="false" center :visible.sync="visib" :before-close="closeDialog">
<el-tree ref="roleTree" :data="treeData" show-checkbox node-key="id" default-expand-all :default-checked-keys="checkedKeys" />
<el-dialog
class="tree_dialog"
title="为角色分配权限"
width="60%"
:close-on-click-modal="false"
center
:visible.sync="visib"
:before-close="closeDialog"
>
<el-tree
ref="roleTree"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="checkedKeys"
/>
<div slot="footer" style="text-align: center">
<el-button type="primary" plain @click="saveTreeData"></el-button>
<el-button type="danger" plain @click="closeDialog"></el-button>
@ -8,63 +23,63 @@
</el-dialog>
</template>
<script>
import { accessRoleAuthorityTree, saveAuthorityTree } from '@/api/accessRole'
import { accessRoleAuthorityTree, saveAuthorityTree } from "@/api/accessRole";
export default {
props: {
visib: {
required: true,
type: Boolean,
default: false,
default: false
},
roleCode: {
required: true,
type: String,
default: () => {
return ''
},
},
return "";
}
}
},
data() {
return {
checkedKeys: [], // keys
treeData: [], //
}
treeData: [] //
};
},
watch: {
visib(val) {
if (val) {
//
console.log(1)
this.getTreeData()
console.log(1);
this.getTreeData();
}
},
}
},
created() {},
methods: {
//
async getTreeData() {
const { code, data } = await accessRoleAuthorityTree(this.roleCode)
if (code != '200') return
this.treeData = data.treeData
this.checkedKeys = data.checkedKeys
const { code, data } = await accessRoleAuthorityTree(this.roleCode);
if (code != "200") return;
this.treeData = data.treeData;
this.checkedKeys = data.checkedKeys;
},
async saveTreeData() {
var params = {
let params = {
roleCode: this.roleCode,
authorityList: this.$refs.roleTree.getCheckedKeys(true),
}
const { code } = await saveAuthorityTree(params)
if (code != '200') return
this.closeDialog()
authorityList: this.$refs.roleTree.getCheckedKeys(true)
};
const { code } = await saveAuthorityTree(params);
if (code != "200") return;
this.closeDialog();
},
//
closeDialog() {
this.treeData = []
this.checkedKeys = []
this.$emit('handleClose')
},
},
}
this.treeData = [];
this.checkedKeys = [];
this.$emit("handleClose");
}
}
};
</script>

@ -1,6 +1,29 @@
<!--
* @Descripttion:
* @version:
* @Author: qianlishi
* @Date: 2021-12-11 14:48:27
* @LastEditors: qianlishi
* @LastEditTime: 2021-12-13 10:22:51
-->
<template>
<el-dialog class="tree_dialog" title="为用户分配角色" width="60%" :close-on-click-modal="false" center :visible.sync="visib" :before-close="closeDialog">
<el-tree ref="roleTree" :data="treeData" show-checkbox node-key="id" default-expand-all :default-checked-keys="checkedKeys" />
<el-dialog
class="tree_dialog"
title="为用户分配角色"
width="60%"
:close-on-click-modal="false"
center
:visible.sync="visib"
:before-close="closeDialog"
>
<el-tree
ref="roleTree"
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="checkedKeys"
/>
<div slot="footer" style="text-align: center">
<el-button type="primary" plain @click="saveTreeData"></el-button>
<el-button type="danger" plain @click="closeDialog"></el-button>
@ -8,63 +31,63 @@
</el-dialog>
</template>
<script>
import { getRoleTree, saveRoleTree } from '@/api/accessUser'
import { getRoleTree, saveRoleTree } from "@/api/accessUser";
export default {
props: {
visib: {
required: true,
type: Boolean,
default: false,
default: false
},
loginName: {
required: true,
type: String,
default: () => {
return ''
},
},
return "";
}
}
},
data() {
return {
checkedKeys: [], // keys
treeData: [], //
}
treeData: [] //
};
},
watch: {
visib(val) {
if (val) {
//
console.log(1)
this.getTreeData()
console.log(1);
this.getTreeData();
}
},
}
},
created() {},
methods: {
//
async getTreeData() {
const { code, data } = await getRoleTree(this.loginName)
if (code != '200') return
this.treeData = data.treeData
this.checkedKeys = data.checkedKeys
const { code, data } = await getRoleTree(this.loginName);
if (code != "200") return;
this.treeData = data.treeData;
this.checkedKeys = data.checkedKeys;
},
async saveTreeData() {
var params = {
let params = {
loginName: this.loginName,
roleCodeList: this.$refs.roleTree.getCheckedKeys(true),
}
const { code } = await saveRoleTree(params)
if (code != '200') return
this.closeDialog()
roleCodeList: this.$refs.roleTree.getCheckedKeys(true)
};
const { code } = await saveRoleTree(params);
if (code != "200") return;
this.closeDialog();
},
//
closeDialog() {
this.treeData = []
this.checkedKeys = []
this.$emit('handleClose')
},
},
}
this.treeData = [];
this.checkedKeys = [];
this.$emit("handleClose");
}
}
};
</script>

@ -1,13 +1,28 @@
<template>
<anji-crud ref="listPage" :option="crudOption">
<template v-slot:buttonLeftOnTable>
<el-button type="primary" icon="el-icon-edit" @click="dictRefresh" v-permission="'dictManage:fresh'">
<el-button
type="primary"
icon="el-icon-edit"
@click="dictRefresh"
v-permission="'dictManage:fresh'"
>刷新字典项
</el-button>
</template>
<template slot="rowButton" slot-scope="props">
<el-button type="text" @click="editItem(props)" v-permission="'dictItemManage:query'"></el-button>
<el-button type="text" @click="itemRefresh(props)" v-permission="'dictManage:fresh'"></el-button>
<el-button
type="text"
@click="editItem(props)"
v-permission="'dictItemManage:query'"
>编辑字典项</el-button
>
<el-button
type="text"
@click="itemRefresh(props)"
v-permission="'dictManage:fresh'"
>刷新字典项</el-button
>
</template>
<!--自定义的卡片插槽将在编辑详情页面出现在底部新卡片-->
@ -29,184 +44,192 @@
</anji-crud>
</template>
<script>
import {dictDetail, getDictList, dictAdd, dictEdit, dictsDelect, freshDict} from '@/api/dict'
import {
dictDetail,
getDictList,
dictAdd,
dictEdit,
dictsDelect,
freshDict
} from "@/api/dict";
export default {
name: 'Dict',
name: "Dict",
components: {
anjiCrud: require('@/components/AnjiPlus/anji-crud/anji-crud').default,
anjiCrud: require("@/components/AnjiPlus/anji-crud/anji-crud").default
},
data() {
const that = this
const that = this;
return {
crudOption: {
// 使
title: '数据字典',
title: "数据字典",
//
labelWidth: '120px',
labelWidth: "120px",
//
queryFormFields: [
{
inputType: 'input',
label: '字典名称',
field: 'dictName',
inputType: "input",
label: "字典名称",
field: "dictName"
},
{
inputType: 'input',
label: '字典编码',
field: 'dictCode',
},
inputType: "input",
label: "字典编码",
field: "dictCode"
}
],
queryFormChange(queryForm, fileName, fileval) {
if (queryForm['project']) {
that.$store.commit('user/SET_PROJECT', queryForm['project'])
if (queryForm["project"]) {
that.$store.commit("user/SET_PROJECT", queryForm["project"]);
}
},
//
buttons: {
query: {
api: getDictList,
permission: 'dictManage:query',
permission: "dictManage:query"
},
queryByPrimarykey: {
api: dictDetail,
permission: 'dictManage:query',
permission: "dictManage:query"
},
add: {
api: dictAdd,
permission: 'dictManage:insert',
permission: "dictManage:insert"
},
delete: {
api: dictsDelect,
permission: 'dictManage:delete',
permission: "dictManage:delete"
},
edit: {
api: dictEdit,
permission: 'dictManage:update',
permission: "dictManage:update"
},
//
customButton: {
operationWidth: 240, // row
},
operationWidth: 240 // row
}
},
//
columns: [
{
label: '',
field: 'id',
label: "",
field: "id",
primaryKey: true, // ,
tableHide: true, //
editHide: true, //
editHide: true //
},
{
label: '字典名称', //
placeholder: '',
field: 'dictName',
editField: 'dictName',
inputType: 'input',
label: "字典名称", //
placeholder: "",
field: "dictName",
editField: "dictName",
inputType: "input",
rules: [
{required: true, message: '字典名称不能为空', trigger: 'blur'},
{min: 1, max: 64, message: '不超过64个字符', trigger: 'blur'},
{ required: true, message: "字典名称不能为空", trigger: "blur" },
{ min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
],
disabled: false,
disabled: false
},
{
label: '字典编码', //
placeholder: '',
field: 'dictCode',
editField: 'dictCode',
inputType: 'input',
label: "字典编码", //
placeholder: "",
field: "dictCode",
editField: "dictCode",
inputType: "input",
rules: [
{required: true, message: '字典编码不能为空', trigger: 'blur'},
{min: 1, max: 64, message: '不超过64个字符', trigger: 'blur'},
{ required: true, message: "字典编码不能为空", trigger: "blur" },
{ min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
],
disabled: 'disableOnEdit',
disabled: "disableOnEdit"
},
{
label: '描述', //
placeholder: '',
field: 'remark',
editField: 'remark',
inputType: 'input',
rules: [{min: 1, max: 64, message: '不超过64个字符', trigger: 'blur'}],
disabled: false,
label: "描述", //
placeholder: "",
field: "remark",
editField: "remark",
inputType: "input",
rules: [
{ min: 1, max: 64, message: "不超过64个字符", trigger: "blur" }
],
disabled: false
},
{
label: '创建时间',
placeholder: '',
field: 'createTime',
editField: 'createTime',
inputType: 'input',
label: "创建时间",
placeholder: "",
field: "createTime",
editField: "createTime",
inputType: "input",
disabled: false,
editHide: true, //
editHide: true //
},
{
label: '创建人',
placeholder: '',
field: 'createBy',
editField: 'createBy',
inputType: 'input',
label: "创建人",
placeholder: "",
field: "createBy",
editField: "createBy",
inputType: "input",
disabled: false,
editHide: true, //
editHide: true //
},
{
label: '更新时间',
placeholder: '',
field: 'updateTime',
editField: 'updateTime',
inputType: 'input',
label: "更新时间",
placeholder: "",
field: "updateTime",
editField: "updateTime",
inputType: "input",
disabled: false,
editHide: true, //
editHide: true //
},
{
label: '更新人',
placeholder: '',
field: 'updateBy',
editField: 'updateBy',
inputType: 'input',
label: "更新人",
placeholder: "",
field: "updateBy",
editField: "updateBy",
inputType: "input",
disabled: false,
editHide: true, //
},
],
},
}
editHide: true //
}
]
}
};
},
created() {
},
created() {},
methods: {
//
async dictRefresh() {
var checkRecords = this.$refs.listPage.checkRecords
var dictCodes = []
let checkRecords = this.$refs.listPage.checkRecords;
let dictCodes = [];
if (checkRecords.length > 0) {
dictCodes = checkRecords.map((item) => item.dictCode)
dictCodes = checkRecords.map(item => item.dictCode);
}
const {code} = await freshDict(dictCodes)
if (code != '200') return
this.$message.success('刷新成功')
const { code } = await freshDict(dictCodes);
if (code != "200") return;
this.$message.success("刷新成功");
},
//
async itemRefresh(val) {
const selectedList = val.msg
let dictCodes = []
const selectedList = val.msg;
let dictCodes = [];
if (selectedList.length > 0) {
dictCodes = selectedList.map((item) => item.dictCode)
dictCodes = selectedList.map(item => item.dictCode);
}
const {code} = await freshDict(dictCodes)
if (code != '200') return
this.$message.success('刷新成功')
const { code } = await freshDict(dictCodes);
if (code != "200") return;
this.$message.success("刷新成功");
},
//
editItem(val) {
this.$router.push({
path: '/system/dictItem',
path: "/system/dictItem",
query: {
dictCode: val.msg.dictCode,
project: this.$store.state.user.project,
},
})
},
},
}
project: this.$store.state.user.project
}
});
}
}
};
</script>

@ -239,7 +239,7 @@ export default {
});
},
copyToClip(content, message) {
var aux = document.createElement("input");
let aux = document.createElement("input");
aux.setAttribute("value", content);
document.body.appendChild(aux);
aux.select();

@ -1,27 +1,24 @@
<template>
<div>
<el-menu class="navbar"
mode="horizontal">
<hamburger :toggle-click="toggleSideBar"
:is-active="sidebar.opened"
class="hamburger-container" />
<el-menu class="navbar" mode="horizontal">
<hamburger
:toggle-click="toggleSideBar"
:is-active="sidebar.opened"
class="hamburger-container"
/>
<breadcrumb />
<el-dropdown class="avatar-container"
trigger="click">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<i class="icon iconfont iconyonghu user" />
<span class="user-name">{{ operatorText }}</span>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown"
class="user-dropdown">
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item divided>
<span style="display:block;"
@click="updatePassword">修改密码</span>
<span style="display:block;" @click="updatePassword"></span>
</el-dropdown-item>
<el-dropdown-item divided>
<span style="display:block;"
@click="logout">注销登录</span>
<span style="display:block;" @click="logout"></span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -31,152 +28,174 @@
title="修改密码"
:visible.sync="wordVisible"
width="40%"
:close-on-click-modal='false'
:close-on-click-modal="false"
top="20vh"
class="password-box"
>
<el-form ref="form" :model="form" label-width="100px" :rules="rules" :close-on-click-modal="false">
<el-form
ref="form"
:model="form"
label-width="100px"
:rules="rules"
:close-on-click-modal="false"
>
<el-form-item label="原密码" prop="oldPassword">
<el-input v-model.trim="form.oldPassword" type="password" autocomplete="off"></el-input>
<el-input
v-model.trim="form.oldPassword"
type="password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="新密码" prop="password">
<el-input v-model.trim="form.password" type="password" autocomplete="off"></el-input>
<el-input
v-model.trim="form.password"
type="password"
autocomplete="off"
></el-input>
<!-- <span class="password-tips"><i class="el-icon-warning-outline"> 密码至少8位,切包含大写小写字母数字特殊字符中的3种</i></span> -->
</el-form-item>
<el-form-item label="确认新密码" prop="confirmPassword">
<el-input v-model.trim="form.confirmPassword" type="password" autocomplete="off"></el-input>
<el-input
v-model.trim="form.confirmPassword"
type="password"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="wordVisible = false"> </el-button>
<el-button type="primary" @click="confrimUpdate"> </el-button>
</span>
<el-button @click="wordVisible = false"> </el-button>
<el-button type="primary" @click="confrimUpdate"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getStorageItem } from '@/utils/storage'
import { reqUpdatePassword } from '@/api/login'
import { transPsw } from '@/utils/encrypted'
import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import { getStorageItem } from "@/utils/storage";
import { reqUpdatePassword } from "@/api/login";
import { transPsw } from "@/utils/encrypted";
export default {
data () {
data() {
//
var validatePass3 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
let validatePass3 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'))
callback(new Error("两次输入密码不一致!"));
} else if (value.length < 6 || value.length > 20) {
callback(new Error('密码长度需要再6-20之间!'));
callback(new Error("密码长度需要再6-20之间!"));
} else {
callback();
}
}
};
const validatePass = (rule, value, callback) => {
if (!/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/.test(value)) {
callback(new Error('请按要求输入密码'))
} else {
callback()
}
if (
!/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/.test(
value
)
) {
callback(new Error("请按要求输入密码"));
} else {
callback();
}
};
const validateOldPass = (rule, value, callback) => {
if (value.length < 6 || value.length > 30) {
callback(new Error('请输入原密码'))
callback(new Error("请输入原密码"));
} else {
callback()
callback();
}
}
};
return {
wordVisible: false, //
form: {
oldPassword: '',
password: '',
confirmPassword: '',
oldPassword: "",
password: "",
confirmPassword: ""
},
rules: {
oldPassword: [
{ required: true, validator: validateOldPass, trigger: 'blur' },
{ required: true, validator: validateOldPass, trigger: "blur" }
],
password: [
{ required: true, message: '请选择新密码', trigger: 'blur' },
{ required: true, message: "请选择新密码", trigger: "blur" }
],
confirmPassword: [
{ required: true, validator: validatePass3, trigger: 'blur' },
],
},
}
{ required: true, validator: validatePass3, trigger: "blur" }
]
}
};
},
components: {
Breadcrumb,
Hamburger,
Hamburger
},
computed: {
...mapGetters(['sidebar']),
...mapGetters(["sidebar"])
},
created () { },
created() {},
methods: {
toggleSideBar () {
this.$store.dispatch('ToggleSideBar')
toggleSideBar() {
this.$store.dispatch("ToggleSideBar");
},
logout () {
this.$confirm('确定要退出吗', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
logout() {
this.$confirm("确定要退出吗", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
sessionStorage.clear()
localStorage.clear()
this.$router.push('/login')
})
sessionStorage.clear();
localStorage.clear();
this.$router.push("/login");
});
},
//
updatePassword () {
this.wordVisible = true
updatePassword() {
this.wordVisible = true;
this.$nextTick(() => {
this.$refs.form && this.$refs.form.resetFields()
})
this.$refs.form && this.$refs.form.resetFields();
});
},
//
confrimUpdate () {
this.$refs.form.validate(async (valid) => {
confrimUpdate() {
this.$refs.form.validate(async valid => {
if (valid) {
const {oldPassword, password, confirmPassword} = this.form
const { oldPassword, password, confirmPassword } = this.form;
let data = {
oldPassword: transPsw(oldPassword),
password: transPsw(password),
confirmPassword: transPsw(confirmPassword),
}
confirmPassword: transPsw(confirmPassword)
};
const { code } = await reqUpdatePassword(data);
if (code != '200') return
this.wordVisible = false
this.$message.success('修改密码成功,请重新登录')
sessionStorage.clear()
localStorage.clear()
this.$router.push('/login')
if (code != "200") return;
this.wordVisible = false;
this.$message.success("修改密码成功,请重新登录");
sessionStorage.clear();
localStorage.clear();
this.$router.push("/login");
} else {
return false
return false;
}
})
});
},
helpCenter () {
let helpCategory = getStorageItem('helpCategory')
helpCenter() {
let helpCategory = getStorageItem("helpCategory");
this.$router.push({
path: '/helpCenList/list',
path: "/helpCenList/list",
query: {
id: 0,
val: helpCategory[0].value,
title: helpCategory[0].label,
},
})
},
},
}
title: helpCategory[0].label
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

@ -42,8 +42,8 @@ export default {
},
methods: {
getImages(el) {
var file = el.target.files[0];
var type = file.type.split("/")[0];
let file = el.target.files[0];
let type = file.type.split("/")[0];
if (type === "image") {
this.upload(file);
} else {
@ -51,9 +51,9 @@ export default {
}
},
upload(imgUrl) {
var that = this;
let that = this;
console.log(that.headers);
var formdata = new FormData();
let formdata = new FormData();
formdata.append("file", imgUrl);
axios
.post(this.requestUrl, formdata, {

@ -346,8 +346,8 @@ export default {
}
this.$emit("onChanged", this.formData);
// key
for (var i = 0; i < this.options.length; i++) {
var item = this.options[i];
for (let i = 0; i < this.options.length; i++) {
let item = this.options[i];
if (item.relactiveDom == key) {
this.inputShow[item.name] = val == item.relactiveDomValue;
this.inputShow = Object.assign({}, this.inputShow);

@ -374,8 +374,8 @@ export default {
};
},
computed: {
step () {
return Number(100 / (this.bigscreenScaleInWorkbench * 100))
step() {
return Number(100 / (this.bigscreenScaleInWorkbench * 100));
},
headers() {
return {
@ -384,14 +384,14 @@ export default {
},
//
middleWidth() {
var widthLeftAndRight = 0;
let widthLeftAndRight = 0;
if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools; //
}
widthLeftAndRight += this.widthLeftForToolsHideButton; //
widthLeftAndRight += this.widthLeftForOptions; //
var middleWidth = this.bodyWidth - widthLeftAndRight;
let middleWidth = this.bodyWidth - widthLeftAndRight;
return middleWidth;
},
middleHeight() {
@ -399,9 +399,9 @@ export default {
},
//
bigscreenScaleInWorkbench() {
var widthScale =
let widthScale =
(this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth;
var heightScale =
let heightScale =
(this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight;
return Math.min(widthScale, heightScale);
},
@ -484,7 +484,7 @@ export default {
const widgets = data.dashboard ? data.dashboard.widgets : [];
const widgetsData = [];
for (let i = 0; i < widgets.length; i++) {
var obj = {};
let obj = {};
obj.type = widgets[i].type;
obj.value = {
setup: widgets[i].value.setup,
@ -561,7 +561,7 @@ export default {
},
//
viewScreen() {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: this.$route.query.reportCode }
});
@ -579,7 +579,7 @@ export default {
const that = this;
const type = res.type;
if (type == "application/json") {
var reader = new FileReader();
let reader = new FileReader();
reader.readAsText(res, "utf-8");
reader.onload = function() {
const data = JSON.parse(reader.result);
@ -633,23 +633,23 @@ export default {
//
widgetOnDragged(evt, widgetCode) {
var widgetType = widgetCode;
let widgetType = widgetCode;
//
var eventX = evt.originalEvent.clientX; // x
var eventY = evt.originalEvent.clientY; // y
let eventX = evt.originalEvent.clientX; // x
let eventY = evt.originalEvent.clientY; // y
var workbenchPosition = this.getDomTopLeftById("workbench");
var widgetTopInWorkbench = eventY - workbenchPosition.top;
var widgetLeftInWorkbench = eventX - workbenchPosition.left;
let workbenchPosition = this.getDomTopLeftById("workbench");
let widgetTopInWorkbench = eventY - workbenchPosition.top;
let widgetLeftInWorkbench = eventX - workbenchPosition.left;
// x y
var x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench;
var y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench;
let x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench;
let y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench;
//
var tool = getToolByCode(widgetType);
var widgetJson = {
let tool = getToolByCode(widgetType);
let widgetJson = {
type: widgetType,
value: {
setup: {},

@ -4,7 +4,7 @@
* @Author: qianlishi
* @Date: 2021-08-29 06:43:07
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 08:00:59
* @LastEditTime: 2021-12-13 10:22:37
*/
import { widgetTool } from "./main"
const screenConfig = {
@ -76,7 +76,7 @@ const getToolByCode = function (code) {
return screenConfig
}
// 获取组件
var item = widgetTools.find(function (item, index, arrs) {
let item = widgetTools.find(function (item, index, arrs) {
return item.code === code
})
return item

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
<v-chart :options="options" autoresize />
</div>
</template>
<script>
@ -8,42 +8,41 @@ import echarts from "echarts";
import "../../../../../../../node_modules/echarts/map/js/china.js";
//https://www.makeapie.com/editor.html?c=x2yaz6dfRw
//https://www.makeapie.com/editor.html?c=xMpGBbTEKU
var geoCoordMap = {
'台湾': [121.5135, 25.0308],
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
let geoCoordMap = {
台湾: [121.5135, 25.0308],
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891]
};
var data = [
let data = [
{
name: "南海诸岛",
value: 1
@ -183,12 +182,12 @@ var data = [
{
name: "澳门",
value: 9
},
}
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
let convertData = function(data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
@ -198,9 +197,9 @@ var convertData = function (data) {
}
return res;
};
var max = 6000,
let max = 6000,
min = 10;
var maxSize4Pin = 100,
let maxSize4Pin = 100,
minSize4Pin = 20;
export default {
@ -215,16 +214,28 @@ export default {
//backgroundColor: '#0F1C3C',
tooltip: {
show: true,
formatter: function (params) {
formatter: function(params) {
if (params.value.length > 1) {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
return (
"&nbsp;&nbsp;" +
params.name +
"&nbsp;&nbsp;&nbsp;" +
params.value[2] +
"&nbsp;&nbsp;"
);
} else {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
return (
"&nbsp;&nbsp;" +
params.name +
"&nbsp;&nbsp;&nbsp;" +
params.value +
"&nbsp;&nbsp;"
);
}
},
}
},
geo: {
map: 'china',
map: "china",
show: true,
roam: false,
label: {
@ -235,15 +246,25 @@ export default {
layoutSize: "80%",
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00F6FF'
}, {
offset: 1,
color: '#53D9FF'
}], false),
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00F6FF"
},
{
offset: 1,
color: "#53D9FF"
}
],
false
),
borderWidth: 3,
shadowColor: 'rgba(10,76,139,1)',
shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0,
shadowBlur: 60
}
@ -251,19 +272,20 @@ export default {
},
series: [
{
type: 'map',
map: 'china',
type: "map",
map: "china",
aspectScale: 0.75,
label: {
normal: {//
position: 'right',
normal: {
//
position: "right",
show: true,
color: '#53D9FF',
color: "#53D9FF",
fontSize: 20
},
emphasis: {
show: true,
},
show: true
}
},
itemStyle: {
normal: {
@ -273,16 +295,19 @@ export default {
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0%
}, {
offset: 1,
color: '#061E3D' // 100%
}],
colorStops: [
{
offset: 0,
color: "#073684" // 0%
},
{
offset: 1,
color: "#061E3D" // 100%
}
]
},
borderColor: '#215495',
borderWidth: 1,
borderColor: "#215495",
borderWidth: 1
},
//
emphasis: {
@ -291,81 +316,93 @@ export default {
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0%
}, {
offset: 1,
color: '#2B91B7' // 100%
}],
},
colorStops: [
{
offset: 0,
color: "#073684" // 0%
},
{
offset: 1,
color: "#2B91B7" // 100%
}
]
}
}
},
data: data,
data: data
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
type: "effectScatter",
coordinateSystem: "geo",
rippleEffect: {
brushType: 'stroke'
brushType: "stroke"
},
showEffectOn: 'render',
showEffectOn: "render",
itemStyle: {
normal: {
//
color: {
type: 'radial',
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'rgba(5,80,151,0.2)'
}, {
offset: 0.8,
color: 'rgba(5,80,151,0.8)'
}, {
offset: 1,
color: 'rgba(0,108,255,0.7)'
}],
colorStops: [
{
offset: 0,
color: "rgba(5,80,151,0.2)"
},
{
offset: 0.8,
color: "rgba(5,80,151,0.8)"
},
{
offset: 1,
color: "rgba(0,108,255,0.7)"
}
],
global: false
},
}
}
},
label: {
normal: {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'inside',
formatter: function (para) {
return '{cnNum|' + para.data.value[2] + '}'
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function(para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: 13,
color: '#D4EEFF',
color: "#D4EEFF"
}
}
},
}
},
symbol: 'circle',
symbolSize: function (val) {
symbol: "circle",
symbolSize: function(val) {
if (val[2] == 0) {
return 0;
}
;
return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2;
return (
((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] +
(maxSize4Pin -
((maxSize4Pin - minSize4Pin) / (max - min)) * max) *
1.2
);
},
data: convertData(data),
zlevel: 1,
}]
zlevel: 1
}
]
},
optionsStyle: {}, //
optionsData: {}, //
optionsCollapse: {}, //
optionsSetup: {}
}
};
},
computed: {
styleObj() {
@ -430,37 +467,40 @@ export default {
},
setOptionTextValue() {
const optionsSetup = this.optionsSetup;
const label = this.options.series[0]['label'];
const label = this.options.series[0]["label"];
const normal = {
position: 'right',
position: "right",
show: true,
color: optionsSetup.fontTextColor,
fontSize: optionsSetup.fontTextSize,
fontWeight: optionsSetup.fontTextWeight,
fontWeight: optionsSetup.fontTextWeight
};
label['normal'] = normal;
label["normal"] = normal;
},
setOptionMapBlocak() {
const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[0]['itemStyle'];
const itemStyle = this.options.series[0]["itemStyle"];
const normal = {
//
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
//
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: optionsSetup.font0PreColor // 0%
}, {
},
{
offset: 1,
color: optionsSetup.font100PreColor // 100%
}],
},
borderColor: '#215495',
borderWidth: 1,
};
}
]
},
borderColor: "#215495",
borderWidth: 1
};
//
const emphasis = {
areaColor: {
@ -468,55 +508,55 @@ export default {
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#073684' // 0%
}, {
offset: 1,
color: optionsSetup.fontHighlightColor // 100%
}],
},
colorStops: [
{
offset: 0,
color: "#073684" // 0%
},
{
offset: 1,
color: optionsSetup.fontHighlightColor // 100%
}
]
}
};
itemStyle['normal'] = normal;
itemStyle['emphasis'] = emphasis;
itemStyle["normal"] = normal;
itemStyle["emphasis"] = emphasis;
},
setOptionAirSize() {
maxSize4Pin = this.optionsSetup.fontmaxSize4Pin
minSize4Pin = this.optionsSetup.fontminSize4Pin
maxSize4Pin = this.optionsSetup.fontmaxSize4Pin;
minSize4Pin = this.optionsSetup.fontminSize4Pin;
},
//
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
);
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
this.options.series[0]['data'] = val;
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup;
const label = this.options.series[1]['label'];
const label = this.options.series[1]["label"];
const normal = {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'inside',
formatter: function (para) {
return '{cnNum|' + para.data.value[2] + '}'
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function(para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight,
fontWeight: optionsSetup.fontDataWeight
}
}
};
const data = convertData(val);
this.options.series[1]['data']=data
label['normal'] = normal
this.options.series[1]["data"] = data;
label["normal"] = normal;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@ -536,28 +576,28 @@ export default {
});
},
renderingFn(val) {
this.options.series[0]['data'] = val;
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup;
const label = this.options.series[1]['label'];
const label = this.options.series[1]["label"];
const normal = {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'inside',
formatter: function (para) {
return '{cnNum|' + para.data.value[2] + '}'
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function(para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight,
fontWeight: optionsSetup.fontDataWeight
}
}
};
const data = convertData(val);
this.options.series[1]['data']=data
label['normal'] = normal
this.options.series[1]["data"] = data;
label["normal"] = normal;
}
}
};

@ -1,13 +1,13 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
<v-chart :options="options" autoresize />
</div>
</template>
<script>
var per = 60;
let per = 60;
export default {
name: "widgetPiePercentageChart",//https://www.makeapie.com/editor.html?c=xFkzKG-bpl
name: "widgetPiePercentageChart", //https://www.makeapie.com/editor.html?c=xFkzKG-bpl
components: {},
props: {
value: Object,
@ -18,199 +18,204 @@ export default {
angle: 0,
options: {
title: {
text: '{nums|' + per + '}{percent|%}',
x: 'center',
y: 'center',
text: "{nums|" + per + "}{percent|%}",
x: "center",
y: "center",
textStyle: {
rich: {
nums: {
fontSize: 60,
color: '#29EEF3',
color: "#29EEF3"
},
percent: {
fontSize: 30,
color: '#29EEF3',
},
},
},
color: "#29EEF3"
}
}
}
},
legend: {
type: 'plain',
orient: 'vertical',
type: "plain",
orient: "vertical",
right: 0,
top: '10%',
align: 'auto',
data: [{
name: '1',
icon: "circle"
}, {
name: '2',
icon: "circle"
}, {
name: '3',
icon: "circle"
}, {
name: '4',
icon: "circle"
}],
top: "10%",
align: "auto",
data: [
{
name: "1",
icon: "circle"
},
{
name: "2",
icon: "circle"
},
{
name: "3",
icon: "circle"
},
{
name: "4",
icon: "circle"
}
],
textStyle: {
color: 'white',
color: "white",
fontSize: 16,
padding: [10, 1, 10, 0],
padding: [10, 1, 10, 0]
},
selectedMode: false,
selectedMode: false
},
series: [
{
//name: '1',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
return {
type: 'arc',
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((0 + this.angle) * Math.PI) / 180,
endAngle: ((90 + this.angle) * Math.PI) / 180,
endAngle: ((90 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0CD3DB',
fill: 'transparent',
lineWidth: 1.5,
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '2',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
return {
type: 'arc',
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
startAngle: ((180 + this.angle) * Math.PI) / 180,
endAngle: ((270 + this.angle) * Math.PI) / 180,
endAngle: ((270 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0CD3DB',
fill: 'transparent',
lineWidth: 1.5,
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '3',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
return {
type: 'arc',
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((270 + -this.angle) * Math.PI) / 180,
endAngle: ((40 + -this.angle) * Math.PI) / 180,
endAngle: ((40 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0CD3DB',
fill: 'transparent',
lineWidth: 1.5,
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '4',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
return {
type: 'arc',
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
startAngle: ((90 + -this.angle) * Math.PI) / 180,
endAngle: ((220 + -this.angle) * Math.PI) / 180,
endAngle: ((220 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0CD3DB',
fill: 'transparent',
lineWidth: 1.5,
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '绿1',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
let point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
return {
type: 'circle',
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
r: 4
},
style: {
stroke: '#0CD3DB', //
fill: '#0CD3DB',
stroke: "#0CD3DB", //
fill: "#0CD3DB"
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '绿2',
type: 'custom',
coordinateSystem: 'none',
type: "custom",
coordinateSystem: "none",
renderItem: (params, api) => {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
let point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
return {
type: 'circle',
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
r: 4
},
style: {
stroke: '#0CD3DB', //绿
fill: '#0CD3DB',
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true,
silent: true
};
},
data: [0],
data: [0]
},
{
//name: '',
type: 'pie',
radius: ['58%', '45%'],
type: "pie",
radius: ["58%", "45%"],
silent: true,
clockwise: true,
startAngle: 90,
@ -218,13 +223,13 @@ export default {
zlevel: 0,
label: {
normal: {
position: 'center',
},
position: "center"
}
},
data: [
{
value: per,
name: '',
name: "",
itemStyle: {
normal: {
color: {
@ -232,73 +237,75 @@ export default {
colorStops: [
{
offset: 0,
color: '#4FADFD', // 0%
color: "#4FADFD" // 0%
},
{
offset: 1,
color: '#28E8FA', // 100%
},
],
},
},
},
color: "#28E8FA" // 100%
}
]
}
}
}
},
{
value: 100 - per,
name: '',
name: "",
label: {
normal: {
show: false,
},
show: false
}
},
//
itemStyle: {
normal: {
color: '#173164',
},
},
},
],
color: "#173164"
}
}
}
]
},
{
name: 'percent',
type: 'gauge',
radius: '58%',
center: ['50%', '50%'],
name: "percent",
type: "gauge",
radius: "58%",
center: ["50%", "50%"],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false,
show: false
},
splitLine: {
length: 15,
lineStyle: {
width: 5,
color: '#061740',
},
color: "#061740"
}
},
axisLabel: {
show: false,
show: false
},
pointer: {
show: false,
show: false
},
axisLine: {
lineStyle: {
opacity: 0,
},
opacity: 0
}
},
detail: {
show: false,
show: false
},
data: [{
value: 0,
name: ""
}],
},
],
data: [
{
value: 0,
name: ""
}
]
}
]
},
optionsStyle: {}, //
optionsData: {}, //
@ -350,7 +357,7 @@ export default {
let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
return {
x: x1,
y: y1,
y: y1
};
},
editorOptions() {
@ -377,7 +384,7 @@ export default {
fontWeight: optionsSetup.textPerFontWeight
}
};
title.textStyle['rich'] = rich;
title.textStyle["rich"] = rich;
this.options.title = title;
},
setOptions() {
@ -396,59 +403,56 @@ export default {
//0-100%
setOptionsColor() {
const optionsSetup = this.optionsSetup;
const itemStyle = this.options.series[6]['data'][0]['itemStyle']
const itemStyle = this.options.series[6]["data"][0]["itemStyle"];
const normal = {
color: {
//
colorStops: [
{
offset: 0,
color: optionsSetup.color0Start, // 0%
color: optionsSetup.color0Start // 0%
},
{
offset: 1,
color: optionsSetup.color100End, // 100%
},
],
},
color: optionsSetup.color100End // 100%
}
]
}
};
itemStyle['normal'] = normal
itemStyle["normal"] = normal;
},
setOptionSurplusColor() {
const itemStyle = this.options.series[6]['data'][1]['itemStyle']
const itemStyle = this.options.series[6]["data"][1]["itemStyle"];
const normal = {
color: this.optionsSetup.colorsurplus,
color: this.optionsSetup.colorsurplus
};
itemStyle['normal'] = normal
itemStyle["normal"] = normal;
},
setOptionLine() {
const optionsSetup = this.optionsSetup;
const line = this.options.series[7]['splitLine'];
const line = this.options.series[7]["splitLine"];
const num = this.options.series[7];
num.splitNumber = optionsSetup.lineNumber;
line.length = optionsSetup.lineLength;
const lineStyle = {
width: optionsSetup.lineWidth,
color: optionsSetup.lineColor,
color: optionsSetup.lineColor
};
line['lineStyle'] = lineStyle
line["lineStyle"] = lineStyle;
},
//
setOptionsData() {
const optionsData = this.optionsData; // or
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime
);
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const title = this.options.title;
const num = val[0]['num'];
title.text = '{nums|' + num + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = num;
this.options.series[6]['data'][1]['value'] = 100 - num;
const num = val[0]["num"];
title.text = "{nums|" + num + "}{percent|%}";
this.options.series[6]["data"][0]["value"] = num;
this.options.series[6]["data"][1]["value"] = 100 - num;
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@ -464,9 +468,9 @@ export default {
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.options.title.text = '{nums|' + res[0].value + '}{percent|%}';
this.options.series[6]['data'][0]['value'] = res[0].value;
this.options.series[6]['data'][1]['value'] = 100 - res[0].value;
this.options.title.text = "{nums|" + res[0].value + "}{percent|%}";
this.options.series[6]["data"][0]["value"] = res[0].value;
this.options.series[6]["data"][1]["value"] = 100 - res[0].value;
});
}
}

@ -5,7 +5,7 @@
</template>
<script>
import "../../../../../../node_modules/echarts/map/js/china.js";
var GZData = [
let GZData = [
[
{
name: "广州"
@ -97,7 +97,7 @@ var GZData = [
}
]
];
var geoCoordMap = {
let geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
@ -213,10 +213,10 @@ var geoCoordMap = {
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var type = "流出";
var color = ["#a6c84c", "#ffa022", "#46bee9"];
var tempData = ["广州", GZData];
var planePath =
let type = "流出";
let color = ["#a6c84c", "#ffa022", "#46bee9"];
let tempData = ["广州", GZData];
let planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
export default {
name: "widgetMap",
@ -432,11 +432,11 @@ export default {
this.options = options;
},
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if ("流入" == type) {
fromCoord = geoCoordMap[dataItem[1].name];
toCoord = geoCoordMap[dataItem[0].name];

@ -5,7 +5,7 @@
<div class="title">
<div
v-for="(item, index) in header"
:style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
:style="[headerTableStlye, tableFiledWidth(index), tableRowHeight()]"
:key="index"
>
{{ item.name }}
@ -14,11 +14,20 @@
<!--数据-->
<div class="bd">
<ul class="infoList">
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" >
<li
v-for="(item, index) in list"
:key="index"
:style="tableRowHeight()"
>
<div
v-for="(itemChild, idx) in header"
:key="idx"
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
:style="[
bodyTableStyle,
bodyTable(index),
tableFiledWidth(idx),
tableRowHeight()
]"
>
{{ item[itemChild.key] }}
</div>
@ -49,7 +58,7 @@ export default {
//effect: "top",
autoPlay: true,
vis: 5,
rowHeight:'50px'
rowHeight: "50px"
},
header: [],
list: [],
@ -121,7 +130,7 @@ export default {
this.handlerData();
this.visConfig();
},
visConfig(){
visConfig() {
this.options.vis = this.optionsSetUp.vis;
},
handlerRollFn() {
@ -175,31 +184,31 @@ export default {
},
//
bodyTable(index) {
var styleJson = {};
let styleJson = {};
if (index % 2) {
styleJson["background-color"] = this.optionsSetUp.eventColor
styleJson["background-color"] = this.optionsSetUp.eventColor;
} else {
styleJson["background-color"] = this.optionsSetUp.oldColor
styleJson["background-color"] = this.optionsSetUp.oldColor;
}
return styleJson;
},
tableRowHeight(){
var styleJson = {};
if(this.optionsSetUp.rowHeight){
styleJson['height'] = this.optionsSetUp.rowHeight+'px';
styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
}else{
styleJson['height'] =this.options.rowHeight
styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
tableRowHeight() {
let styleJson = {};
if (this.optionsSetUp.rowHeight) {
styleJson["height"] = this.optionsSetUp.rowHeight + "px";
styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
} else {
styleJson["height"] = this.options.rowHeight;
styleJson["line-height"] = this.optionsSetUp.rowHeight + "px";
}
return styleJson;
},
tableFiledWidth(index){
var styleJson = {};
if(this.optionsSetUp.dynamicAddTable[index].width ){
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
tableFiledWidth(index) {
let styleJson = {};
if (this.optionsSetUp.dynamicAddTable[index].width) {
styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width;
}
return styleJson
return styleJson;
}
}
};

@ -73,7 +73,7 @@ export default {
"q+": Math.floor((date.getMonth() + 3) / 3), //
S: date.getMilliseconds() //
};
for (var k in o) {
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(
RegExp.$1,

@ -120,7 +120,7 @@ export default {
params: {
reportCode: "",
reportName: "",
reportType: 'report_screen',
reportType: "report_screen",
pageNumber: 1,
pageSize: 8,
order: "DESC",
@ -178,16 +178,16 @@ export default {
this.visibleForShareDialog = true;
},
openDesign(val) {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/bigscreen/designer",
query: {
reportCode: val.reportCode,
reportCode: val.reportCode
}
});
window.open(routeUrl.href, "_blank");
},
viewDesign(val) {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: val.reportCode }
});

@ -177,8 +177,8 @@ export default {
this.dictionaryOptions.map(item => {
if (item.id == newSourceType.sourceType) {
newDataLink = JSON.parse(item.extend);
var sourceConfigJson = JSON.parse(newSourceType.sourceConfig);
for (var i = 0; i < newDataLink.length; i++) {
let sourceConfigJson = JSON.parse(newSourceType.sourceConfig);
for (let i = 0; i < newDataLink.length; i++) {
newDataLink[i].value = sourceConfigJson[newDataLink[i].label];
}
}

@ -258,7 +258,7 @@ export default {
this.createSheet();
if (data != null) {
if (data.setCodes != null && data.setCodes !== "") {
var dataSetList = data.setCodes.split("|");
let dataSetList = data.setCodes.split("|");
dataSetList.forEach(code => {
this.dataSetData.forEach(setData => {
if (code === setData.setCode) {
@ -347,7 +347,7 @@ export default {
},
onStart(setCode, evt) {
this.setCode = setCode;
var fieldLabel = evt.item.innerText; //
let fieldLabel = evt.item.innerText; //
this.draggableFieldLabel = "#{" + this.setCode + "." + fieldLabel + "}";
console.log("evt", evt);
console.log("draggableFieldLabel", this.draggableFieldLabel);
@ -371,15 +371,15 @@ export default {
}
this.reportExcelDto.jsonStr = JSON.stringify(luckysheet.getAllSheets());
var setCodeList = [];
var setParams = {};
let setCodeList = [];
let setParams = {};
this.dataSet.forEach(code => {
setCodeList.push(code.setCode);
if (
code.dataSetParamDtoList != null &&
code.dataSetParamDtoList.length > 0
) {
var dataSetParam = {};
let dataSetParam = {};
code.dataSetParamDtoList.forEach(value => {
dataSetParam[value.paramName] = value.sampleItem;
});
@ -409,7 +409,7 @@ export default {
}
},
async preview() {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/excelreport/viewer",
query: { reportCode: this.reportCode }
});
@ -436,7 +436,7 @@ export default {
async detail(id) {
const { code, data } = await detail(id);
if (code != 200) return;
var flag = true;
let flag = true;
this.dataSet.forEach(value => {
if (value.setCode === data.setCode) {
flag = false;

@ -34,10 +34,10 @@
</el-col>
<el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
<el-button type="primary" size="mini" @click="search('form')"
>查询</el-button
>查询</el-button
>
<el-button type="danger" size="mini" @click="reset('form')"
>重置</el-button
>重置</el-button
>
</el-col>
</el-row>
@ -121,7 +121,7 @@ export default {
params: {
reportCode: "",
reportName: "",
reportType: 'report_excel',
reportType: "report_excel",
pageNumber: 1,
pageSize: 8,
order: "DESC",
@ -183,16 +183,16 @@ export default {
this.visibleForShareDialog = true;
},
openDesign(val) {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/excelreport/designer",
query: {
reportCode: val.reportCode,
reportCode: val.reportCode
}
});
window.open(routeUrl.href, "_blank");
},
viewDesign(val) {
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: "/excelreport/viewer",
query: { reportCode: val.reportCode }
});

@ -193,7 +193,7 @@ export default {
});
},
copyToClip(content, message) {
var aux = document.createElement("input");
let aux = document.createElement("input");
aux.setAttribute("value", content);
document.body.appendChild(aux);
aux.select();
@ -202,7 +202,7 @@ export default {
},
async saveReportShare() {
var params = {};
let params = {};
//const { code } = await saveAuthorityTree(params)
//if (code != '200') return
this.closeDialog();

@ -23,7 +23,7 @@
type="text"
@click="shareReport(props.msg)"
v-permission="'bigScreenManage:share'"
>分享</el-button
>分享</el-button
>
</template>
@ -46,7 +46,7 @@ import {
reportDetail
} from "@/api/reportmanage";
import Share from "@/views/report/report/components/share";
import {validateEngOrNum} from "@/utils/validate";
import { validateEngOrNum } from "@/utils/validate";
export default {
name: "Report",
components: {
@ -67,12 +67,12 @@ export default {
//
queryFormFields: [
{
inputType: 'anji-select', //form input|input-number|anji-select(urldictCode)|anji-tree()|date|datetime|datetimerange
inputType: "anji-select", //form input|input-number|anji-select(urldictCode)|anji-tree()|date|datetime|datetimerange
anjiSelectOption: {
dictCode: "REPORT_TYPE"
},
label: '报表类型',
field: 'reportType'
label: "报表类型",
field: "reportType"
},
{
inputType: "input",
@ -83,15 +83,15 @@ export default {
inputType: "input",
label: "报表编码",
field: "reportCode"
},
}
],
//
buttons: {
query: {
api: reportList,
permission: "reportManage:query",
sort: 'update_time',
order: 'DESC'
sort: "update_time",
order: "DESC"
},
queryByPrimarykey: {
api: reportDetail,
@ -129,22 +129,22 @@ export default {
editField: "reportName",
inputType: "input",
rules: [
{ required: true, message: '请输入报表名称', trigger: 'blur' },
{ required: true, message: "请输入报表名称", trigger: "blur" },
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" }
],
disabled: false
},
{
label: "报表编码", //
placeholder: '唯一标识',
placeholder: "唯一标识",
field: "reportCode",
editField: "reportCode",
inputType: "input",
rules: [
{ required: true, message: '请输入报表编码', trigger: 'blur' },
{ required: true, message: "请输入报表编码", trigger: "blur" },
{ min: 1, max: 100, message: "不超过100个字符", trigger: "blur" },
{ validator: validateEngOrNum, trigger: 'blur' },
{ validator: validateEngOrNum, trigger: "blur" }
],
disabled: "disableOnEdit"
},
@ -175,10 +175,10 @@ export default {
dictCode: "REPORT_TYPE"
},
rules: [
{ required: true, message: '请输入报表类型', trigger: 'blur' },
{ required: true, message: "请输入报表类型", trigger: "blur" },
{ min: 1, max: 20, message: "不超过20个字符", trigger: "blur" }
],
disabled: "disableOnEdit",
disabled: "disableOnEdit"
},
{
label: "描述", //
@ -252,13 +252,12 @@ export default {
//
preview(val) {
let routePath = "";
if (val.reportType === 'report_excel') {
if (val.reportType === "report_excel") {
routePath = "/excelreport/viewer";
} else {
routePath = "/bigscreen/viewer";
}
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: routePath,
query: { reportCode: val.reportCode }
});
@ -267,24 +266,22 @@ export default {
//
design(val) {
let routePath = "";
if (val.reportType === 'report_excel') {
if (val.reportType === "report_excel") {
routePath = "/excelreport/designer";
} else {
routePath = "/bigscreen/designer";
}
var routeUrl = this.$router.resolve({
let routeUrl = this.$router.resolve({
path: routePath,
query: {
reportCode: val.reportCode,
reportCode: val.reportCode
}
});
window.open(routeUrl.href, "_blank");
},
//
shareReport(val){
if (val.reportType == 'report_excel') {
shareReport(val) {
if (val.reportType == "report_excel") {
//excel
this.$message.warning("暂不支持excel报表分享");
return;

@ -15,7 +15,14 @@
label-width="130px"
>
<el-row :gutter="10">
<el-col v-if="this.setType=='sql'" :xs="24" :sm="20" :md="8" :lg="8" :xl="8">
<el-col
v-if="this.setType == 'sql'"
:xs="24"
:sm="20"
:md="8"
:lg="8"
:xl="8"
>
<el-form-item label="数据源" prop="sourceCode">
<el-select
v-model.trim="formData.sourceCode"
@ -52,10 +59,8 @@
<el-input v-model.trim="formData.setDesc" size="mini" />
</el-form-item>
</el-col>
</el-row>
<el-row v-if="this.setType=='sql'" :gutter="10">
<el-row v-if="this.setType == 'sql'" :gutter="10">
<el-col
:xs="24"
:sm="20"
@ -64,7 +69,7 @@
:xl="22"
class="code-mirror-form"
>
<el-form-item label="查询SQL">
<el-form-item label="查询SQL">
<div class="codemirror">
<monaco-editor
v-model.trim="formData.dynSentence"
@ -75,10 +80,18 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="this.setType=='http'">
<el-form-item label="请求路径">
<el-input placeholder="请输入请求路径..." v-model="httpForm.apiUrl" class="input-with-select">
<el-select v-model="httpForm.method" slot="prepend" placeholder="请选择">
<el-row v-if="this.setType == 'http'">
<el-form-item label="请求路径">
<el-input
placeholder="请输入请求路径..."
v-model="httpForm.apiUrl"
class="input-with-select"
>
<el-select
v-model="httpForm.method"
slot="prepend"
placeholder="请选择"
>
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
@ -86,13 +99,20 @@
</el-select>
</el-input>
</el-form-item>
<el-form-item label="请求头">
<el-input v-model.trim="httpForm.header" size="mini" placeholder="请输入请求头..."/>
<el-form-item label="请求头">
<el-input
v-model.trim="httpForm.header"
size="mini"
placeholder="请输入请求头..."
/>
</el-form-item>
<el-form-item label="请求体">
<el-input v-model.trim="httpForm.body" size="mini" placeholder="请输入请求体..."/>
<el-form-item label="请求体">
<el-input
v-model.trim="httpForm.body"
size="mini"
placeholder="请输入请求体..."
/>
</el-form-item>
</el-row>
<el-row :gutter="10">
<el-col :xs="24" :sm="20" :md="22" :lg="22" :xl="22">
@ -184,11 +204,11 @@
</template>
</el-table-column>
</el-table>
<!-- <el-checkbox-->
<!-- v-model="isShowPagination"-->
<!-- @change="changePagination"-->
<!-- >加入分页参数-->
<!-- </el-checkbox>-->
<!-- <el-checkbox-->
<!-- v-model="isShowPagination"-->
<!-- @change="changePagination"-->
<!-- >加入分页参数-->
<!-- </el-checkbox>-->
</el-tab-pane>
<el-tab-pane label="数据转换" name="second">
<template>
@ -408,7 +428,7 @@ import "codemirror/lib/codemirror.css"; // 核心样式
import "codemirror/theme/cobalt.css"; // options
import vueJsonEditor from "vue-json-editor";
import MonacoEditor from "./MonacoEditor.vue";
import {validateEngOrNum} from "@/utils/validate";
import { validateEngOrNum } from "@/utils/validate";
export default {
name: "Support",
components: { Dictionary, codemirror, vueJsonEditor, MonacoEditor },
@ -496,7 +516,7 @@ export default {
],
setCode: [
{ required: true, message: "数据集编码必填", trigger: "blur" },
{ validator: validateEngOrNum, trigger: 'blur' },
{ validator: validateEngOrNum, trigger: "blur" }
],
sourceCode: [
{ required: true, message: "数据源必选", trigger: "change" }
@ -530,12 +550,13 @@ export default {
setName: "",
setCode: ""
},
setType: '', //http addSql addHttp edit
httpForm: { //http
apiUrl: '',
method: 'GET',
setType: "", //http addSql addHttp edit
httpForm: {
//http
apiUrl: "",
method: "GET",
header: '{"Content-Type":"application/json;charset=UTF-8"}',
body: '',
body: ""
},
//
dictionaryOptions: [], //
@ -570,9 +591,9 @@ export default {
methods: {
// ,
async addOrEditDataSet(row, type) {
this.setType = type
if (type == 'http' && row.dynSentence) {
this.httpForm = JSON.parse(row.dynSentence)
this.setType = type;
if (type == "http" && row.dynSentence) {
this.httpForm = JSON.parse(row.dynSentence);
}
//
const { code, data } = await queryAllDataSourceSet();
@ -592,7 +613,7 @@ export default {
data.data.dataSetParamDtoList.length > 0
) {
this.tableData = data.data.dataSetParamDtoList;
var count = 0;
let count = 0;
this.tableData.find((value, i) => {
if (
value.paramName === "pageNumber" ||
@ -668,10 +689,10 @@ export default {
//
async handleClickTabs(tab, event) {
if (this.setType == 'http') {
if (this.setType == "http") {
//http
console.log("http数据集" + this.httpForm);
this.formData.dynSentence = JSON.stringify(this.httpForm)
this.formData.dynSentence = JSON.stringify(this.httpForm);
}
if (tab.paneName == "third") {
const params = {
@ -792,7 +813,7 @@ export default {
// filter
reduceFilter(item) {
if (this.itemFilterList.length > 0) {
var index = this.itemFilterList.indexOf(item);
let index = this.itemFilterList.indexOf(item);
if (index > -1) {
this.itemFilterList.splice(index, 1);
}
@ -840,11 +861,11 @@ export default {
//
async testResultset() {
this.isRowData.validationRules = this.validationRules;
console.log(this.isRowData,"12345678")
console.log(this.isRowData, "12345678");
const { code, message, data } = await verificationSet(this.isRowData);
if (code == "200") {
if (data) {
this.$message.success("返回结果:"+ data);
this.$message.success("返回结果:" + data);
} else {
this.$message.warning("当前示例值校验不通过");
}
@ -869,12 +890,12 @@ export default {
});
},
async submit(formName) {
if (this.setType == 'http') {
if (this.setType == "http") {
//http
console.log("http数据集" + this.httpForm);
this.formData.dynSentence = JSON.stringify(this.httpForm)
this.formData.dynSentence = JSON.stringify(this.httpForm);
}
this.formData.setType = this.setType
this.formData.setType = this.setType;
this.$refs[formName].validate(async (valid, obj) => {
if (valid) {
if (this.testMassageCode == 200) {
@ -884,12 +905,12 @@ export default {
if (this.dialogFormVisibleTitle === "新增数据集") {
const { code } = await addDataSet(this.formData);
if (code != "200") return;
this.$emit('refreshList')
this.$emit("refreshList");
this.closeDialog();
} else {
const { code } = await editDataSet(this.formData);
if (code != "200") return;
this.$emit('refreshList')
this.$emit("refreshList");
this.closeDialog();
}
} else {

Loading…
Cancel
Save