monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 5c12e04656ff5553875eb79d927f46b8dc2615b8 2 parents cad8a1f4 4a1d9318

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/anji-plus-report int… 

…o master-ajreport-lushangqing
Inline Side-by-side
Showing 15 changed files with 157 additions and 50 deletions
... ... @@ -19,4 +19,4 @@ npm run build:prod
- [avue](https://www.avuejs.com/): 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动
- [vue-echarts](https://www.npmjs.com/package/vue-echarts/): vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发
- [vue-superslide](https://www.npmjs.com/package/vue-super-slider/): Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本
- [vuedraggable](https://github.com/SortableJS/Vue.Draggable/): 是一款基于Sortable.js实现的vue拖拽插件。
\ No newline at end of file
- [vuedraggable](https://github.coqsam/SortableJS/Vue.Draggable/): 是一款基于Sortable.js实现的vue拖拽插件。
\ No newline at end of file
... ...
... ... @@ -61,7 +61,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: resolve('static/favicon.ico'),
favicon: resolve('static/hg.png'),
title: 'vue-admin-template'
})
]
... ...
... ... @@ -60,7 +60,7 @@ const webpackConfig = merge(baseWebpackConfig, {
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: resolve('static/favicon.ico'),
favicon: resolve('static/hg.png'),
title: 'vue-admin-template',
minify: {
removeComments: true,
... ...
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"./"'
BASE_API: '"http://192.168.0.69:9095"'
}
... ...
... ... @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>AJ-Report</title>
<title>鸿果页面设计器</title>
<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
... ...
... ... @@ -2,6 +2,39 @@ import request from '@/utils/request'
import { getShareToken, getToken } from "@/utils/auth";
import axios from 'axios';
/**
* 获取url参数
* <p>
* 作者： Wang
* 时间：2022/1/27 16:15
*/
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
if (query == '') {
query = document.location.href
let args = query.split('?');
let arr = [];
if (args && args.length > 1) {
arr = args[1].split('&')
}
for (var i = 0; i < arr.length; i++) {
var pair = arr[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
// 保存大屏设计
export function insertDashboard(data) {
return request({
... ... @@ -39,6 +72,16 @@ export function detailBysetId(data) {
// 获取动态数据
export function getData(data) {
let contextData = data.contextData;
if(contextData && Object.keys(contextData).length > 0){
for(var item in contextData ){
let val = getQueryVariable(item);
if(val && val != false){
contextData[item] = val;
}
}
data.contextData = contextData;
}
return request({
url: 'reportDashboard/getData',
method: 'post',
... ...

31.1 KB | W: | H:

368 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<template>
<el-scrollbar wrap-class="scrollbar-wrapper">
<div class="admin-title" @click="goBigScreen">
<img src="../../../../../static/logo-dp.png" width="50" class="mt10" />
<img src="../../../../../static/hg.png" width="50" class="mt10" />
</div>
<el-menu :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" mode="vertical">
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
... ...
... ... @@ -15,7 +15,7 @@
<!-- 左侧组件栏-->
<el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>-->
<draggable
<!-- <draggable
v-for="widget in widgetTools"
:key="widget.code"
@end="evt => widgetOnDragged(evt, widget.code)"
... ... @@ -26,7 +26,43 @@
</span>
<span class="tools-item-text">{{ widget.label }}</span>
</div>
</draggable>
</draggable>-->
<el-collapse v-model="activeNames" accordion>
<el-collapse-item name="system" class="collaps_header">
<template slot="title">
&nbsp;&nbsp;<i class="header-icon el-icon-s-tools"></i>&nbsp;&nbsp;系统组件
</template>
<draggable
v-for="widget in widgetTools"
:key="widget.code"
@end="evt => widgetOnDragged(evt, widget.code)"
>
<div class="tools-item">
<span class="tools-item-icon">
<i class="iconfont" :class="widget.icon"></i>
</span>
<span class="tools-item-text">{{ widget.label }}</span>
</div>
</draggable>
</el-collapse-item>
<el-collapse-item name="monitor">
<template slot="title">
&nbsp;&nbsp;<i class="header-icon el-icon-s-check"></i>&nbsp;&nbsp;监控自定义组件
</template>
<draggable
v-for="widget in monitorTools"
:key="widget.code"
@end="evt => widgetOnDragged(evt, widget.code)"
>
<div class="tools-item">
<span class="tools-item-icon">
<i class="iconfont" :class="widget.icon"></i>
</span>
<span class="tools-item-text">{{ widget.label }}</span>
</div>
</draggable>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
<!-- 左侧图层-->
<el-tab-pane label="图层">
... ... @@ -286,7 +322,7 @@ import {
importDashboard,
exportDashboard
} from "@/api/bigscreen";
import { widgetTools, getToolByCode } from "./tools/index";
import { widgetTools,monitorTools, getToolByCode } from "./tools/index";
import widget from "./widget/widget.vue";
import dynamicForm from "./designerComponents/dynamicForm.vue";
import draggable from "vuedraggable";
... ... @@ -312,6 +348,8 @@ export default {
grade: false,
layerWidget: [],
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
monitorTools:monitorTools,
activeNames:'monitor',
widthLeftForTools: 200, // 左侧工具栏宽度
widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
widthLeftForOptions: 300, // 右侧属性配置区
... ... @@ -879,6 +917,17 @@ export default {
</script>
<style scoped lang="scss">
.collaps_header{
}
.collaps_header>div{
background-color: none!important;
color: white!important;
}
.el-collapse-item__content1{
background-color: none!important;
color: white!important;
}
.mr10 {
margin-right: 10px;
}
... ... @@ -1279,4 +1328,5 @@ li {
/deep/ .vue-ruler-v {
opacity: 0.3;
}
</style>
... ...
/*
* @Descripttion: 文本json文件
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 06:52:13
* @LastEditors: qianlishi
... ... @@ -179,4 +179,4 @@ export const widgetText = {
},
],
}
}
\ No newline at end of file
}
... ...
/*
* @Descripttion: 主文件
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 06:43:07
* @LastEditors: qianlishi
* @LastEditTime: 2021-08-29 08:00:59
*/
import { widgetTool } from "./main"
import { widgetTool,monitor } from "./main"
const screenConfig = {
code: 'screen',
type: 'screen',
... ... @@ -70,6 +70,10 @@ const widgetTools = [
...widgetTool
]
const monitorTools = [
...monitor
]
const getToolByCode = function (code) {
// 获取大屏底层设置属性
if (code == 'screen') {
... ... @@ -79,7 +83,12 @@ const getToolByCode = function (code) {
var item = widgetTools.find(function (item, index, arrs) {
return item.code === code
})
if(!item){
item = monitorTools.find(function (item, index, arrs) {
return item.code === code
})
}
return item
}
export {widgetTools, getToolByCode}
export {widgetTools,monitorTools, getToolByCode}
... ...
... ... @@ -41,38 +41,43 @@ import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-
import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
export const widgetTool = [
// type=html类型的组件
widgetText,
widgetMarquee,
widgetHref,
widgetTime,
widgetImage,
// widgetSliders,
widgetVideo,
widgetTable,
widgetIframe,
// widgetUniversal,
widgetBarchart,
widgetGradientBarchart,
widgetLinechart,
widgetBarlinechart,
widgetPiechart,
widgetFunnel,
widgetGauge,
widgetMap,
WidgetPieNightingale,
widgetPiePercentage,
widgetAirbubbleMap,
widgetBarStack,
widgetLineStack,
widgetBarCompare,
widgetLineCompare,
widgetDecoratePie,
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate
]
export const {widgetTool,monitor} = {
widgetTool : [
// type=html类型的组件
widgetText,
widgetMarquee,
widgetHref,
widgetTime,
widgetImage,
// widgetSliders,
widgetVideo,
widgetTable,
widgetIframe,
// widgetUniversal,
widgetBarchart,
widgetGradientBarchart,
widgetLinechart,
widgetBarlinechart,
widgetPiechart,
widgetFunnel,
widgetGauge,
widgetMap,
WidgetPieNightingale,
widgetPiePercentage,
widgetAirbubbleMap,
widgetBarStack,
widgetLineStack,
widgetBarCompare,
widgetLineCompare,
widgetDecoratePie
],
monitor:[
monitorHealthStatus,
monitorResourceStatus,
monitorBasicInformation,
monitorDetailTable,
monitorBgBorder,
monitorGaugeRate
]
}
... ...
... ... @@ -189,7 +189,7 @@ export default {
viewDesign(val) {
var routeUrl = this.$router.resolve({
path: "/bigscreen/viewer",
query: { reportCode: val.reportCode }
query: { reportCode: val.reportCode ,test:1}
});
window.open(routeUrl.href, "_blank");
}
... ...