ui / vuedashboard

Go to a project
Toggle navigation
Toggle navigation pinning
孙玉明
c1ea4a7b 0 parents

0.1

Inline Side-by-side
Showing 21 changed files with 610 additions and 0 deletions
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
# vue-dashboard
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Run your tests
```
npm run test
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
module.exports = {
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
]
]
};
This diff could not be displayed because it is too large.
{
"name": "vue-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.3.8",
"axios": "^0.18.0",
"core-js": "^2.6.5",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"vue": "^2.6.6",
"vue-grid-layout": "^2.3.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.11.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-dashboard</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-dashboard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<setting
:layout="layout"
:isDraggable="isDraggable"
:isResizable="isResizable"
@isLock="isLock"
/>
<layout :layout="layout" :isDraggable="isDraggable" :isResizable="isResizable"/>
</div>
</template>
<script>
import setting from "./components/setting";
import layout from "./components/layout";
export default {
name: "app",
components: {
setting,
layout
},
mounted() {
this.$inventory
.list({
fragmentType: "dashboard!name!home"
})
.then(list => {
if (list.managedObjects.length === 0) {
return this.$inventory
.create({
"dashboard!name!home": {}
})
.then(detail => {
this.id = detail.id;
});
} else {
this.id = list.managedObjects[0].id;
}
});
},
data() {
return {
layout: [],
isDraggable: true,
isResizable: true,
id: null
};
},
methods: {
isLock: function(val) {
this.isDraggable = val.isDraggable;
this.isResizable = val.isResizable;
this.$message.success(
val.isResizable && val.isDraggable ? "编辑已解锁" : "编辑已锁定"
);
}
}
};
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
}
</style>
import axios from "axios";
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers["Authorization"] =
"Basic c3VueXVtaW5nL3N1bnl1bWluZzpoZWxsb0AxMjM=";
return config;
},
error => {
return Promise.reject(error);
}
);
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
export function post(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data, config).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
export function put(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data, config).then(
response => {
resolve(response.data);
},
err => {
reject(err);
}
);
});
}
import { get, post, put } from "./index";
let path = "/inventory/managedObjects";
let NAMESPACE = "application/vnd.com.nsn.cumulocity.";
let config = {
headers: {
"Content-Type": `${NAMESPACE}managedObject+json`,
Accept: `${NAMESPACE}managedObject+json`
}
};
function buildDetailUrl(mo) {
let id = mo && (mo.id || mo);
return id && `${path}/${id}`;
}
function list(filters = {}) {
let url = path;
let params = filters;
return get(url, params);
}
function create(mo) {
let url = path;
return post(url, mo, config);
}
function update(mo) {
let url = buildDetailUrl(mo);
return put(url, mo, config);
}
let inventory = {
list,
create,
update
};
export { inventory };
<template>
<div class="gridComponent">
<div class="setting">
<a-button
size="small"
shape="circle"
icon="close"
@click="close"
v-show="isDraggable&&isResizable"
></a-button>
<a-button
size="small"
shape="circle"
icon="setting"
v-show="isDraggable&&isResizable"
></a-button>
</div>
<component :is="layout.name" :isConfig="isConfig"></component>
</div>
</template>
<style lang="less" scoped>
.gridComponent {
height: 100%;
}
.setting {
position: absolute;
bottom: 0;
}
</style>
<script>
export default {
props: {
layout: Object,
index: Number,
isDraggable: Boolean,
isResizable: Boolean
},
data() {
return {
isConfig: false
};
},
methods: {
close: function() {
this.$emit("close", this.index);
}
}
};
</script>
<template>
<grid-layout
:layout.sync="layout"
:col-num="100"
:row-height="30"
:is-draggable="isDraggable"
:is-resizable="isResizable"
:is-mirrored="false"
:vertical-compact="true"
:margin="[0, 0]"
:use-css-transforms="true"
>
<grid-item
v-for="(item,index) in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:minW="item.minW"
:maxW="item.maxW"
:minH="item.minH"
:maxH="item.maxH"
:key="item.i"
>
<gridComponent :isDraggable="isDraggable" :isResizable="isResizable" :layout="item" :index="index" @close="close"/>
</grid-item>
</grid-layout>
</template>
<script>
import VueGridLayout from "vue-grid-layout";
import gridComponent from "./gridComponent";
export default {
props: {
layout: Array,
isDraggable: Boolean,
isResizable: Boolean
},
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
gridComponent
},
methods:{
close:function(val){
this.layout.splice(val,1)
}
}
};
</script>
<template>
<div class="setting">
<a-button
size="small"
shape="circle"
icon="plus"
@click="() => visible = true"
v-show="isDraggable&&isResizable"
></a-button>
<a-button size="small" shape="circle" icon="lock" @click="isLock"></a-button>
<a-modal
title="添加小部件"
centered
v-model="visible"
@ok="add"
:destroyOnClose="true"
:maskClosable="false"
:okButtonProps="{ props: {disabled: selectItem===null?true:false} }"
>
<a-select
showSearch
placeholder="搜索小部件"
optionFilterProp="children"
style="width: 100%"
:filterOption="filterOption"
@change="handleChange"
>
<a-select-option v-for="item in list" :key="item" :value="item">{{item}}</a-select-option>
</a-select>
<component :is="configSelect"></component>
</a-modal>
</div>
</template>
<style lang="less" scoped>
.setting {
position: fixed;
top: 10px;
right: 30px;
z-index: 1;
}
</style>
<script>
export default {
props: {
layout: Array,
isDraggable: Boolean,
isResizable: Boolean
},
data() {
return {
isDraggable1: this.isDraggable,
isResizable1: this.isResizable,
visible: false,
list: window.componentList,
selectItem: null,
configSelect: null
};
},
methods: {
isLock: function() {
this.$emit("isLock", {
isDraggable: !this.isDraggable,
isResizable: !this.isResizable
});
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
);
},
handleChange: function(value) {
this.selectItem = value;
if (window.componentAll.indexOf(value + "Config") > -1) {
this.configSelect = value + "Config";
} else {
this.configSelect = value;
}
},
add: function() {
this.layout.push({
x: 0,
y: 0,
w: 10,
h: 2,
i: this.layout.length + 1,
name: this.selectItem
});
this.visible = false;
}
}
};
</script>
import Vue from "vue";
import App from "./App.vue";
import { camelCase } from "lodash";
import { Modal, Button, Select, message } from "ant-design-vue";
import { inventory } from "./api/inventory";
Vue.config.productionTip = false;
Vue.use(Modal);
Vue.use(Button);
Vue.use(Select);
Vue.prototype.$message = message;
Vue.prototype.$inventory = inventory;
const requireComponent = require.context("./views", true, /.(vue|js)$/);
const componentList = [];
const componentAll = [];
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName);
const componentName = camelCase(fileName.split("/")[1]);
if (componentList.indexOf(componentName) === -1) {
componentList.push(componentName);
}
componentAll.push(componentConfig.default.name);
Vue.component(
componentConfig.default.name,
componentConfig.default || componentConfig
);
});
window.componentList = componentList;
window.componentAll = componentAll;
new Vue({
el: "#app",
render: h => h(App)
});
<template>
<input type="text" placeholder="index0">
</template>
<script>
export default {
name:'index0Config'
}
</script>
<template>
<div class="index0">
</div>
</template>
<style lang="less" scoped>
.index0 {
height: 100%;
background: red;
color: #fff;
}
</style>
<script>
export default {
name: "index0"
};
</script>
<template>
<input type="text" placeholder="index1">
</template>
<script>
export default {
name:'index1Config'
}
</script>
<template>
<div class="index1"></div>
</template>
<style lang="less" scoped>
.index1 {
height: 100%;
background: green;
color: #fff;
}
</style>
<script>
import config from "./config";
export default {
name: "index1",
components: {
config
}
};
</script>
<template>
<div class="index2"></div>
</template>
<style lang="less" scoped>
.index2 {
height: 100%;
background: yellow;
color: #fff;
}
</style>
<script>
export default {
name: "index2"
};
</script>
module.exports = {
devServer: {
proxy: "https://sunyuming.quarkioe.cn/"
}
};