Commit 4beca7bb authored by 董国亮's avatar 董国亮

应用开发引擎前端代码初始化

parent 0ad6981d
...@@ -28,4 +28,10 @@ module.exports = { ...@@ -28,4 +28,10 @@ module.exports = {
static: './dist/wj-data-vision-new', static: './dist/wj-data-vision-new',
resource: '../wj-data-vision-new', resource: '../wj-data-vision-new',
}, },
'wj-developer': {
port: '9400',
path: '/wj-developer',
static: './dist/wj-developer',
resource: '../wj-developer',
},
} }
.DS_Store
node_modules/
dist/
../.idea/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
yarn.lock
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
};
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-plugin-router": "^4.5.7",
"@vue/cli-plugin-vuex": "^4.5.7",
"@vue/cli-service": "^4.5.7",
"chalk": "^3.0.0",
"commander": "^4.1.1",
"compression-webpack-plugin": "^3.1.0",
"core-js": "^3.6.5",
"fs-extra": "^8.1.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"shelljs": "^0.8.4",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"Chrome 49"
],
"dependencies": {
"element-ui": "^2.15.13",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.4.6",
"vuex": "^3.5.1"
}
}
<!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 %>logo.png" />
<title>应用开发引擎</title>
<link href="/cdn/libs/normalize/normalize.css" rel="stylesheet" />
<link href="/cdn/libs/st-ui/st-ui.css" rel="stylesheet" />
<link href="/cdn/font/font.css" rel="stylesheet" />
<script src="/cdn/libs/lodash/lodash.js"></script>
<script src="/cdn/libs/st-util/st-util.js"></script>
<script src="/cdn/libs/st-dao/st-dao.js"></script>
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<script src="/cdn/libs/st-ui/st-ui.js"></script>
<link href="/cdn/libs/example/styles/lib.css" rel="stylesheet" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but app 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>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="less" scoped>
#app {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1594193323699" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1615" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M494.762667 457.784889A56.888889 56.888889 0 0 1 566.613333 527.928889l191.829334 187.335111a28.444444 28.444444 0 1 1-39.765334 40.732444L525.482667 567.296a57.002667 57.002667 0 0 1-69.063111-67.470222L279.267556 326.826667a28.444444 28.444444 0 0 1 39.765333-40.732445l175.786667 171.690667z m-171.235556-47.957333l77.767111 75.889777a113.777778 113.777778 0 0 0 139.605334 136.362667l50.346666 49.208889c-25.770667 7.566222-52.167111 11.377778-79.246222 11.377778-104.675556 0-199.509333-58.709333-284.330667-176.128 30.947556-39.253333 62.919111-71.452444 95.857778-96.711111z m105.528889-55.978667C456.078222 345.486222 483.726222 341.333333 512 341.333333c104.675556 0 199.566222 56.888889 284.444444 170.666667-31.687111 42.496-64.853333 77.027556-99.271111 103.651556L621.795556 542.037333a113.891556 113.891556 0 0 0-142.449778-139.093333l-50.289778-49.095111z" fill="#c0c4cc" p-id="1616"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1594193313007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1418" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M446.464 471.04c0 10.24 2.048 22.528 6.144 30.72 4.096 10.24 10.24 18.432 18.432 26.624 8.192 8.192 16.384 14.336 26.624 18.432 10.24 4.096 20.48 6.144 30.72 6.144 10.24 0 22.528-2.048 30.72-6.144 10.24-4.096 18.432-10.24 26.624-18.432 8.192-8.192 14.336-16.384 18.432-26.624 4.096-10.24 6.144-20.48 6.144-30.72 0-10.24-2.048-22.528-6.144-30.72-4.096-10.24-10.24-18.432-18.432-26.624-8.192-8.192-16.384-14.336-26.624-18.432-10.24-4.096-20.48-6.144-30.72-6.144-10.24 0-22.528 2.048-30.72 6.144-10.24 4.096-18.432 10.24-26.624 18.432-8.192 8.192-14.336 16.384-18.432 26.624C448.512 448.512 446.464 460.8 446.464 471.04L446.464 471.04zM446.464 471.04" p-id="1419" fill="#c0c4cc"></path><path d="M524.288 270.336C327.68 270.336 223.232 471.04 223.232 471.04s137.216 202.752 309.248 202.752c172.032 0 305.152-202.752 305.152-202.752S718.848 270.336 524.288 270.336L524.288 270.336zM530.432 618.496c-81.92 0-147.456-65.536-147.456-147.456 0-81.92 65.536-147.456 147.456-147.456 81.92 0 147.456 65.536 147.456 147.456C677.888 552.96 610.304 618.496 530.432 618.496L530.432 618.496zM530.432 618.496" p-id="1420" fill="#c0c4cc"></path></svg>
\ No newline at end of file
.mapabcgl-popup-close-button{
color: #000 !important;
}
.el-dialog__wrapper {
.el-dialog__header {
height: 39px;
padding: 8px 20px 9px 18px;
background: #3a84ff;
border-bottom: 1px solid #d2d2d2;
font-size: 16px;
}
.el-dialog__header .el-dialog__headerbtn {
position: absolute;
top: 10px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px;
}
.el-dialog__title {
font-weight: 400;
letter-spacing: 1px;
color: #fff;
font-size: 16px;
}
.el-dialog {
width: 438px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.el-dialog__footer .el-button {
width: 80px;
height: 32px;
background: #3a84ff;
border-radius: 4px;
border: 1px solid #3a84ff;
}
.el-dialog__body {
padding: 40px 41px 0 35px;
}
.el-dialog__footer {
padding: 10px 41px 30px;
}
.el-dialog__body .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
.el-dialog__body .el-form-item__label {
padding: 0 10px 10px 0;
color: #61666e;
font-size: 12px;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff;
}
}
.el-table th {
background-color: #eef1f6;
}
.common-tree {
overflow: auto;
}
.el-cascader--small{
width: 100%;
}
.el-scrollbar__wrap {
overflow-y: auto!important;
overflow-x: hidden!important;
}
#servicePortal .headBreadcrumb{
background:#fff;
border-bottom:none;
margin-top: 8px;
}
.automarginreg .dialog-footer{
position: absolute;
bottom: 10px;
right: 31px;
}
.el-button{
font-size:12px;
padding: 0 20px;
height: 28px;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: rgba(144,147,153,.3);
border-radius: 5px;
}
\ No newline at end of file
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
*{box-sizing: border-box;}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}HTML,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td{border:0;font-family:"微软雅黑","黑体","宋体";font-size:14px;margin:0;padding:0}html,body{height:100%;width:100%}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}a{text-decoration:none}a:link{color:#fff}a:visited{color:#fff}a:hover{color:#fff}a:active{color:#fff}input::-ms-clear{display:none}input::-ms-reveal{display:none}input{-webkit-appearance:none;margin:0;outline:0;padding:0}input::-webkit-input-placeholder{color:#ccc}input::-ms-input-placeholder{color:#ccc}input::-moz-placeholder{color:#ccc}input[type=submit],input[type=button]{cursor:pointer}button[disabled],input[disabled]{cursor:default}img{border:0}ul,ol,li{list-style-type:none}.clear{clear:both}.clearleft{clear:left}.clearright{clear:right}.floatleft{float:left}.floatright{float:right}.cursor{cursor:pointer}.bg000{background:#000}.color000{color:#000}
\ No newline at end of file
<template>
<div class="headBreadcrumb" v-if="data.length">
<div class="breadcrumbContainer">
<span class="fa fa-map-marker"></span>
<div class="breadcrumbBody">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="item in data" :key="item.path || item.name">{{
item.name
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</div>
</template>
<script>
export default {
computed: {
data() {
const menu = this.$store.getters.menu;
const path = this.$route.matched[0].path;
const params = this.$route.params;
const current = menu.find(v => v.url === path);
if (!current) {
return [];
}
const data = [];
function execute(id) {
const value = menu.find(v => v.id === id);
if (value) {
data.unshift({
id: value.id,
name: value.name,
path: value.url ? __.url.pathToRegexp.compile(value.url)(params) : null
});
value.parentId && execute(value.parentId);
}
}
execute(current.id);
return data;
}
}
};
</script>
<style lang="less" scoped>
.headBreadcrumb {
height: 50px;
width: 100%;
position: relative;
border-bottom: 1px solid rgb(220, 220, 220);
.breadcrumbContainer {
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
> span {
float: left;
font-size: 18px;
color: #adadaf;
margin-right: 8px;
position: relative;
top: -2px;
}
> .breadcrumbBody {
float: left;
.el-breadcrumb__inner {
color: #2c3e50 !important;
font-family: Source Han Sans CN;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
font-weight: 100 !important;
}
}
}
}
</style>
<template>
<div>
<el-tree
:check-strictly="checkStrictly"
:show-checkbox="showCheckbox"
empty-text="暂无数据"
:highlight-current = "highlightCurrent"
:default-expand-all = "defaultExpandAll"
:expand-on-click-node="expandOnClickNode"
:data="treeList"
:node-key="nodeKey"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
@check="handleCheck"
:props="defaultProps"
:current-node-key="currentNodeKey"
:render-content="renderContent"
ref="tree">
<slot name="slotTree">
</slot>
</el-tree>
</div>
</template>
<script>
export default {
name: "index.vue",
props: {
//tree数据
treeList: {
type: Array
},
//自定义节点内容相关配置
defaultProps: {
type: Object,
default() {
return {
children: "children",
label: "label"
};
}
},
//唯一标识的属性
nodeKey: {
type: String,
default() {
return "id";
}
},
//选中节点
currentNodeKey:{
type:String
},
//是否默认展开所有节点
defaultExpandAll:{
type: Boolean,
default() {
return false
}
},
//树节点的内容区的渲染
renderContent :{
type:Object,
},
//节点是否高亮
highlightCurrent:{
type: Boolean,
default() {
return true
}
},
//是否显示复选框
showCheckbox:{
type: Boolean,
default() {
return false
}
},
//是否在点击节点的时候展开或者收缩节点(设置为false后,点击箭头才能展开收缩)
expandOnClickNode:{
type: Boolean,
default() {
return true
}
},
//在显示复选框的情况下,是否严格的遵循父子不互相关联的做法
checkStrictly: {
type: Boolean,
default() {
return false
}
},
},
data() {
return {
filterText:""
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods:{
//监听筛选
filterTree(data) {
this.filterText = data
},
//点击树节点
handleNodeClick(data,node) {
this.$emit("handleNodeClick", data,node);
},
//通过 node 获取节点
getCheckedNodes() {
this.$emit("getCheckedNodes", this.$refs.tree.getCheckedNodes())
},
//通过 key 获取节点
getCheckedKeys() {
this.$emit("getCheckedKeys", this.$refs.tree.getCheckedKeys())
},
//通过 node 设置节点 入参类型array
setCheckedNodes(arr) {
this.$refs.tree.setCheckedNodes(arr);
},
//通过 key 设置节点 入参类型array
setCheckedKeys(arr) {
this.$refs.tree.setCheckedKeys(arr);
},
//清空
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
//点击复选框
handleCheck(checkedKeys,checkedNodes,halfCheckedKeys,halfCheckedNodes){
let params= {
checkedKeys,
checkedNodes,
halfCheckedKeys,
halfCheckedNodes
}
this.$emit("handleCheck", params);
},
// 触发页面显示配置的筛选
filterNode(value, data, node) {
// 如果什么都没填就直接返回
if (!value) return true;
// 如果传入的value和data中的label相同说明是匹配到了
if (data[this.defaultProps.label].indexOf(value) !== -1) {
return true;
}
// 否则要去判断它是不是选中节点的子节点
return this.checkBelongToChooseNode(value, data, node);
},
// 判断传入的节点是不是选中节点的子节点
checkBelongToChooseNode(value, data, node) {
const level = node.level;
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false;
}
// 先取当前节点的父节点
let parentData = node.parent;
// 遍历当前节点的父节点
let index = 0;
while (index < level - 1) {
// 如果匹配到直接返回
if (parentData.data[this.defaultProps.label].indexOf(value) !== -1) {
return true;
}
// 否则的话再往上一层做匹配
parentData = parentData.parent;
index ++;
}
// 没匹配到返回false
return false;
},
}
}
</script>
<style scoped>
</style>
<template>
<stms-scrollbar>
<div ref="mesTable" class="mes__table">
<span id="size" ref="size"></span>
<el-table
@expand-change="expand"
@cell-mouse-leave="move"
:data="tableData"
style="width:100%"
@selection-change="selectChange"
:stripe="!sampleColor"
:max-height="height"
v-loading="tableLoading"
element-loading-text="拼命加载中"
>
<el-table-column v-if="showCheckBox" type="selection" width="40"> </el-table-column>
<el-table-column type="index" label="序号" width="70" fixed></el-table-column>
<slot name="head"></slot>
<el-table-column
v-for="item in tableOption"
:key="item.id"
:prop="item.prop"
:label="item.label"
:min-width="item.width"
>
<!-- slot为true时进行自定义数据 -->
<template slot-scope="scope">
<slot v-if="item.slot" :name="item.prop" :row="scope.row"></slot>
<span v-else>{{ scope.row[item.prop] || "--" }}</span>
</template>
</el-table-column>
<slot name="prop"></slot>
<slot name="operationTool"></slot>
</el-table>
<el-pagination
background
v-if="pageSize"
@size-change="sizeChange"
@current-change="pageChange"
:current-page="pageNum"
:page-size="pageSize"
layout="sizes,total, prev, pager, next, jumper"
:total="total"
:pager-count="5"
></el-pagination>
</div>
</stms-scrollbar>
</template>
<script>
export default {
props: {
tableOption: {},
tableData: {},
tableLoading: {},
total: {},
pageNum: {},
pageSize: {},
pageChange: {},
sizeChange: {
// 分页条数自适应开启, 自动触发
required: true
},
showCheckBox: {},
maxHeight: {}
},
data() {
return {
height: this.maxHeight
};
},
mounted() {
for (const x of this.tableOption) {
const arr = this.tableData.map(val => {
const value = (val[x.prop] || "").toString();
const len1 = value.split(";").length - 1;
const len2 = value.split("&").length - 1;
this.$refs.size.innerHTML = value.replace(/[&;]/g, "");
return this.$refs.size.offsetWidth + 36 + len1 * 6 + len2 * 10;
});
this.$refs.size.innerHTML = x.label;
arr.push(this.$refs.size.offsetWidth + 57);
x.width = Math.max(...arr) + 20;
}
},
watch: {
tableData(curVal, oldVal) {
for (const x of this.tableOption) {
const arr = curVal.map(val => {
const value = (val[x.prop] || "").toString();
const len1 = value.split(";").length - 1;
const len2 = value.split("&").length - 1;
this.$refs.size.innerHTML = value.replace(/[&;]/g, "");
return this.$refs.size.offsetWidth + 36 + len1 * 6 + len2 * 10;
});
this.$refs.size.innerHTML = x.label;
arr.push(this.$refs.size.offsetWidth + 57);
x.width = Math.max(...arr) + 20;
}
if (!curVal.length && this.pageNum > 1) {
this.pageChange(this.pageNum - 1);
}
}
},
methods: {
selectChange(arr) {
const res = arr.map(val => val.id);
this.$emit("selectChange", res);
},
expand(row, expanded) {
this.$emit("expand", row, expanded);
},
// 鼠标悬浮出现名称
move(row, column, cell, event) {}
}
};
</script>
<style lang="less">
.mes__table {
padding: 11px 20px;
}
.mes__table .el-pagination {
margin-top: 10px;
text-align: end;
//float: right;
}
.mes__table #size {
position: absolute;
visibility: hidden;
opacity: 0;
}
.el-table-column--selection .cell {
padding-left: 16px;
padding-right: 10px;
}
.mes__table .mCSB_container_wrapper {
position: static;
}
.mes__table .el-table__fixed {
bottom: 0 !important;
}
.mes__table .el-table__fixed-right {
bottom: 0 !important;
right: 0 !important;
}
</style>
<template>
<div class="tableLayout">
<iov-breadcrumb v-if="!hideCrumb"></iov-breadcrumb>
<div class="layoutContainer">
<div class="layoutContainerFlex">
<div v-if="treeData" class="treeContainer" :class="{ collapsed: collapsed }">
<div class="tapContainer">
<!-- <div class="tap" @click="collapsed = !collapsed"></div> -->
<img class="lefttap" v-if="!this.collapsed" @click="collapsed = !collapsed" src="/cdn/icon/resources/arrowleft.svg" />
<img class="lefttap" v-else @click="collapsed = !collapsed" src="/cdn/icon/resources/arrowright.svg" />
</div>
<stms-list
v-if="treeStyle === 'list'"
:title="treeTitle"
:value="treeValue"
:data="computedTreeData"
@node-click="treeClick"
ref="tree"
>
<template slot="extra">
<slot name="extra"> </slot>
</template>
<template slot="tool">
<slot name="tool"> </slot>
</template>
</stms-list>
<stms-tree
v-else
:title="treeTitle"
:value="treeValue"
:data="computedTreeData"
@node-click="treeClick"
ref="tree"
>
<template slot="extra">
<slot name="extra"> </slot>
</template>
<template slot="tool">
<slot name="tool"> </slot>
</template>
</stms-tree>
</div>
<div class="tableContainer">
<div class="tableContainerFlex">
<slot name="container"></slot>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
treeValue: {
type: Object,
required: false,
default: null
},
treeTitle: {
type: String,
required: false,
default: ""
},
treeData: {
type: Array,
required: false,
default: function() {
return null;
}
},
// 支持default、metro、list三种风格
treeStyle: {
type: String,
required: false,
default: function() {
return "default";
}
},
hideCrumb: {
required: false,
type: Boolean,
default: false
}
},
computed: {
computedTreeData() {
if (this.treeStyle === "default") {
return [
{
name: this.treeTitle,
children: this.treeData
}
];
}
return this.treeData;
}
},
data() {
return {
collapsed: false
};
},
methods: {
treeClick(data) {
this.$emit("tree-click", data);
},
setFirstTreeNode() {
// const treeObj = this.$refs.tree.getTreeObj();
// const validNodes = treeObj.transformToArray(treeObj.getNodes()).filter(val => !val.disabled);
// // 设置默认节点
// for (const val of validNodes) {
// if (!val.disabled && !val.children) {
// treeObj.selectNode(val);
// return val;
// }
// }
// treeObj.selectNode(validNodes[0]);
// return validNodes[0];
return this.treeData[0];
},
getTreeObj() {
return this.$refs.tree.getTreeObj();
}
}
};
</script>
<style lang="less">
.tableLayout {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.layoutContainer {
height: 0;
flex: auto;
position: relative;
.layoutContainerFlex {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
.treeContainer {
height: 100%;
width: 360px;
position: relative;
transition: all 0.1s linear;
border-right: 1px solid #dcdcdc;
.tapContainer {
position: absolute;
top: calc(50% - 20px);
right: -17px;
height: 40px;
width: 18px;
z-index: 99;
overflow: hidden;
.lefttap{
height: 100%;
width: 100%;
cursor: pointer;
}
.tap {
height: 100%;
width: 100%;
color: #ddd;
box-shadow: 0 0 8px #ddd;
border: 1px solid #ddd;
cursor: pointer;
position: relative;
opacity: 0.2;
transition: all linear 0.1s;
background: #666;
}
.tap:after,
.tap:before {
content: "";
display: block;
height: 3px;
width: 10px;
background: #ddd;
position: absolute;
left: 3px;
}
.tap:before {
top: 14px;
transform: rotate(-45deg);
}
.tap:after {
bottom: 15px;
transform: rotate(45deg);
}
}
.tapContainer:hover {
.tap {
opacity: 1;
}
}
}
.treeContainer.collapsed {
width: 0;
.stms-tree {
display: none;
}
.tapContainer {
right: -17px;
.tap {
right: 0;
}
.tap:before {
transform: rotate(45deg);
}
.tap:after {
transform: rotate(-45deg);
}
}
}
.tableContainer {
width: 0;
flex: auto;
transition: all 0.1s linear;
display: flex;
flex: auto;
position: relative;
.tableContainerFlex {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
.iov-content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.iov-tool {
padding: 10px 20px 0;
.el-button {
i {
margin-left: 5px;
}
}
.split {
float: left;
height: 100%;
width: 1px;
background: #eee;
margin: 0 25px;
}
.el-input {
width: 250px;
float: right;
}
.template-tab {
margin-top: -10px;
}
}
.iov-table {
flex: auto;
position: relative;
padding: 10px 20px;
.stms-scrollbar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
</style>
import Vue from 'vue'
// 引入组件
// 面包屑
import breadcrumb from "./Breadcrumb";
// 右侧表格容器
import tableLayout from "./TableLayout";
// 表格
import table from "./Table";
//引入tree
import regionTree from "./RegionTree"
// 导航
import navigation from "./navigation";
// 注册全局组件
Vue.component("iov-breadcrumb", breadcrumb);
Vue.component("iov-table-layout", tableLayout);
Vue.component("iov-table", table);
Vue.component("re-tree", regionTree);
Vue.component("iov-navigation", navigation);
<template>
<el-dialog
title="图标库"
width="600px"
v-drag
:visible.sync="show"
size="tiny"
append-to-body
id="iconLibrary"
>
<div class="main">
<ul>
<li v-for="(item, index) in imgList" :key="index">
<div @click="listClick(item, index)">
<img :src="item.url" alt="" />
<p v-if="item.isShow">
<i class="el-icon-success"></i>
</p>
</div>
</li>
</ul>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit()">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { queryLogo } from './service'
export default {
data() {
return {
show: false,
radio: {},
imgList: []
}
},
methods: {
getPage(data) {
this.show = true;
this.queryLogo(data);
},
//查询图标
async queryLogo (defaultActive){
let data={
groupId:"16AF7A73BB41457BA0EB814B2EB041E2"
};
const res = await queryLogo(data);
if(res.status == "success"){
this.imgList=res.content;
if(res.content.length>0){
//做图片默认选中回显
if(defaultActive !== "" && defaultActive !== null && defaultActive !== undefined){
for(let i=0;i<this.imgList.length;i++){
if(this.imgList[i].url == defaultActive){
this.imgList[i].isShow = true;
}
}
}
//如果没有选中(新建),那么默认选中第一个
else{
this.radio=this.imgList[0];
this.imgList[0].isShow=true;
}
}
// console.log(this.imgList);
}
},
listClick (item, index){
//先循环所有的给设置为false
for(let i=0;i<this.imgList.length;i++){
this.imgList[i].isShow=false;
}
//给当前的设置为true,显示
item.isShow = true;
//选中的当前数据存起来
for(let i=0;i<this.imgList.length;i++){
if(this.imgList[i].isShow){
this.radio=this.imgList[i];
}
}
//更新视图
this.imgList=[...this.imgList]
},
submit() {
this.$emit('iconName', this.radio.url);
this.show = false;
}
}
}
</script>
<style lang="less" scoped>
.main {
width: 100%;
max-height: 400px;
overflow-y: auto;
ul {
width: 100%;
display: flex;
flex-wrap: wrap;
li {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
div {
width: 40px;
height: 40px;
position: relative;
img {
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 0;
}
p {
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 0;
z-index: 10;
background: #d4e8fe;
border: 2px solid #88c3fe;
opacity: 0.9;
i {
font-size: 20px;
color: #67c23a;
}
}
}
}
}
}
</style>
This diff is collapsed.
/**
* 配置编译环境和线上环境之间的切换
*
* baseUrl: 域名地址
*
*/
const baseUrl = '';
const version = '(V1.0.0)';
export {
baseUrl,
version
};
import Vue from "vue";
import Router from "vue-router";
import * as URL from "@/config/url";
// 注册路由
Vue.use(Router);
// 配置路由
const router = new Router({
routes: [
{
path: "*",
name: "404",
component: resolve => require(["@/views/404/index"], resolve)
},
{
path: URL.ROOT,
name: "应用开发",
redirect: URL.APP
},
{
path: URL.APP,
name: "应用开发",
component: resolve => require(["@/views/app/index"], resolve)
}
]
});
export default router;
export const ROOT = "/";
export const APP = "/app";
import dao from "./index";
export default dao.create({
autoLogin: {
url: "/sso/identity/user/autoLogin",
method: "GET"
},
logout: {
url: "/sso/identity/user/logout",
method: "GET"
},
queryMenu: {
url: "/design/systemsetting/menu/queryMenusByParentId",
method: "GET"
}
});
// const Message = ELEMENT.Message;
dao.interceptors.response.use(
response => {
const { notify } = response.config;
const text = notify || "处理";
if (response.data.status === "success") {
if (notify) {
// Message({
// type: "success",
// message: `${text}成功`,
// duration: 3000
// });
}
} else {
// Message({
// type: "error",
// message: `${text}失败!${response.data.message || ""}`,
// duration: 3000
// });
}
return response;
},
error => {
const {
status,
data: { message },
config: { notify }
} = error.response;
const text = notify || "处理";
if (status === 401) {
return __.url.redirectToLogin(true);
}
// Message({
// type: "error",
// message: `${text}失败!${message || ""}`,
// duration: 3000
// });
return Promise.reject(error);
}
);
export default dao;
import dao from "./index";
export default dao.create({
login: {
url: "/sso/identity/user/login",
method: "POST",
headers:{
appVersion: "1.0.0",
uniId: "100"
}
},
//获取机器码
getMachine: {
url: "/sso/identity/user/getMachineCode",
method: "GET"
},
//激活
activation: {
url: "/sso/identity/user/activateMachine",
method: "POST"
},
});
import Vue from "vue";
Vue.directive("scroll", {
// 当绑定元素插入到 DOM 中。
inserted: function (el, binding) {
let options = binding.expression
? JSON.parse(binding.expression)
: {
axis: "yx",
theme: "dark",
scrollInertia: 300
};
}
});
Vue.directive("drag", {
bind: function (el, binding, vnode, oldVnode) {
let header = el.querySelector(".el-dialog__header") || el;
let body = el.querySelector(".el-dialog") || el;
header.onmousedown = e => {
if (e.button != 0) {
return false;
}
{
if (!body.isInitDrag) {
body.style.cssText = `transform:none;
width:${body.offsetWidth}px;
height:${body.offsetHeight}px;
left:${parseInt(body.offsetWidth / document.body.offsetWidth) + "%"};
top:${body.offsetTop}px;
bottom:"auto"`;
body.isInitDrag = true;
}
}
window.onselectstart = window.ondragstart = () => {
return false;
};
let offsetX = e.clientX;
let offsetY = e.clientY;
let domLeft = parseFloat(body.style.left);
let domTop = parseFloat(body.style.top);
window.onmousemove = _.throttle(e => {
body.style.left = e.clientX - offsetX + domLeft + "px";
body.style.top = e.clientY - offsetY + domTop + "px";
if (parseInt(body.style.top) < 0) {
body.style.top = 0;
}
}, 20);
window.onmouseup = () => {
window.onmouseup = window.onmousemove = window.onselectstart = window.ondragstart = null;
};
};
}
});
import Vue from "vue";
import App from "./App";
import router from "./config/router";
import "./directive";
import "./components";
import "@/assets/less/component.less";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small' });
// 关闭生产模式的提示
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
render: (h) => h(App),
});
const sessionCache = {
set (key, value) {
if (!sessionStorage) {
return
}
if (key != null && value != null) {
sessionStorage.setItem(key, value)
}
},
get (key) {
if (!sessionStorage) {
return null
}
if (key == null) {
return null
}
return sessionStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
sessionStorage.removeItem(key);
}
}
const localCache = {
set (key, value) {
if (!localStorage) {
return
}
if (key != null && value != null) {
localStorage.setItem(key, value)
}
},
get (key) {
if (!localStorage) {
return null
}
if (key == null) {
return null
}
return localStorage.getItem(key)
},
setJSON (key, jsonValue) {
if (jsonValue != null) {
this.set(key, JSON.stringify(jsonValue))
}
},
getJSON (key) {
const value = this.get(key)
if (value != null) {
return JSON.parse(value)
}
},
remove (key) {
localStorage.removeItem(key);
}
}
export default {
/**
* 会话级缓存
*/
session: sessionCache,
/**
* 本地缓存
*/
local: localCache
}
function Async(url = "", data = {}, type = "GET", params = {}) {
// console.log(url, data, type, params);
let authorization = "";
this.url = url;
this.data = data;
this.params = params;
this.type = type;
this.fetch = false;
this.httpProvider = {};
this.init = function () {
this.type = this.type.toUpperCase();
if (type == "GET") {
let dataStr = ""; // 数据拼接字符串
Object.keys(this.data).forEach((key) => {
// dataStr += `${key}=${this.data[key].replace(/#/g, "%23")}&`;
dataStr += `${key}=${this.data[key]}&`;
});
if (dataStr !== "") {
dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
this.url = `${this.url}?${dataStr}`;
}
}
if (window.fetch) {
this.fetch = true;
}
};
this.send = async function () {
this.init();
let res = false;
if (this.fetch) {
res = await this.fetchAPI();
} else {
res = await this.httpAPI();
}
return res;
};
this.fetchAPI = async function () {
const requestConfig = {
credentials: "include",
method: this.type,
headers: Object.assign({
Accept: "application/json",
"Content-Type": "application/json",
authorization,
}),
mode: "cors",
cache: "no-cache",
};
if (this.type == "POST") {
if (Object.keys(this.data).length || this.data) {
Object.defineProperty(requestConfig, "body", {
value: JSON.stringify(this.data),
});
}
if (Object.keys(this.params).length) {
let dataStr = "";
Object.keys(this.params).forEach((key) => {
dataStr += `${key}=${this.params[key]}&`;
});
if (dataStr !== "") {
dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
this.url = `${this.url}?${dataStr}`;
}
}
}
this.runHttpProvider("request", requestConfig);
var response = await fetch(this.url, requestConfig);
let responseJson = {};
if (response.status == 200) {
// console.log(response);
if (response.url.includes("histrory-track")) {
try {
responseJson = await response.arrayBuffer();
} catch (e) { }
}
if (this.url.includes(".pdf")) {
// console.log("this.url", this.url);
try {
responseJson = await response.blob();
} catch (e) { }
} else {
try {
responseJson = await response.json();
} catch (e) { }
}
}
this.runHttpProvider("response", response, responseJson);
if (response.status == 200) {
return responseJson;
}
return false;
};
this.httpAPI = function () {
return new Promise((resolve, reject) => {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject();
}
let sendData = "";
if (this.type == "POST") {
sendData = JSON.stringify(this.data);
}
requestObj.open(this.type, this.url, true);
requestObj.setRequestHeader("Content-type", "application/json");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
let obj = requestObj.response;
if (typeof obj !== "object") {
obj = JSON.parse(obj);
}
resolve(obj);
} else {
reject(requestObj);
}
}
};
});
};
this.runHttpProvider = function (...arr) {
const fn = this.httpProvider()[arr[0]];
if (fn && typeof fn === "function") {
arr.shift();
fn(...arr);
}
};
}
export default Async;
import Async from "./fetch";
export default async (
url = "",
data = {},
type = "GET",
params = {},
notify = false
) => {
const $http = new Async(url, data, type, params);
$http.httpProvider = function () {
return {
response(response, responseJson) {
// 接口页面路径白名单
if (window.location.href.includes("reportPreview")) {
return responseJson;
}
if (response.status == 200) {
if (responseJson && notify) {
if (responseJson.status === "success") {
return responseJson;
} else {
ELEMENT.Message({
message: `code 500 ${
responseJson.message + url || "操作失败,接口异常:" + url
}`,
type: "error",
showClose: true,
duration: 5000,
});
}
}
return responseJson;
}
if (response.status == 401) {
if (!ELEMENT.$_overTime) {
ELEMENT.$_overTime = ELEMENT.Notification.error({
title: "失败",
message: "登录超时,3秒后退出登录",
});
setTimeout(() => {
window.location.href = "/";
}, 3000);
}
// throw new Error();
return responseJson;
}
ELEMENT.Message({
message: `操作失败,请联系管理员,错误代码${response.status}`,
type: "error",
showClose: true,
duration: 2000,
});
throw new Error();
},
};
};
const res = await $http.send();
return res;
};
import axios from "axios";
import { tansParams, blobValidate } from "./tools";
import cache from "./cache";
import { saveAs } from "file-saver";
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
// 超时
timeout: 1000000,
});
// request拦截器
service.interceptors.request.use(
(config) => {
// console.log('axios request...', config);
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
// get请求映射params参数
if (config.method === "get" && config.params) {
let url = config.url + "?" + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (
!isRepeatSubmit &&
(config.method === "post" || config.method === "put")
) {
const requestObj = {
url: config.url,
data:
typeof config.data === "object"
? JSON.stringify(config.data)
: config.data,
time: new Date().getTime(),
};
const sessionObj = cache.session.getJSON("sessionObj");
if (
sessionObj === undefined ||
sessionObj === null ||
sessionObj === ""
) {
cache.session.setJSON("sessionObj", requestObj);
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms),小于此时间视为重复提交
if (
s_data === requestObj.data &&
requestObj.time - s_time < interval &&
s_url === requestObj.url
) {
const message = "数据正在处理,请勿重复提交";
console.warn(`[${s_url}]: ` + message);
return Promise.reject(new Error(message));
} else {
cache.session.setJSON("sessionObj", requestObj);
}
}
}
return config;
},
(error) => {
console.log(error);
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(res) => {
console.log("axios response...", res);
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 二进制数据则直接返回
if (
res.request.responseType === "blob" ||
res.request.responseType === "arraybuffer"
) {
let enc = new TextDecoder("utf-8");
let json = null
try {
json = JSON.parse(enc.decode(new Uint8Array(res.data)));
} catch (e) {
json = res.data
}
return json
}
if (code === 401) {
if (!ELEMENT.$_overTime) {
ELEMENT.$_overTime = ELEMENT.Notification.error({
title: "失败",
message: "code 401, 3秒后退出登录",
});
setTimeout(() => {
window.location.href = "/";
}, 3000);
}
return Promise.reject("无效的会话,或者会话已过期,请重新登录。");
}
if (code == 200) {
if (res.config.showMsg) {
ELEMENT.Message.success(res.data.message || res.data.status);
}
return res.data;
} else {
if (res.config.showMsg) {
ELEMENT.Message.error(res.data.message || res.data.status);
}
return null
}
},
(error) => {
ELEMENT.Message.error(error.message);
return Promise.reject(error);
}
);
export function getBlob(url) {
return service
.get(url, {
headers: { "Content-Type": "application/x-www-form-urlencoded" },
responseType: "blob",
})
.then(async (data) => {
const blob = new Blob([data]);
return blob;
});
}
export default service;
/**
* 通用js方法封装处理
* Copyright (c) 2019 ruoyi
*/
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['', '', '', '', '', '', ''][value] }
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
// 表单重置
export function resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
}
// 添加日期范围
export function addDateRange(params, dateRange, propName) {
let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') {
search.params['beginTime'] = dateRange[0];
search.params['endTime'] = dateRange[1];
} else {
search.params['begin' + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1];
}
return search;
}
// 回显数据字典
export function selectDictLabel(datas, value) {
if (value === undefined) {
return "";
}
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) {
actions.push(datas[key].label);
return true;
}
})
if (actions.length === 0) {
actions.push(value);
}
return actions.join('');
}
// 回显数据字典(字符串、数组)
export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) {
return "";
}
if (Array.isArray(value)) {
value = value.join(",");
}
var actions = [];
var currentSeparator = undefined === separator ? "," : separator;
var temp = value.split(currentSeparator);
Object.keys(value.split(currentSeparator)).some((val) => {
var match = false;
Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) {
actions.push(datas[key].label + currentSeparator);
match = true;
}
})
if (!match) {
actions.push(temp[val] + currentSeparator);
}
})
return actions.join('').substring(0, actions.join('').length - 1);
}
// 字符串格式化(%s )
export function sprintf(str) {
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
}
// 转换字符串,undefined,null等转化为""
export function parseStrEmpty(str) {
if (!str || str == "undefined" || str == "null") {
return "";
}
return str;
}
// 数据合并
export function mergeRecursive(source, target) {
for (var p in target) {
try {
if (target[p].constructor == Object) {
source[p] = mergeRecursive(source[p], target[p]);
} else {
source[p] = target[p];
}
} catch (e) {
source[p] = target[p];
}
}
return source;
};
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
/**
* 参数处理
* @param {*} params 参数
*/
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
}
// 验证是否为blob格式
export async function blobValidate(data) {
try {
const text = await data.text();
JSON.parse(text);
return false;
} catch (error) {
return true;
}
}
\ No newline at end of file
<template>
<div id="error404">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="img_404" alt="404" />
<img class="pic-404__child left" :src="img_404_cloud" alt="404" />
<img class="pic-404__child mid" :src="img_404_cloud" alt="404" />
<img class="pic-404__child right" :src="img_404_cloud" alt="404" />
</div>
<div class="bullshit">
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">
请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告
</div>
<a @click="back" class="bullshit__return-home">返回上一页</a>
<a href="/#/wj-manage-web" class="bullshit__return-home">返回主页</a>
</div>
</div>
</div>
</template>
<script>
import img_404 from "@/assets/images/404/404.png";
import img_404_cloud from "@/assets/images/404/404_cloud.png";
export default {
data() {
return {
img_404,
img_404_cloud
};
},
computed: {
message() {
return "迷路了...";
}
},
methods: {
back: function() {
window.history.go(-1);
}
}
};
</script>
<style scoped>
#error404 {
background: #f0f2f5;
margin-top: -20px;
height: 100%;
}
.bullshit__return-home {
margin-right: 20px;
}
.wscn-http404 {
position: relative;
width: 1200px;
margin: 20px auto 60px;
padding: 0 100px;
overflow: hidden;
}
.pic-404 {
position: relative;
float: left;
width: 600px;
padding: 150px 0;
overflow: hidden;
}
.pic-404__parent {
width: 100%;
}
.pic-404__child {
position: absolute;
}
.pic-404.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.pic-404.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
.pic-404.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 150px 0;
overflow: hidden;
}
.bullshit__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.bullshit__headline {
font-size: 20px;
line-height: 24px;
color: #1482f0;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.bullshit__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
.bullshit__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
</style>
<template>
<div id="app">
<iov-table-layout ref="layout">
<div class="iov-content" slot="container">
this is a application!
</div>
</iov-table-layout>
</div>
</template>
const path = require('path')
const publicPath = '/'
const port = 9000
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const proxy = {
// '/sso': {
// target: 'http://10.102.1.182:9000',
// },
// '/design': {
// target: 'http://10.102.1.182:9000',
// },
'/sso': {
target: 'http://37.12.182.29:9000',
},
'/design': {
target: 'http://37.12.182.29:9000',
},
'/cdn': {
target: 'http://127.0.0.1:3000',
},
}
module.exports = {
publicPath,
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
port,
overlay: {
warnings: false,
errors: true,
},
proxy,
},
configureWebpack: {
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': path.join(__dirname, 'src'),
},
},
plugins: [
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
}),
],
},
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment