qiangmj / report-ui

Commit 90d642b0ec7c86fc3d47386062894ee1e4c50c36

Authored by qianbao
1 parent badbffc5

1、大屏左侧操作菜单归类 

2、代码文件归类
3、添加雷达图
Inline Side-by-side
Showing 10 changed files with 179 additions and 174 deletions
src/mixins/common.js
  View file @90d642b
... ... @@ -138,7 +138,7 @@ export default {
138 138 isNotBlank (val) {
139 139 return !this.isBlank(val)
140 140 },
141   - isBlank (val) {
  141 + isBlankObject (val) {
142 142 if (this.isNull(val)) {
143 143 return true
144 144 }
... ...
src/views/bigscreenDesigner/designer/components/datasourceSelect.vue 0 → 100644
  View file @90d642b
  1 +<template>
  2 + <el-form-item prop="master">
  3 + <el-select
  4 + size="mini"
  5 + name="master"
  6 + v-model="selectedOption"
  7 + placeholder="请选择"
  8 + @change="selectDataSet"
  9 + >
  10 + <el-option
  11 + key=""
  12 + label=""
  13 + value=""
  14 + />
  15 + <el-option
  16 + v-for="item in dataSet"
  17 + :key="item.id"
  18 + :label="item.setName"
  19 + :value="item.id"
  20 + />
  21 + </el-select>
  22 + </el-form-item>
  23 +</template>
  24 +<script>
  25 +import { queryAllDataSet} from "@/api/bigscreen";
  26 +export default {
  27 + name: "data-source-select",
  28 + components: {},
  29 + model: {
  30 + prop: "value",
  31 + event: "input"
  32 + },
  33 + props: {
  34 + value: {
  35 + type: "",
  36 + default: ""
  37 + }
  38 + },
  39 + data() {
  40 + return {
  41 + selectedOption: {},
  42 + dataSet: [], // 数据集
  43 + };
  44 + },
  45 + watch: {
  46 + value: {
  47 + handler(newValue, oldValue) {
  48 + if (typeof newValue === "string") {
  49 + this.selectedOption = newValue;
  50 + } else {
  51 + this.selectedOption = this.parseString(newValue);
  52 + }
  53 + },
  54 + immediate: true
  55 + }
  56 + },
  57 + computed: {},
  58 + created() {
  59 + this.loadDataSet();
  60 + },
  61 + // mounted() {
  62 + // this.loadDataSet();
  63 + // },
  64 + methods: {
  65 + async loadDataSet() {
  66 + const { code, data } = await queryAllDataSet();
  67 + this.dataSet = data;
  68 + const selectKey = this.value;
  69 + if (code != "200"){
  70 + return
  71 + }else{
  72 + for (let i = 0; i < this.dataSet.length; i++) {
  73 + let item = this.dataSet[i];
  74 + if (item.id == selectKey) {
  75 + this.selectedOption = this.dataSet[i];
  76 + }
  77 + }
  78 + }
  79 + },
  80 + //选中，回刷父节点
  81 + async selectDataSet() {
  82 + this.$emit("input", this.selectedOption);
  83 + this.$emit("change", this.selectedOption);
  84 + },
  85 + // 数据集回显
  86 + async echoDataSet(val) {
  87 + if (!val) return;
  88 + //改变全局数据集 动态获取数据(获取根据数据源ID)改变静态组件的值
  89 +
  90 + },
  91 + }
  92 +};
  93 +</script>
... ...
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
  View file @90d642b
... ... @@ -60,13 +60,18 @@
60 60 v-model="formData[item.name]"
61 61 @change="val => changed(val, item.name)"
62 62 />
  63 + <DatasourceSelect
  64 + v-if="item.type == 'data-source-select'"
  65 + v-model="formData[item.name]"
  66 + @change="changed($event, item.name)">
  67 + </DatasourceSelect>
63 68  
64 69 <CustomUploadNew v-if="item.type == 'custom-upload-new'"
65 70 v-model="formData[item.name]"
66 71 @change="changed($event, item.name)">
67 72 </CustomUploadNew>
68 73  
69   - <CustomUploadMulti v-if="item.type == 'custom-upload-multi'"
  74 + <CustomUploadMulti v-if="item.type == 'custom-upload-new'"
70 75 v-model="formData[item.name]"
71 76 @change="changed($event, item.name)">
72 77 </CustomUploadMulti>
... ... @@ -224,7 +229,7 @@
224 229 <el-upload
225 230 v-if="itemChildList.type == 'el-upload-picture'"
226 231 size="mini"
227   - action="https://jsonplaceholder.typicode.com/posts/"
  232 + action=""
228 233 list-type="picture-card"
229 234 />
230 235  
... ... @@ -294,6 +299,7 @@ import dynamicAddTable from &quot;./dynamicAddTable.vue&quot;;
294 299 import customUpload from "./customUpload.vue";
295 300 import dynamicAddRadar from "./dynamicAddRadar";
296 301 import CustomUploadNew from "./customUploadNew";
  302 +import DatasourceSelect from "./datasourceSelect";
297 303 import CustomUploadMulti from "./customUploadMulti";
298 304 export default {
299 305 name: "DynamicForm",
... ... @@ -306,7 +312,9 @@ export default {
306 312 customUpload,
307 313 dynamicAddRadar,
308 314 CustomUploadNew,
309   - CustomUploadMulti
  315 + CustomUploadMulti,
  316 + DatasourceSelect,
  317 +
310 318 },
311 319 model: {
312 320 prop: "value",
... ... @@ -317,14 +325,14 @@ export default {
317 325 value: {
318 326 type: [Object],
319 327 default: () => {}
320   - }
  328 + },
321 329 },
322 330 data() {
323 331 return {
324 332 formData: {},
325 333 inputShow: {}, // 控制表单是否显示
326 334 dialogVisibleStaticData: false,
327   - validationRules: "",
  335 + // validationRules: "",
328 336 optionsJavascript: {
329 337 mode: "text/javascript",
330 338 tabSize: 2, // 缩进格式
... ...
src/views/bigscreenDesigner/designer/index.vue
  View file @90d642b
... ... @@ -305,14 +305,11 @@ export default {
305 305 VueRulerTool,
306 306 widget,
307 307 dynamicForm,
308   - contentMenu,
  308 + contentMenu
309 309 },
310 310 data() {
311 311 return {
312   - uploadUrl:
313   - process.env.BASE_API +
314   - "/reportDashboard/import/" +
315   - this.$route.query.reportCode,
  312 + uploadUrl:process.env.BASE_API +"/reportDashboard/import/" +this.$route.query.reportCode,
316 313 grade: false,
317 314 layerWidget: [],
318 315 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
... ... @@ -334,10 +331,13 @@ export default {
334 331 height: 1080, // 大屏设计高度
335 332 backgroundColor: "", // 大屏背景色
336 333 backgroundImage: "", // 大屏背景图片
  334 + master: null, // 全局数据源
  335 + refreshMasterTime: 600000, // 刷新时间(毫秒)
337 336 refreshSeconds: null, // 大屏刷新时间间隔
338 337 presetLine: [], // 辅助线
339 338 presetLineVisible: true, // 辅助线是否显示
340 339 },
  340 + masterData:{"sName1":"测试文本1","sName2":"测试文本2"},
341 341 // 大屏的标记
342 342 screenCode: "",
343 343 dragWidgetCode: "", //从工具栏拖拽的组件code
... ... @@ -494,6 +494,7 @@ export default {
494 494 const { code, data } = await detailDashboard(reportCode);
495 495 if (code != 200) return;
496 496 const processData = this.handleInitEchartsData(data);
  497 +
497 498 const screenData = this.handleBigScreen(data.dashboard);
498 499 this.widgets = processData;
499 500 this.dashboard = screenData;
... ... @@ -514,9 +515,11 @@ export default {
514 515 return {
515 516 backgroundColor: (data && data.backgroundColor) || "",
516 517 backgroundImage: (data && data.backgroundImage) || "",
517   - height: (data && data.height) || "1080",
  518 + height: (data && data.height) || 1080,
518 519 title: (data && data.title) || "",
519   - width: (data && data.width) || "1920",
  520 + width: (data && data.width) || 1920,
  521 + master: (data && data.master) || null,
  522 + refreshMasterTime: (data && data.refreshMasterTime) || null,
520 523 };
521 524 },
522 525 handleInitEchartsData(data) {
... ... @@ -589,10 +592,13 @@ export default {
589 592 width: this.dashboard.width,
590 593 height: this.dashboard.height,
591 594 backgroundColor: this.dashboard.backgroundColor,
  595 + refreshMasterTime: this.dashboard.refreshMasterTime,
  596 + master: this.dashboard.master,
592 597 backgroundImage: this.dashboard.backgroundImage,
593 598 },
594 599 widgets: this.widgets,
595 600 };
  601 + console.log(screenData);
596 602 const { code, data } = await insertDashboard(screenData);
597 603 if (code == "200") {
598 604 this.$message.success("保存成功！");
... ... @@ -825,14 +831,14 @@ export default {
825 831 },
826 832 // 将当前选中的组件，右侧属性值更新
827 833 widgetValueChanged(key, val) {
828   - console.log("key", key);
829   - console.log("val", val);
830   - console.log(this.widgetOptions);
  834 + // console.log("key", key);
  835 + // console.log("val", val);
  836 + // console.log(this.widgetOptions);
831 837 if (this.screenCode == "screen") {
832 838 let newSetup = new Array();
833 839 this.dashboard = this.deepClone(val);
834   - console.log("asd", this.dashboard);
835   - console.log(this.widgetOptions);
  840 + // console.log("asd", this.dashboard);
  841 + // console.log(this.widgetOptions);
836 842 if (this.bigscreenWidth != this.dashboard.width) {
837 843 this.bigscreenWidth = this.dashboard.width;
838 844 }
... ... @@ -844,12 +850,12 @@ export default {
844 850 el.value = this.bigscreenWidth;
845 851 } else if (el.name == "height") {
846 852 el.value = this.bigscreenHeight;
847   - } else if (this.dashboard.hasOwn(el.name)) {
  853 + } else if (this.hasOwn(el.name)) {
848 854 el["value"] = this.dashboard[el.name];
849 855 }
850 856 newSetup.push(el);
851 857 });
852   - console.log(newSetup);
  858 + // console.log(newSetup);
853 859 this.widgetOptions.setup = newSetup;
854 860 } else {
855 861 for (let i = 0; i < this.widgets.length; i++) {
... ...
src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
  View file @90d642b
... ... @@ -255,140 +255,7 @@ export const widgetWordCloud = {
255 255 relactiveDom: 'dataType',
256 256 relactiveDomValue: 'staticData',
257 257 value: [
258   - { name: "占道", value: 284 },
259   - { name: "水质", value: 71 },
260   - { name: "无水", value: 71 },
261   - { name: "停供", value: 21 },
262   - { name: "停气", value: 11 },
263   - { name: "占道", value: 11 },
264   - { name: "Nancy", value: 520 },
265   - { name: "Jayfee", value: 666 },
266   - { name: "生活资源", value: 999 },
267   - { name: "供热管理", value: 888 },
268   - { name: "供气质量", value: 777 },
269   - { name: "社会保障", value: 407 },
270   - { name: "交通运输", value: 516 },
271   - { name: "城市交通", value: 515 },
272   - { name: "环境保护", value: 483 },
273   - { name: "城乡建设", value: 449 },
274   - { name: "公共安全", value: 406 },
275   - { name: "供热管理", value: 375 },
276   - { name: "市容环卫", value: 355 },
277   - { name: "粉尘污染", value: 335 },
278   - { name: "噪声污染", value: 324 },
279   - { name: "医疗卫生", value: 284 },
280   - { name: "供热发展", value: 254 },
281   - { name: "房地产管理", value: 462 },
282   - { name: "生活噪音", value: 253 },
283   - { name: "城市供电", value: 223 },
284   - { name: "大气污染", value: 223 },
285   - { name: "房屋安全", value: 223 },
286   - { name: "文化活动", value: 223 },
287   - { name: "拆迁管理", value: 223 },
288   - { name: "公共设施", value: 223 },
289   - { name: "供气质量", value: 223 },
290   - { name: "供电管理", value: 223 },
291   - { name: "燃气管理", value: 152 },
292   - { name: "教育管理", value: 152 },
293   - { name: "医疗纠纷", value: 152 },
294   - { name: "执法监督", value: 152 },
295   - { name: "设备安全", value: 152 },
296   - { name: "政务建设", value: 152 },
297   - { name: "宏观经济", value: 152 },
298   - { name: "教育管理", value: 112 },
299   - { name: "社会保障", value: 112 },
300   - { name: "分类列表", value: 112 },
301   - { name: "农业生产", value: 112 },
302   - { name: "物业服务", value: 92 },
303   - { name: "物业管理", value: 92 },
304   - { name: "低保管理", value: 92 },
305   - { name: "执法争议", value: 72 },
306   - { name: "占道堆放", value: 71 },
307   - { name: "地上设施", value: 71 },
308   - { name: "主网原因", value: 71 },
309   - { name: "集中供热", value: 71 },
310   - { name: "客运管理", value: 71 },
311   - { name: "治安案件", value: 71 },
312   - { name: "群众健身", value: 41 },
313   - { name: "市场收费", value: 41 },
314   - { name: "生产资金", value: 41 },
315   - { name: "生产噪声", value: 41 },
316   - { name: "农村低保", value: 41 },
317   - { name: "劳动争议", value: 41 },
318   - { name: "医疗事故", value: 21 },
319   - { name: "基础教育", value: 21 },
320   - { name: "职业教育", value: 21 },
321   - { name: "拆迁补偿", value: 21 },
322   - { name: "设施维护", value: 21 },
323   - { name: "市场外溢", value: 11 },
324   - { name: "占道经营", value: 11 },
325   - { name: "树木管理", value: 11 },
326   - { name: "供气质量", value: 11 },
327   - { name: "燃气管理", value: 11 },
328   - { name: "市容环卫", value: 11 },
329   - { name: "新闻传媒", value: 11 },
330   - { name: "人才招聘", value: 11 },
331   - { name: "市场环境", value: 11 },
332   - { name: "城市交通", value: 11 },
333   - { name: "物业服务", value: 11 },
334   - { name: "物业管理", value: 11 },
335   - { name: "园林绿化", value: 11 },
336   - { name: "有线电视", value: 11 },
337   - { name: "社会治安", value: 11 },
338   - { name: "林业资源", value: 11 },
339   - { name: "体育活动", value: 11 },
340   - { name: "低保管理", value: 11 },
341   - { name: "劳动争议", value: 11 },
342   - { name: "粉煤灰污染", value: 284 },
343   - { name: "人行道管理", value: 71 },
344   - { name: "身份证管理", value: 71 },
345   - { name: "房地产开发", value: 11 },
346   - { name: "经营性收费", value: 11 },
347   - { name: "一次供水问题", value: 11 },
348   - { name: "工业粉尘污染", value: 71 },
349   - { name: "工业排放污染", value: 41 },
350   - { name: "破坏森林资源", value: 41 },
351   - { name: "生活用水管理", value: 688 },
352   - { name: "一次供水问题", value: 588 },
353   - { name: "公交运输管理", value: 386 },
354   - { name: "自然资源管理", value: 355 },
355   - { name: "土地资源管理", value: 304 },
356   - { name: "生活用水管理", value: 112 },
357   - { name: "供热单位影响", value: 253 },
358   - { name: "二次供水问题", value: 112 },
359   - { name: "城市公共设施", value: 92 },
360   - { name: "拆迁政策咨询", value: 92 },
361   - { name: "县区、开发区", value: 152 },
362   - { name: "文娱市场管理", value: 72 },
363   - { name: "商业烟尘污染", value: 72 },
364   - { name: "供热单位影响", value: 71 },
365   - { name: "压力容器安全", value: 71 },
366   - { name: "劳动合同争议", value: 41 },
367   - { name: "物业资质管理", value: 21 },
368   - { name: "农村基础设施", value: 11 },
369   - { name: "行政事业收费", value: 11 },
370   - { name: "房屋配套问题", value: 11 },
371   - { name: "公交运输管理", value: 11 },
372   - { name: "社会福利及事务", value: 11 },
373   - { name: "食品安全与卫生", value: 11 },
374   - { name: "物业服务与管理", value: 112 },
375   - { name: "文体与教育管理", value: 406 },
376   - { name: "社会保障与福利", value: 429 },
377   - { name: "出租车运营管理", value: 385 },
378   - { name: "物业服务与管理", value: 304 },
379   - { name: "房屋质量与安全", value: 223 },
380   - { name: "劳动报酬与福利", value: 41 },
381   - { name: "食品安全与卫生", value: 11 },
382   - { name: "房屋与图纸不符", value: 11 },
383   - { name: "其他行政事业收费", value: 11 },
384   - { name: "农村土地规划管理", value: 254 },
385   - { name: "社会保障保险管理", value: 92 },
386   - { name: "城市交通秩序管理", value: 72 },
387   - { name: "户籍管理及身份证", value: 11 },
388   - { name: "公路（水路）交通", value: 11 },
389   - { name: "国有公交（大巴）管理", value: 71 },
390   - { name: "有线电视安装及调试维护", value: 11 },
391   - { name: "市政府工作部门（含部门管理机构、直属单位）", value: 11 },
  258 + { name: "占道", value: 284 }
392 259 ],
393 260 },
394 261 {
... ...
src/views/bigscreenDesigner/designer/tools/index.js
  View file @90d642b
... ... @@ -47,6 +47,22 @@ const screenConfig = {
47 47 value: ''
48 48 },
49 49 {
  50 + type: 'data-source-select',
  51 + label: '全局数据源',
  52 + name: 'master',
  53 + required: false,
  54 + placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
  55 + value: ''
  56 + },
  57 + {
  58 + type: 'el-input-number',
  59 + label: '刷新时间(毫秒)',
  60 + name: 'refreshMasterTime',
  61 + value: '600000',
  62 + required: false,
  63 + placeholder: '毫秒',
  64 + },
  65 + {
50 66 type: 'vue-color',
51 67 label: '背景颜色',
52 68 name: 'backgroundColor',
... ... @@ -55,7 +71,7 @@ const screenConfig = {
55 71 value: 'rgba(45, 86, 126, 1)',
56 72 },
57 73 {
58   - type: 'custom-upload',
  74 + type: 'custom-upload-new',
59 75 label: '图片地址',
60 76 name: 'backgroundImage',
61 77 required: false,
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
  View file @90d642b
1   -<!--
2   - * @Author: lide1202@hotmail.com
3   - * @Date: 2021-3-13 11:04:24
4   - * @Last Modified by: lide1202@hotmail.com
5   - * @Last Modified time: 2021-3-13 11:04:24
6   - !-->
7 1 <template>
8 2 <div class="text" :style="styleColor">{{ styleColor.text }}</div>
9 3 </template>
... ... @@ -65,7 +59,15 @@ export default {
65 59 const optionsData = this.optionsData; // 数据类型 静态 or 动态
66 60 if (optionsData.dataType == "dynamicData") {
67 61 this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
68   - } else {};
  62 + } else {
  63 + console.log("静态数据",this,this.master,this.masterData);
  64 + //父数据不为空，
  65 + // if(this.isBlankObject(this.masterData)){
  66 + //
  67 + //
  68 + // }
  69 +
  70 + };
69 71 },
70 72 dynamicDataFn(val, refreshTime) {
71 73 if (!val) return;
... ...
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @90d642b
1   -<!--
2   - * @Author: lide1202@hotmail.com
3   - * @Date: 2021-3-13 11:04:24
4   - * @Last Modified by: lide1202@hotmail.com
5   - * @Last Modified time: 2021-3-13 11:04:24
6   - !-->
7 1 <template>
8 2 <avue-draggable
9 3 :step="step"
... ... @@ -100,14 +94,14 @@ export default {
100 94 widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
101 95 widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
102 96 */
103   - index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
  97 + // 当前组件，在工作区变量widgetInWorkbench中的索引
  98 + index: Number,
104 99 type: String,
105   - bigscreen: Object,
106 100 value: {
107 101 type: [Object],
108 102 default: () => {}
109 103 },
110   - step: Number
  104 + step: Number,
111 105 },
112 106 data() {
113 107 return {
... ... @@ -117,7 +111,7 @@ export default {
117 111 position: {},
118 112 /* leftMargin: null,
119 113 topMargin: null*/
120   - }
  114 + },
121 115 };
122 116 },
123 117 computed: {
... ... @@ -142,6 +136,10 @@ export default {
142 136 handleFocus({ index, left, top, width, height }) {},
143 137 handleBlur({ index, left, top, width, height }) {
144 138 this.$emit("onActivated", { index, left, top, width, height });
  139 +
  140 + console.log(this.masterData,"2222");
  141 +
  142 +
145 143 this.$refs.draggable.setActive(true);
146 144 // 处理widget超出workbench的问题
147 145 //this.handleBoundary({ index, left, top, width, height })
... ...
src/views/screenDesigner/config/configs.js
  View file @90d642b
... ... @@ -12,7 +12,7 @@
12 12 * 词云图：{type: 'wordCloud',tabName: '词云图'}
13 13 * **/
14 14  
15   -import { screenConfig } from './texts/screenConfig'
  15 +import {screenConfig} from './texts/screenConfig'
16 16 import {widgetHref} from "./texts/widget-href"
17 17 import {widgetIframe} from "./texts/widget-iframe"
18 18 import {widgetImage} from "./texts/widget-image"
... ...
src/views/screenDesigner/config/texts/screenConfig.js
  View file @90d642b
... ... @@ -45,6 +45,20 @@ export const screenConfig = {
45 45 placeholder: '',
46 46 },
47 47 {
  48 + type: 'data-source-select',
  49 + label: '全局数据源',
  50 + name: 'master',
  51 + required: false,
  52 + placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
  53 + value: ''
  54 + },
  55 + {
  56 + type: 'el-input-number',
  57 + label: '刷新时间(毫秒)',
  58 + name: 'refreshMasterTime',
  59 + value: '600000',
  60 + },
  61 + {
48 62 type: 'vue-color',
49 63 label: '背景颜色',
50 64 name: 'backgroundColor',
... ... @@ -53,7 +67,8 @@ export const screenConfig = {
53 67 value: '#000',
54 68 },
55 69 {
56   - type: 'custom-upload',
  70 + // type: 'custom-upload',
  71 + type: 'custom-upload-new',
57 72 label: '图片地址',
58 73 name: 'backgroundImage',
59 74 required: false,
... ...