123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429 |
- <template>
- <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'>
- <Select
- width='180'
- tipPlace='top'
- caption='所属分类:'
- v-model='Type'
- :selectdata='typeOptions'
- :placeholder='"请选择"'
- @change='getTableList'
- ></Select>
- <!-- <Select
- width='180'
- tipPlace='top'
- caption='说明书位置:'
- v-model='position'
- multiple
- :selectdata='positionSelect'
- :placeholder='"请选择"'
- style='margin:0 12px'
- @confirm='getTableListPosition'
- ></Select>-->
- <TreeSelect
- caption='说明书位置:'
- tipPlace='top'
- height='180'
- style='margin:0 12px'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='positionSelect'
- @change='treeConfirmPosition'
- />
- <!-- <Select width='180' tipPlace='top' caption='位置/设备分类:' :selectdata='dataSelect2' @change='getTableList' :placeholder='"请选择"'></Select> -->
- <TreeSelect
- caption='位置/设备分类:'
- tipPlace='top'
- height='180'
- style='margin:0 12px'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='deviceList'
- @change='treeConfirmDevice'
- />
- <!-- <Select
- width='180'
- tipPlace='top'
- caption='专业:'
- :selectdata='dataSelect2'
- :placeholder='"请选择"'
- @change='getTableList'
- style='margin:0 12px'
- ></Select>-->
- <TreeSelect
- caption='专业:'
- tipPlace='top'
- height='180'
- style='margin:0 12px'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='majorList'
- @change='treeConfirmMajor'
- />
- <TreeSelect
- caption='铺位可视化:'
- tipPlace='top'
- height='250'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :choseArea='true'
- :data='typeVisualization'
- @change='treeConfirm'
- @focusChange='focusChange'
- />
- <Select
- width='180'
- tipPlace='top'
- caption='状态:'
- v-model='state'
- :selectdata='stateSelect'
- @change='getTableList'
- :placeholder='"请选择"'
- style='margin:0 12px'
- :hideClear='true'
- ></Select>
- <el-input size='small' @change='getTableList' prefix-icon='el-icon-search' v-model='keyword' style='width:192px;margin-right:12px;'></el-input>
- </div>
- <el-table :data='tableData' :border='true' style='width: 100%'>
- <el-table-column prop='Name' label='图例名称'>
- <template slot-scope='{row}'>{{row.Name || '--'}}</template>
- </el-table-column>
- <el-table-column prop='style' label='图例样式'>
- <template slot-scope='{row}'>
- <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
- <span v-else>{{'--'}}</span>
- </template>
- </el-table-column>
- <el-table-column prop='Unit' label='单位'>
- <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
- </el-table-column>
- <el-table-column prop='position' label='对应广场说明书的位置'>
- <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
- </el-table-column>
- <el-table-column label='对应工程信息化' align='center'>
- <el-table-column prop='type' label='位置/设备分类' width='240'>
- <template slot-scope='{row}'>{{row.InfoLocal || '--'}}</template>
- </el-table-column>
- <el-table-column prop='system' label='专业'>
- <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
- </el-table-column>
- </el-table-column>
- <el-table-column prop='typeId' resizable label='铺位可视化typeid' width='140'>
- <template slot-scope='{row}'>{{row.InfoSystem || '--'}}</template>
- </el-table-column>
- <el-table-column label='操作' width='100' v-if='state==1'>
- <template slot-scope='scope' v-if='state==1'>
- <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-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
- <template v-if='state==0' slot-scope='{row}'>{{row.DeleteTime || '--'}}</template>
- </el-table-column>
- </el-table>
- <div class='foot'>
- <el-pagination
- background
- layout='prev, pager, next'
- :total='total'
- :page-size='size'
- @prev-click='pageChanged'
- @next-click='pageChanged'
- @current-change='pageChanged'
- ></el-pagination>
- </div>
- </div>
- <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
- </div>
- </template>
- <script>
- import addLegend from './addLegend'
- import Select from '@/components/Select/Select.vue'
- import { getLegendTree, queryLegend, deleteLegend, queryTypeId, getVisualization, queryRelation } from '@/api/legendLibrary.js'
- export default {
- components: { addLegend, Select },
- data() {
- return {
- tableData: [],
- dataSelect2: [
- { id: 'test1', name: '选择项' },
- { id: 'test2', name: '单平米' },
- { id: 'test3', name: '下级分项' },
- { id: 'test4', name: '滑动平均滑动平均' }
- ],
- stateSelect: [
- { id: '1', name: '正常' },
- { id: '0', name: '已作废' }
- ],
- Type: '', //所属分类
- typeOptions: [
- {
- id: 'None',
- name: '非图例'
- },
- {
- id: 'Zone',
- name: '区域'
- },
- {
- id: 'Image',
- name: '图标'
- },
- {
- id: 'Line',
- name: '线条'
- }
- ],
- TypeId: '',
- typeIdSelect: [{ id: 'Zone', name: '铺位面' }],
- size: 10,
- total: 0,
- currentPage: 1,
- state: '1',
- position: [],
- // positionSelect: [
- // { id: 'GDXT', name: '供电系统-楼层分布' },
- // { id: 'FZQZL', name: '暖通空调-原理图' },
- // { id: 'NTXT', name: '暖通空调-楼层分布' },
- // { id: 'XFBFYCFL', name: '消防系统-系统概况' },
- // { id: 'XFXT', name: '消防系统-楼层分布' },
- // { id: 'RDXT', name: '弱电系统-楼层分布' },
- // { id: 'DTXT', name: '电梯系统-楼层分布' },
- // { id: 'RQXT', name: '燃气系统-楼层分布' },
- // { id: 'SCPZ', name: '土建装饰-石材铺装' }
- // ],
- positionSelect: [],
- keyword: '',
- typeVisualization: [],
- visualizationList: [], //已选铺位可视化
- majorList: [], //专业
- deviceList: []
- }
- },
- methods: {
- //说明书位置
- instruction() {
- let getParams = {}
- getLegendTree({ getParams }).then(res => {
- this.positionSelect = res.Content && res.Content.map(i => this.getTree(i))
- })
- },
- dumpRules() {
- this.$router.push('/home/legendRules')
- },
- getTypeId() {
- let postParams = {}
- queryTypeId({ postParams }).then(res => {
- this.typeIdSelect = res.Content
- })
- },
- visualization() {
- getVisualization({}).then(res => {
- this.typeVisualization = res.Data && res.Data.map(i => this.getTree(i))
- })
- },
- getTree(data) {
- let child = data.Children || data.Category
- return {
- id: data.Id,
- name: data.Name,
- children: child ? child.map(i => this.getTree(i)) : []
- }
- },
- add() {
- this.$refs.addLegend.open('', '添加图例库')
- },
- modifyClick(row) {
- this.$refs.addLegend.open(row, '修改图例库')
- },
- deleteClick(row) {
- this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
- confirmButtonText: '作废',
- cancelButtonText: '取消',
- type: 'warning',
- center: true
- })
- .then(() => {
- let postParams = [
- {
- Id: row.Id
- }
- ]
- deleteLegend({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message({
- type: 'success',
- message: '作废成功!'
- })
- this.getTableList()
- }
- })
- })
- .catch(() => {
- this.$message({
- type: 'info',
- message: '已取消删除'
- })
- })
- },
- pageChanged(page, size) {
- this.currentPage = page
- this.getTableList()
- },
- getTableListPosition(val) {
- let postParams = val.map(({ id }) => id)
- let data = {}
- queryRelation({ data, postParams }).then(res => {
- this.tableData = res.data.Content
- this.total = res.Total
- })
- },
- getTableList() {
- let postParams = {
- PageNumber: this.currentPage,
- PageSize: this.size,
- // Keyword: this.keyword,
- // Type: this.Type,
- // TypeId: this.TypeId,
- Orders: 'CreateTime desc',
- Filters: ``
- }
- // 状态
- if (this.state == 1) {
- postParams.Filters += `deleted=0`
- } else {
- postParams.Filters += `deleted=1`
- }
- if (this.Type) {
- postParams.Filters += `;Type='${this.Type}'`
- }
- // 位置分类InfoLocal
- //专业 InfoSystem
- // 可视化InfoTypeId
- if (this.visualizationList.length > 0) {
- postParams.Filters += `;InfoTypeId contain '${JSON.stringify(this.visualizationList)}'`
- }
- // 搜索 Name
- if (this.keyword) {
- postParams.Filters += `;Name contain '${this.keyword}'`
- }
- queryLegend({ postParams }).then(res => {
- console.log(res)
- this.tableData = res.Content
- this.total = res.Total
- })
- },
- updateSuccess() {
- this.getTableList()
- },
- addSuccess() {
- this.getTableList()
- },
- // 铺位可视化
- treeConfirm(id, info) {
- // this.visualizationList = info.map(i => i.id)
- console.log(id, 'id')
- // this.getTableList()
- },
- //专业
- treeConfirmMajor(id, info) {
- console.log(id)
- },
- //位置/设备
- treeConfirmDevice(id, info) {
- console.log(id)
- },
- //说明书位置
- treeConfirmPosition(id, info) {
- console.log(id)
- },
- focusChange(status) {
- // console.log('focusChange', status)
- }
- },
- mounted() {
- this.getTypeId()
- this.instruction()
- this.visualization()
- this.getTableList()
- }
- }
- </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;
- min-width: 1366px;
- display: flex;
- align-items: center;
- }
- .img {
- width: 28px;
- height: 28px;
- }
- }
- .foot {
- height: 32px;
- display: flex;
- justify-content: flex-end;
- margin-top: 28px;
- }
- /deep/ .p-select-input-content {
- line-height: 32px;
- }
- }
- </style>
- <style lang="less">
- .legend-library {
- th {
- font-size: 12px;
- color: #646a73 !important;
- padding: 6px 0 !important;
- background: rgba(248, 249, 250, 1);
- }
- td {
- color: #1f2429 !important;
- padding: 6px 0 !important;
- }
- .ant-select {
- margin-right: 12px;
- }
- }
- .p-select-option-box {
- background: #fff;
- border: 1px solid #ccc;
- }
- </style>
|