123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348 |
- /**
- *@author:Guoxiaohuan
- *@date:2020.05.27
- *@info:图例编辑状态
- */
- <template>
- <div class='view'>
- <div class='legend-tab2'>
- <div class='legend-table2-box'>
- <div class='legend-table2' v-if='editTable.length>0'>
- <el-table
- v-loading='loading'
- :header-cell-style='{background:"rgba(2,91,170,0.1)",fontFamily:"PingFangSC-Medium,PingFang SC;",color:"rgba(0,0,0,0.85);",fontSize:"12px"}'
- ref='multipleTable'
- height='350px'
- :data='editTable'
- tooltip-effect='dark'
- width='100%'
- @selection-change='handleSelectionChange'
- >
- <el-table-column prop label='项目' :show-overflow-tooltip='true'>
- <template slot-scope='{row}'>{{row.Name||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='数量'>
- <template slot-scope='{row}'>
- <div v-if='row.IsModify'>
- <div v-if='row.Num!=row.RealNum && (row.Num!=null && row.RealNum!=null)' class='redData'>
- <el-tooltip
- class='item'
- effect='dark'
- :content='`当前图例 ${row.Name} 与平面图中的不一致,平面图中为${row.RealNum}`'
- placement='top'
- >
- <el-input @keyup.enter.native='changeTable(row)' v-model='row.Num' size='mini'></el-input>
- </el-tooltip>
- </div>
- <div v-else-if='row.Num==null||row.RealNum==null'>
- <el-input @keyup.enter.native='changeTable(row)' v-model='row.Num' size='mini'></el-input>
- </div>
- <div v-else-if='!row.Num' class='nullData'>
- <el-input @keyup.enter.native='changeTable(row)' v-model='row.Num' size='mini'></el-input>
- </div>
- <div v-else style='width:50px'>
- <el-input @keyup.enter.native='changeTable(row)' v-model='row.Num' size='mini'></el-input>
- </div>
- </div>
- <!-- 第二部分数据 -->
- <div v-else>
- <el-tooltip
- v-if='!row.IsModify'
- class='item'
- effect='dark'
- :content='`当前图例 ${row.Name},从平面图中直接获取,如需编辑请修改平面图`'
- placement='top'
- >
- <div class='dataTwo'>{{row.Num}}</div>
- </el-tooltip>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop label='单位'>
- <template slot-scope='{row}'>{{row.Unit||'--'}}</template>
- </el-table-column>
- <el-table-column prop label='图例' align='center'>
- <template slot-scope='{row}'>
- <div v-if='row.Url' class='Url-img'>
- <img :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
- </div>
- <div v-else>{{'--'}}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <!-- <div class='legend-table2' v-if='tbData2.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData2' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- <!-- <div class='legend-table2' v-if='tbData3.length>0'>
- <el-table ref='multipleTable' height='430px' :data='tbData3' tooltip-effect='dark' @selection-change='handleSelectionChange'>
- <el-table-column prop='project' label='项目' width='100'></el-table-column>
- <el-table-column prop='num' label='数量'>
- <template slot-scope='{row}'>
- <div style='width:50px'>
- <el-input v-model='row.num' size='mini'></el-input>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop='type' label='单位' width='60'></el-table-column>
- <el-table-column prop='lege' label='图例'>
- <template slot-scope='scope'>{{ scope.row.lege }}</template>
- </el-table-column>
- </el-table>
- </div>-->
- </div>
- <div class='lengend-text'>广场上没有的图例数量填写为0</div>
- <div class='swich'>
- <el-switch v-model='value' @change='changeSwitch'></el-switch>
- <span>隐藏数量为0的项目</span>
- </div>
- <div class='legendFoot'>
- <el-button size='mini' @click='cancel'>取消</el-button>
- <el-button size='mini' v-if='editNum.length==0' type='primary' disabled style='opacity: 0.5'>保存</el-button>
- <el-button size='mini' v-else @click='save' type='primary'>保存</el-button>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { updateStatis } from '@/api/public.js'
- import { mapGetters } from 'vuex'
- export default {
- props: ['editTable', 'loading'],
- data() {
- return {
- value: false,
- tbData1: [],
- tbData2: [],
- tbData3: [],
- editNum: []
- }
- },
- computed: {
- ...mapGetters(['plazaId'])
- },
- methods: {
- handleSelectionChange(val) {
- this.multipleSelection = val
- },
- // 编辑图例取消
- cancel() {
- if (this.editNum.length > 0) {
- this.$confirm('图例中的数据发生变化, 是否需要保存?', {
- confirmButtonText: '保存',
- cancelButtonText: '放弃修改',
- type: 'warning'
- })
- .then(() => {
- this.$emit('saveNum', this.editNum)
- })
- .catch(() => {
- this.$message({
- type: 'info',
- message: '已放弃修改'
- })
- this.editNum = []
- this.$emit('saveNum', this.editNum)
- })
- } else {
- this.$store.commit('SETSHOWVIEW', 1)
- this.$emit('saveNum', this.editNum)
- }
- },
- // 编辑图里保存
- save() {
- this.queryEdit(this.editNum)
- },
- // 编辑数量
- queryEdit(val) {
- let arr = []
- if (val.length > 0) {
- val.forEach(e => {
- let obj = {
- BuildingId: '1',
- Num: e.Num == '' ? null : Number(e.Num),
- GraphElementId: e.GraphElementId,
- FloorId: this.$cookie.get('floorMapId'),
- ProjectId: e.ProjectId,
- CategoryId: e.GraphCategoryId
- }
- arr.push(obj)
- })
- }
- let params = {
- postParams: {
- Content: arr
- }
- }
- updateStatis(params)
- .then(res => {
- if (res.Result == 'success') {
- this.$message({
- message: '操作成功',
- type: 'success'
- })
- this.$emit('changeSwitch', true)
- this.$store.commit('SETSHOWVIEW', 1)
- } else {
- this.$message({
- message: '操作失败',
- type: 'error'
- })
- }
- })
- .catch(err => {
- this.$message({
- message: err,
- type: 'error'
- })
- })
- },
- // 修改图例数量
- changeTable(val) {
- this.editNum.push(val)
- let result = [],
- obj = {}
- for (var i = 0; i < this.editNum.length; i++) {
- if (!obj[this.editNum[i].GraphElementId]) {
- result.push(this.editNum[i])
- obj[this.editNum[i].GraphElementId] = true
- }
- }
- this.editNum = result
- },
- // 修改隐藏为0的项目的开关
- changeSwitch(val) {
- this.$emit('handleSwich2', val)
- }
- // init() {
- // this.tbData1 = []
- // this.tbData2 = []
- // this.tbData3 = []
- // if (this.editTable.length > 0) {
- // this.tbData1 = this.editTable
- // 以下不要动 不要删
- // let len = this.tableData.length
- // if (len <= 10) {
- // this.tbData1 = this.tableData
- // } else if (len > 10 && len <= 20) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, len)
- // } else if (len > 10 && len <= 30) {
- // this.tbData1 = this.tableData.slice(0, 10)
- // this.tbData2 = this.tableData.slice(10, 20)
- // this.tbData3 = this.tableData.slice(20, len)
- // } else {
- // this.tbData1 = this.tableData.slice(0, parseInt(len / 3))
- // this.tbData2 = this.tableData.slice(parseInt(len / 3), parseInt(len / 3) * 2)
- // this.tbData3 = this.tableData.slice(parseInt(len / 3) * 2, len)
- // }
- // }
- // }
- },
- mounted() {}
- }
- </script>
- <style lang="less" scoped>
- .view {
- position: relative;
- .legend-tab2 {
- position: absolute;
- top: -44px;
- right: 47px;
- width: 385px;
- // width: 420px;
- height: 460px;
- // min-width: 350px;
- // width: auto;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid rgba(228, 229, 231, 1);
- .legend-table2-box {
- display: flex;
- justify-content: flex-end;
- .legend-table2 {
- padding: 16px 10px;
- height: 430px;
- width: 100%;
- }
- }
- }
- .dataTwo {
- padding: 0 5px;
- cursor: pointer;
- }
- .swich {
- position: absolute;
- right: 16px;
- bottom: 56px;
- span {
- margin-left: 8px;
- }
- }
- .Url-img {
- width: 20px;
- height: 22px;
- line-height: 20px;
- margin: 0 auto;
- img {
- display: block;
- max-width: 100%;
- max-height: 100%;
- margin: 0 auto;
- }
- }
- .lengend-text {
- font-size: 12px;
- color: red;
- padding-left: 16px;
- margin-top: -50px;
- }
- .legendFoot {
- position: absolute;
- right: 16px;
- bottom: 12px;
- }
- }
- </style>
- <style lang="less">
- .view {
- .el-input--mini .el-input__inner {
- width: 50px;
- }
- .el-input__inner {
- padding: 0 5px;
- }
- .legend-container .el-table td,
- .legend-container .el-table th {
- padding: 3px 0 !important;
- }
- .nullData {
- .el-input__inner {
- color: #ccc !important;
- }
- }
- .redData {
- .el-input__inner {
- border: 1px solid rgba(255, 77, 79, 0.5) !important;
- }
- }
- }
- </style>
|