monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 299afb5aa14ba80d57dc60a4ab44170ca06bbf2c 1 parent 7839e195

优化

Inline Side-by-side
Showing 10 changed files with 152 additions and 45 deletions
@@ -19,4 +19,4 @@ npm run build:prod @@ -19,4 +19,4 @@ npm run build:prod
19 - [avue](https://www.avuejs.com/): 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动 19 - [avue](https://www.avuejs.com/): 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动
20 - [vue-echarts](https://www.npmjs.com/package/vue-echarts/): vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发 20 - [vue-echarts](https://www.npmjs.com/package/vue-echarts/): vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发
21 - [vue-superslide](https://www.npmjs.com/package/vue-super-slider/): Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本 21 - [vue-superslide](https://www.npmjs.com/package/vue-super-slider/): Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本
22 -- [vuedraggable](https://github.com/SortableJS/Vue.Draggable/): 是一款基于Sortable.js实现的vue拖拽插件。  
  22 + - [vuedraggable](https://github.coqsam/SortableJS/Vue.Draggable/): 是一款基于Sortable.js实现的vue拖拽插件。
1 'use strict' 1 'use strict'
2 module.exports = { 2 module.exports = {
3 NODE_ENV: '"production"', 3 NODE_ENV: '"production"',
4 - BASE_API: '"./"' 4 + BASE_API: '"http://192.168.0.69:9095"'
5 } 5 }
@@ -2,6 +2,39 @@ import request from '@/utils/request' @@ -2,6 +2,39 @@ import request from '@/utils/request'
2 import { getShareToken, getToken } from "@/utils/auth"; 2 import { getShareToken, getToken } from "@/utils/auth";
3 import axios from 'axios'; 3 import axios from 'axios';
4 4
  5 +/**
  6 + * 获取url参数
  7 + * <p>
  8 + * 作者： Wang
  9 + * 时间：2022/1/27 16:15
  10 + */
  11 +function getQueryVariable(variable) {
  12 + var query = window.location.search.substring(1);
  13 + if (query == '') {
  14 + query = document.location.href
  15 + let args = query.split('?');
  16 + let arr = [];
  17 + if (args && args.length > 1) {
  18 + arr = args[1].split('&')
  19 + }
  20 + for (var i = 0; i < arr.length; i++) {
  21 + var pair = arr[i].split("=");
  22 + if (pair[0] == variable) {
  23 + return pair[1];
  24 + }
  25 + }
  26 + return (false);
  27 + }
  28 + var vars = query.split("&");
  29 + for (var i = 0; i < vars.length; i++) {
  30 + var pair = vars[i].split("=");
  31 + if (pair[0] == variable) {
  32 + return pair[1];
  33 + }
  34 + }
  35 + return (false);
  36 +}
  37 +
5 // 保存大屏设计 38 // 保存大屏设计
6 export function insertDashboard(data) { 39 export function insertDashboard(data) {
7 return request({ 40 return request({
@@ -39,6 +72,16 @@ export function detailBysetId(data) { @@ -39,6 +72,16 @@ export function detailBysetId(data) {
39 72
40 // 获取动态数据 73 // 获取动态数据
41 export function getData(data) { 74 export function getData(data) {
  75 + let contextData = data.contextData;
  76 + if(contextData && Object.keys(contextData).length > 0){
  77 + for(var item in contextData ){
  78 + let val = getQueryVariable(item);
  79 + if(val && val != false){
  80 + contextData[item] = val;
  81 + }
  82 + }
  83 + data.contextData = contextData;
  84 + }
42 return request({ 85 return request({
43 url: 'reportDashboard/getData', 86 url: 'reportDashboard/getData',
44 method: 'post', 87 method: 'post',

31.1 KB | W: | H:

368 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <!-- 左侧组件栏--> 15 <!-- 左侧组件栏-->
16 <el-tab-pane label="工具栏"> 16 <el-tab-pane label="工具栏">
17 <!-- <el-divider content-position="center">html</el-divider>--> 17 <!-- <el-divider content-position="center">html</el-divider>-->
18 - <draggable 18 +<!-- <draggable
19 v-for="widget in widgetTools" 19 v-for="widget in widgetTools"
20 :key="widget.code" 20 :key="widget.code"
21 @end="evt => widgetOnDragged(evt, widget.code)" 21 @end="evt => widgetOnDragged(evt, widget.code)"
@@ -26,7 +26,43 @@ @@ -26,7 +26,43 @@
26 </span> 26 </span>
27 <span class="tools-item-text">{{ widget.label }}</span> 27 <span class="tools-item-text">{{ widget.label }}</span>
28 </div> 28 </div>
29 - </draggable> 29 + </draggable>-->
  30 + <el-collapse v-model="activeNames" accordion>
  31 + <el-collapse-item name="system" class="collaps_header">
  32 + <template slot="title">
  33 + &nbsp;&nbsp;<i class="header-icon el-icon-s-tools"></i>&nbsp;&nbsp;系统组件
  34 + </template>
  35 + <draggable
  36 + v-for="widget in widgetTools"
  37 + :key="widget.code"
  38 + @end="evt => widgetOnDragged(evt, widget.code)"
  39 + >
  40 + <div class="tools-item">
  41 + <span class="tools-item-icon">
  42 + <i class="iconfont" :class="widget.icon"></i>
  43 + </span>
  44 + <span class="tools-item-text">{{ widget.label }}</span>
  45 + </div>
  46 + </draggable>
  47 + </el-collapse-item>
  48 + <el-collapse-item name="monitor">
  49 + <template slot="title">
  50 + &nbsp;&nbsp;<i class="header-icon el-icon-s-check"></i>&nbsp;&nbsp;监控自定义组件
  51 + </template>
  52 + <draggable
  53 + v-for="widget in monitorTools"
  54 + :key="widget.code"
  55 + @end="evt => widgetOnDragged(evt, widget.code)"
  56 + >
  57 + <div class="tools-item">
  58 + <span class="tools-item-icon">
  59 + <i class="iconfont" :class="widget.icon"></i>
  60 + </span>
  61 + <span class="tools-item-text">{{ widget.label }}</span>
  62 + </div>
  63 + </draggable>
  64 + </el-collapse-item>
  65 + </el-collapse>
30 </el-tab-pane> 66 </el-tab-pane>
31 <!-- 左侧图层--> 67 <!-- 左侧图层-->
32 <el-tab-pane label="图层"> 68 <el-tab-pane label="图层">
@@ -286,7 +322,7 @@ import { @@ -286,7 +322,7 @@ import {
286 importDashboard, 322 importDashboard,
287 exportDashboard 323 exportDashboard
288 } from "@/api/bigscreen"; 324 } from "@/api/bigscreen";
289 -import { widgetTools, getToolByCode } from "./tools/index"; 325 +import { widgetTools,monitorTools, getToolByCode } from "./tools/index";
290 import widget from "./widget/widget.vue"; 326 import widget from "./widget/widget.vue";
291 import dynamicForm from "./designerComponents/dynamicForm.vue"; 327 import dynamicForm from "./designerComponents/dynamicForm.vue";
292 import draggable from "vuedraggable"; 328 import draggable from "vuedraggable";
@@ -312,6 +348,8 @@ export default { @@ -312,6 +348,8 @@ export default {
312 grade: false, 348 grade: false,
313 layerWidget: [], 349 layerWidget: [],
314 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 350 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
  351 + monitorTools:monitorTools,
  352 + activeNames:'monitor',
315 widthLeftForTools: 200, // 左侧工具栏宽度 353 widthLeftForTools: 200, // 左侧工具栏宽度
316 widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度 354 widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
317 widthLeftForOptions: 300, // 右侧属性配置区 355 widthLeftForOptions: 300, // 右侧属性配置区
@@ -879,6 +917,17 @@ export default { @@ -879,6 +917,17 @@ export default {
879 </script> 917 </script>
880 918
881 <style scoped lang="scss"> 919 <style scoped lang="scss">
  920 +.collaps_header{
  921 +
  922 +}
  923 +.collaps_header>div{
  924 + background-color: none!important;
  925 + color: white!important;
  926 +}
  927 +.el-collapse-item__content1{
  928 + background-color: none!important;
  929 + color: white!important;
  930 +}
882 .mr10 { 931 .mr10 {
883 margin-right: 10px; 932 margin-right: 10px;
884 } 933 }
@@ -1279,4 +1328,5 @@ li { @@ -1279,4 +1328,5 @@ li {
1279 /deep/ .vue-ruler-v { 1328 /deep/ .vue-ruler-v {
1280 opacity: 0.3; 1329 opacity: 0.3;
1281 } 1330 }
  1331 +
1282 </style> 1332 </style>
1 /* 1 /*
2 * @Descripttion: 文本json文件 2 * @Descripttion: 文本json文件
3 - * @version: 3 + * @version:
4 * @Author: qianlishi 4 * @Author: qianlishi
5 * @Date: 2021-08-29 06:52:13 5 * @Date: 2021-08-29 06:52:13
6 * @LastEditors: qianlishi 6 * @LastEditors: qianlishi
@@ -179,4 +179,4 @@ export const widgetText = { @@ -179,4 +179,4 @@ export const widgetText = {
179 }, 179 },
180 ], 180 ],
181 } 181 }
182 - }  
  182 + }
1 /* 1 /*
2 * @Descripttion: 主文件 2 * @Descripttion: 主文件
3 - * @version: 3 + * @version:
4 * @Author: qianlishi 4 * @Author: qianlishi
5 * @Date: 2021-08-29 06:43:07 5 * @Date: 2021-08-29 06:43:07
6 * @LastEditors: qianlishi 6 * @LastEditors: qianlishi
7 * @LastEditTime: 2021-08-29 08:00:59 7 * @LastEditTime: 2021-08-29 08:00:59
8 */ 8 */
9 -import { widgetTool } from "./main" 9 +import { widgetTool,monitor } from "./main"
10 const screenConfig = { 10 const screenConfig = {
11 code: 'screen', 11 code: 'screen',
12 type: 'screen', 12 type: 'screen',
@@ -70,6 +70,10 @@ const widgetTools = [ @@ -70,6 +70,10 @@ const widgetTools = [
70 ...widgetTool 70 ...widgetTool
71 ] 71 ]
72 72
  73 +const monitorTools = [
  74 + ...monitor
  75 +]
  76 +
73 const getToolByCode = function (code) { 77 const getToolByCode = function (code) {
74 // 获取大屏底层设置属性 78 // 获取大屏底层设置属性
75 if (code == 'screen') { 79 if (code == 'screen') {
@@ -79,7 +83,12 @@ const getToolByCode = function (code) { @@ -79,7 +83,12 @@ const getToolByCode = function (code) {
79 var item = widgetTools.find(function (item, index, arrs) { 83 var item = widgetTools.find(function (item, index, arrs) {
80 return item.code === code 84 return item.code === code
81 }) 85 })
  86 + if(!item){
  87 + item = monitorTools.find(function (item, index, arrs) {
  88 + return item.code === code
  89 + })
  90 + }
82 return item 91 return item
83 } 92 }
84 93
85 -export {widgetTools, getToolByCode} 94 +export {widgetTools,monitorTools, getToolByCode}
@@ -40,37 +40,42 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon @@ -40,37 +40,42 @@ import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/mon
40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table"; 40 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border"; 41 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
42 42
43 -export const widgetTool = [  
44 - // type=html类型的组件  
45 - widgetText,  
46 - widgetMarquee,  
47 - widgetHref,  
48 - widgetTime,  
49 - widgetImage,  
50 - // widgetSliders,  
51 - widgetVideo,  
52 - widgetTable,  
53 - widgetIframe,  
54 - // widgetUniversal,  
55 - widgetBarchart,  
56 - widgetGradientBarchart,  
57 - widgetLinechart,  
58 - widgetBarlinechart,  
59 - widgetPiechart,  
60 - widgetFunnel,  
61 - widgetGauge,  
62 - widgetMap,  
63 - WidgetPieNightingale,  
64 - widgetPiePercentage,  
65 - widgetAirbubbleMap,  
66 - widgetBarStack,  
67 - widgetLineStack,  
68 - widgetBarCompare,  
69 - widgetLineCompare,  
70 - widgetDecoratePie,  
71 - monitorHealthStatus,  
72 - monitorResourceStatus,  
73 - monitorBasicInformation,  
74 - monitorDetailTable,  
75 - monitorBgBorder  
76 -] 43 +
  44 +export const {widgetTool,monitor} = {
  45 + widgetTool : [
  46 + // type=html类型的组件
  47 + widgetText,
  48 + widgetMarquee,
  49 + widgetHref,
  50 + widgetTime,
  51 + widgetImage,
  52 + // widgetSliders,
  53 + widgetVideo,
  54 + widgetTable,
  55 + widgetIframe,
  56 + // widgetUniversal,
  57 + widgetBarchart,
  58 + widgetGradientBarchart,
  59 + widgetLinechart,
  60 + widgetBarlinechart,
  61 + widgetPiechart,
  62 + widgetFunnel,
  63 + widgetGauge,
  64 + widgetMap,
  65 + WidgetPieNightingale,
  66 + widgetPiePercentage,
  67 + widgetAirbubbleMap,
  68 + widgetBarStack,
  69 + widgetLineStack,
  70 + widgetBarCompare,
  71 + widgetLineCompare,
  72 + widgetDecoratePie
  73 + ],
  74 + monitor:[
  75 + monitorHealthStatus,
  76 + monitorResourceStatus,
  77 + monitorBasicInformation,
  78 + monitorDetailTable,
  79 + monitorBgBorder
  80 + ]
  81 +}
@@ -189,7 +189,7 @@ export default { @@ -189,7 +189,7 @@ export default {
189 viewDesign(val) { 189 viewDesign(val) {
190 var routeUrl = this.$router.resolve({ 190 var routeUrl = this.$router.resolve({
191 path: "/bigscreen/viewer", 191 path: "/bigscreen/viewer",
192 - query: { reportCode: val.reportCode } 192 + query: { reportCode: val.reportCode ,test:1}
193 }); 193 });
194 window.open(routeUrl.href, "_blank"); 194 window.open(routeUrl.href, "_blank");
195 } 195 }