|
@@ -1,27 +1,50 @@
|
|
<template>
|
|
<template>
|
|
|
|
|
|
- <div class="container" style="position:relactive">
|
|
|
|
-
|
|
|
|
-<!--
|
|
|
|
- <div v-show="editBtn" style="position:absolute;top:170px;right:100px;z-index:1">
|
|
|
|
-
|
|
|
|
- <el-button v-if="isRoleEdit" class="successBorder" :loading="control_btn_l" @click="control_edit()">
|
|
|
|
- {{ control_btn }}
|
|
|
|
- </el-button>
|
|
|
|
- </div> -->
|
|
|
|
-
|
|
|
|
- <el-card body-style="padding: 0px;" class="dashboard-list" shadow="never">
|
|
|
|
|
|
+ <div class="container">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <div class="tool-bar">
|
|
|
|
+ <div>
|
|
|
|
+ <span class="title-name">仪表盘标题</span>
|
|
|
|
+ <span>解释信息</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="position:absolute;top:170px;right:100px;z-index:1">
|
|
|
|
+ <el-button class="miniSuccess" @click="control_edit()">编辑</el-button>
|
|
|
|
+ <el-button class="successBorder" @click="handleLinkChart">
|
|
|
|
+ 添加图表
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
|
|
|
|
- <ul>
|
|
|
|
- 111
|
|
|
|
- </ul>
|
|
|
|
- </el-card>
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div>
|
|
|
|
+ <draggable v-model="boardList" group="itxst" animation="300" :group="{name: 'dashboard',pull: true}" @start="onStart" @end="onEnd">
|
|
|
|
+ <transition-group>
|
|
|
|
+
|
|
|
|
+ <el-card class="box-card board-card" key="1" v-for="item in boardList">
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <span>{{item.title}}</span>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <div style="float: right; padding: 3px 0;display:inline-block;">
|
|
|
|
+ <i class="el-icon-edit" style="color:#009C69;cursor:pointer;" />
|
|
|
|
+ <i class="el-icon-delete" style="color:#009C69;cursor:pointer;" />
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="text item">
|
|
|
|
+ 图表内容
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </transition-group>
|
|
|
|
+ </draggable>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
|
|
- <draggable v-model="barSortList" group="itxst" animation="300" :group="{name: 'dashboard',pull: true}" @start="onStart" @end="onEnd">
|
|
|
|
- <transition-group>
|
|
|
|
- <div class = "board" style = "" v-for="item in barSortList" key="1">{{item.title}}</div>
|
|
|
|
- </transition-group>
|
|
|
|
- </draggable>
|
|
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
</template>
|
|
@@ -39,11 +62,11 @@ export default {
|
|
return {
|
|
return {
|
|
isRoleEdit: [],
|
|
isRoleEdit: [],
|
|
|
|
|
|
- barSortList: [
|
|
|
|
|
|
+ boardList: [
|
|
|
|
|
|
{title:'图标1'},
|
|
{title:'图标1'},
|
|
- {title:'图标1'},
|
|
|
|
- {title:'图标1'},
|
|
|
|
|
|
+ {title:'图标2'},
|
|
|
|
+ {title:'图标3'},
|
|
],
|
|
],
|
|
|
|
|
|
isEdit: 'view',
|
|
isEdit: 'view',
|
|
@@ -82,7 +105,7 @@ export default {
|
|
console.log(2222)
|
|
console.log(2222)
|
|
},
|
|
},
|
|
onEnd(){
|
|
onEnd(){
|
|
- console.log(this.barSortList)
|
|
|
|
|
|
+ console.log(this.boardList)
|
|
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -98,56 +121,87 @@ export default {
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ handleLinkChart() {
|
|
|
|
+ var send_data = {
|
|
|
|
+ name: 'getChartListV2',
|
|
|
|
+ page: 1,
|
|
|
|
+ offset: 1,
|
|
|
|
+ pagecount: 10,
|
|
|
|
+ returntype: 'Map',
|
|
|
|
+ parammaps: {
|
|
|
|
+ pastureid: Cookies.get('pastureid'),
|
|
|
|
+ empid: Cookies.get('employeid')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ GetDataByName(send_data).then(response => {
|
|
|
|
+ console.log('table数据', response.data.list)
|
|
|
|
+ if (response.data.list !== null) {
|
|
|
|
+ this.myChartList = response.data.list
|
|
|
|
+ this.showChartList = true
|
|
|
|
+ } else {
|
|
|
|
+ this.myChartList = []
|
|
|
|
+ this.showChartList = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-<style>
|
|
|
|
|
|
+<style scoped>
|
|
.board{
|
|
.board{
|
|
width:300px;height:300px;border:1px soild #333;display:inline-block;background: #2ed1f9;padding: 5px 5px;margin-right: 15px;margin-bottom: 15px;
|
|
width:300px;height:300px;border:1px soild #333;display:inline-block;background: #2ed1f9;padding: 5px 5px;margin-right: 15px;margin-bottom: 15px;
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
-.container {
|
|
|
|
- display: flex;
|
|
|
|
- min-height: calc(100vh - 62px);
|
|
|
|
- // align-items: stretch;
|
|
|
|
- .dashboard-list {
|
|
|
|
- width: 250px;
|
|
|
|
- min-height: 100%;
|
|
|
|
- padding: 20px 10px;
|
|
|
|
- /deep/ .el-card__header {
|
|
|
|
- div {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #606266;
|
|
|
|
- i {
|
|
|
|
- cursor: pointer;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- padding: 5px 0px;
|
|
|
|
- }
|
|
|
|
- .dashboard-list-item {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- line-height: 35px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- cursor: pointer;
|
|
|
|
- color: #606266;
|
|
|
|
- i {
|
|
|
|
- margin-right: 10px;
|
|
|
|
- line-height: 35px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .high-light-dashboard {
|
|
|
|
- color: #205cd8;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+.tool-bar {
|
|
|
|
+ display: block; border-top: none;
|
|
|
|
+ height: 45px;
|
|
|
|
+ line-height: 45px;
|
|
|
|
+ color: #303133;
|
|
|
|
+ padding: 0 10px;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+ .title-name {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: #909399;
|
|
|
|
+ margin-left: 0;
|
|
}
|
|
}
|
|
- .dashboard-wrapper {
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ /* span {
|
|
|
|
+ color: #c0c4cc;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ margin-left: 10px;
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item {
|
|
|
|
+ margin-bottom: 18px;
|
|
|
|
+ } */
|
|
|
|
+
|
|
|
|
+ .clearfix:before,
|
|
|
|
+ .clearfix:after {
|
|
|
|
+ display: table;
|
|
|
|
+ content: "";
|
|
|
|
+ }
|
|
|
|
+ .clearfix:after {
|
|
|
|
+ clear: both
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .board-card {
|
|
|
|
+ width: 250px;min-height: 100%;
|
|
|
|
+ padding: 20px 10px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin: 0px 0px 20px 20px;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+
|
|
|
|
+
|
|
</style>
|
|
</style>
|