|
@@ -1,14 +1,188 @@
|
|
|
<template>
|
|
|
- <!-- 图例库首页 -->
|
|
|
- <div class='legend-library'>图例库首页</div>
|
|
|
+ <div class='legend-library'>
|
|
|
+ <div class='legend-library-top'>
|
|
|
+ 图例库管理
|
|
|
+ <span class='library-btn'>
|
|
|
+ <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
|
|
|
+ <el-button size='small' type='primary' @click='add'>添加图例</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class='legend-library-bottom'>
|
|
|
+ <div class='select-box'>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-select default-value='全部' style='width: 120px' @change='handleChange'>
|
|
|
+ <a-select-option value='全部'>全部</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-input-search placeholder style='width: 200px' @search='onSearch' />
|
|
|
+ </div>
|
|
|
+ <el-table :data='tableData' style='width: 100%'>
|
|
|
+ <el-table-column prop='name' label='图例名称'></el-table-column>
|
|
|
+ <el-table-column prop='style' label='图例样式'></el-table-column>
|
|
|
+ <el-table-column prop='unit' label='单位'></el-table-column>
|
|
|
+ <el-table-column prop='position' label='对应广场说明书的位置'></el-table-column>
|
|
|
+ <el-table-column prop='type' label='对应工程信息化中的位置/设备分类' width='240'></el-table-column>
|
|
|
+ <el-table-column prop='system' label='对应工程信息化的系统'></el-table-column>
|
|
|
+ <el-table-column prop='typeId' label='铺位可视化typeid'></el-table-column>
|
|
|
+ <el-table-column label='操作' width='100'>
|
|
|
+ <template slot-scope='scope'>
|
|
|
+ <el-button @click='modifyClick(scope.row)' type='text' size='small'>修改</el-button>
|
|
|
+ <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- <a-table size='small' style='margin-top:12px' :columns='columns' :bordered='false' :data-source='tableData'>
|
|
|
+ <template v-slot:action>
|
|
|
+ <a href='javascript:;'>Delete</a>
|
|
|
+ </template>
|
|
|
+ </a-table>-->
|
|
|
+ </div>
|
|
|
+ <add-legend ref='addLegend'></add-legend>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import addLegend from './addLegend'
|
|
|
export default {
|
|
|
- components: {},
|
|
|
+ components: { addLegend },
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '图例名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '图例样式',
|
|
|
+ dataIndex: 'style',
|
|
|
+ key: 'style'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单位',
|
|
|
+ dataIndex: 'unit',
|
|
|
+ key: 'unit'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '对应广场说明书的位置',
|
|
|
+ dataIndex: 'position',
|
|
|
+ key: 'position'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '对应工程信息化中的位置/设备分类',
|
|
|
+ dataIndex: 'type',
|
|
|
+ key: 'type'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '对应工程信息化的系统',
|
|
|
+ dataIndex: 'system',
|
|
|
+ key: 'system'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '铺位可视化typeid',
|
|
|
+ dataIndex: 'typeId',
|
|
|
+ key: 'typeId'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: [{ name: '车库', style: '--' }, { style: '--' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dumpRules() {
|
|
|
+ this.$router.push('/home/legendRules')
|
|
|
+ },
|
|
|
+ handleChange() {},
|
|
|
+ onSearch() {},
|
|
|
+ add() {
|
|
|
+ this.$refs.addLegend.open('', '添加图例库')
|
|
|
+ },
|
|
|
+ modifyClick(row) {
|
|
|
+ this.$refs.addLegend.open(row, '修改图例库')
|
|
|
+ },
|
|
|
+ deleteClick(row) {
|
|
|
+ this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
|
|
|
+ confirmButtonText: '作废',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {},
|
|
|
mounted() {}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.legend-library {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .legend-library-top {
|
|
|
+ height: 48px;
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #1f2329;
|
|
|
+ .library-btn {
|
|
|
+ float: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-library-bottom {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 16px;
|
|
|
+ .select-box {
|
|
|
+ height: 56px;
|
|
|
+ line-height: 56px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.legend-library {
|
|
|
+ th {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ color: #646a73;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(248, 249, 250, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ color: #1f2429;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-select {
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|