settle_down_web/src/views/testProfile/testVue.vue

<template>
  <div class="dd_class_div3">
    <div class="dialog-body">
      <div class="title">
        <span class="title_first">【{{ sceneName }}专项】</span>
        <span class="secod_first">风险评估列表</span>
      </div>
      <div class="search-box">
        <div class="select-row">
          <div class="select-item">区域：</div>
          <div
            v-for="(item, index) in areaList"
            :key="item.value"
            :class="[
              'select-box',
              item.isSelected ? 'select-box-active' : '',
            ]"
            @click="selectArea(index)"
          >
            {{ item.label }}
          </div>
        </div>

        <div class="select-row">
          <div class="select-item">等级：</div>
          <div
            v-for="(item, index) in lvList"
            :key="item.value"
            :class="[
              'select-box',
              item.isSelected ? 'select-box-active' : '',
            ]"
            @click="selectLv(index)"
          >
            {{ item.label }}
          </div>
        </div>
        <div style="display: flex">
          <div class="select-row">
            <div class="select-item">是否高发：</div>
            <div>
              <el-checkbox-group v-model="checkListIsOften" size="medium" @change="getData()">
                <el-checkbox label="是" size="medium" />
                <el-checkbox label="否" size="medium" />
              </el-checkbox-group>
            </div>
          </div>

        </div>
        <div v-if="typeShow" class="select-row" style="margin-bottom: 0">
          <div class="select-item">类型：</div>
          <div
            v-for="(item, index) in typeList"
            :key="item.value"
            :class="[
              'select-box',
              item.isSelected ? 'select-box-active' : '',
            ]"
            @click="selectType(index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="dialog-table-header">
        <el-row>
          <el-col :span="2">等级</el-col>
          <el-col :span="6">风险概述</el-col>
          <el-col :span="2">所属区域</el-col>
          <el-col :span="4">责任单位</el-col>
          <el-col :span="3">评估单位</el-col>
          <el-col :span="3">评估时间</el-col>
          <!--          <el-col :span="4">处置状态</el-col>-->
          <!--          <el-col :span="6">已发生时长</el-col>-->
          <el-col :span="4">详情</el-col>
        </el-row>
      </div>
      <div style="height: 1100px;overflow: scroll;">
        <div v-for="(item,index) in infoDataList" class="dialog-table-body">
          <el-row>
            <el-col :span="2">
              <div class="row-center">
                <span :class="selectClassRow1(item.row1)">{{ item.row1 }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="row-center" style="position: relative">
                <el-tooltip :content="item.row2" class="item" effect="light" placement="top">
                  <div class="row-center-text">
                    {{
                      item.row2 ? item.row2.length ? item.row2.length > 20 ? (item.row2.substring(0, 20) + '...') : item.row2 : item.row2 : ''
                    }}
                  </div>
                </el-tooltip>
                <div v-if="item.row2_1" class="jiaobiao">{{ item.row2_1 }}</div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="area">{{ item.row3 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="row-center">
                <span>{{ item.row4 }}</span>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="row-center">
                <span>{{ item.row5 }}</span>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="row-center">
                <span>{{ item.row6 }}</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="row-center">
                <span style="color: #fecd2d" @click="showDetailDetail(item)">查看详情</span>&nbsp;&nbsp;
                <span style="color: #fecd2d" @click="showDetail(item)">查看处置地图</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="allpage"
        class="pagination-class"
        layout="total, prev, pager, next"
        style="			margin-top: 20px;"
        @current-change="handleCurrentChange"
      />

    </div>
    <el-dialog
      v-el-drag-dialog
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      :modal="false"
      :visible.sync="dialogVisible2"
      custom-class="dialogNew"
      width="1920px"
    >

    </el-dialog>

    <detailDialogBack :dialog-visible="dialogVisibleFor" @closeVideo="closeRiskItem()">
      <template slot="dialogBody">
        <risk-detail-ranqi v-if="dialogVisibleFor && detailData.typeStr==='燃气爆炸'" ref="rqbz" />
        <risk-detail-neilaoyushui
          v-else-if="dialogVisibleFor && detailData.typeStr==='城市内涝' && detailData.childtype === '雨水'"
          ref="nlys"
        />
        <risk-detail-yilaodian
          v-else-if="dialogVisibleFor && detailData.typeStr==='城市内涝' && detailData.childtype === '易涝点'"
          ref="nlyl"
        />
        <risk-detail-gongshui v-else-if="dialogVisibleFor && detailData.typeStr==='供水爆管'" ref="gsbg" />
        <risk-detail-qiaoliang v-else-if="dialogVisibleFor && detailData.typeStr==='桥梁倒塌'" ref="qldt" />
        <risk-detail-daolu v-else-if="dialogVisibleFor && detailData.typeStr==='道路塌陷'" ref="dltx" />
        <risk-detail v-else-if="dialogVisibleFor" ref="riskDetail" />
      </template>
    </detailDialogBack>
    <dialogWarning :dialog-visible="dialogWarning" @closeVideo="closeItem()">
      <template slot="dialogBody">
        <div
          style="height:1049px;display: flex;flex-direction:column;align-items: center;justify-content: center;color: white;font-size: 80px"
        >
          <img src="@/components/my-dialog/image/warningIcon.png" style="margin-bottom: 60px">
          {{ errMsg }}
        </div>
      </template>
    </dialogWarning>
  </div>

</template>

<script>
import sacleBox from '@/views/testProfile/sacleBox.vue'
import pic from './pic.vue'
import constant from '@/static/utils/constant'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import dialogWarning from '@/components/my-dialog/dialogWarning.vue'
import riskDetail from '@/views/life-line/monitor/points/assitsdanger/components/riskDetail.vue'
import riskDetailNeilaoyushui from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailNeilaoyushui.vue'
import riskDetailDaolu from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailDaolu.vue'
import riskDetailQiaoliang from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailQiaoliang.vue'
import dialogFor from '@/components/my-dialog/dialogFor.vue'
import riskDetailYilaodian from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailYilaodian.vue'
import riskDetailRanqi from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailRanqi.vue'
import riskDetailGongshui from '@/views/life-line/monitor/points/assitsdanger/components/riskDetailGongshui.vue'
import detailDialogBack from '@/components/my-dialog/detailDialogBack.vue'

export default {
    // name: "DraggableDialog",
    components: {
        riskDetailGongshui,
        riskDetailRanqi,
        riskDetailYilaodian,
        dialogFor,
        riskDetailQiaoliang,
        riskDetailDaolu,
        riskDetailNeilaoyushui,
        riskDetail,
        dialogWarning,
        pic,
        sacleBox,
				detailDialogBack
    },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['GRADE', 'DISPOSAL_STATE', 'AREA_CODE', '燃气_FXPG_FXLX_DM', '综合管线_JHFXYH_YHLX_DM', 'NOTICE_SCENE'],
            sceneCode: '',
            sceneName: '',
            childtype: '',
            infoDataList: [],
            dialogVisible: true,
            dialogVisible2: false,
            dialogVisibleFor: false,
            typeShow: false,
            dialogWarning: false,
            errMsg: '',
            imageUrl: '',
            title: '',
            checkListIsOften: [], // 是否高发
            checkListIsOver: [], // 是否超时
            checkListDoState: [], // 处置状态:未启动,处置中

            typeList: [],
            lvList: [
                { label: '重大', value: constant.RISK_GRADE.get('重大'), isSelected: false },
                { label: '较大', value: constant.RISK_GRADE.get('较大'), isSelected: false },
                { label: '一般', value: constant.RISK_GRADE.get('一般'), isSelected: false },
                { label: '低', value: constant.RISK_GRADE.get('低'), isSelected: false }
            ],
            areaList: [
                { label: '梁溪区', value: 320213, isSelected: false },
                { label: '锡山区', value: 320205, isSelected: false },
                { label: '惠山区', value: 320206, isSelected: false },
                { label: '滨湖区', value: 320211, isSelected: false },
                { label: '新吴区', value: 320214, isSelected: false },
                { label: '经开区', value: 320299, isSelected: false },
                { label: '江阴市', value: 320281, isSelected: false },
                { label: '宜兴市', value: 320282, isSelected: false }
            ],
            detailData: {}
        }
    },

    methods: {
        closeRiskItem() {
            this.dialogVisibleFor = false
        },
        showDetail(item) {
            let lng = ''
            let lat = ''
            if (item.kjxx) {
                const json = JSON.parse(item.kjxx)
                if (this.$common.isValidCoordinate(json.coordinates[0], json.coordinates[1])) {
                    lng = json.coordinates[0]
                    lat = json.coordinates[1]
                }
            }
            if (!lng || !lat) {
                this.errMsg = '坐标数据有误'
                this.dialogWarning = true
                return
            }

            this.$router.replace({
                path: '/lifeLine/monitor/points/assistdanger',
                query: {
                    id: item.bsm,
                    lat: lat,
                    lng: lng,
										tableName:item.table
                }
            })
        },
        showDetailDetail(item) {
            this.detailData = item
            this.detailData.typeStr = this.detailData.type ? this.dc_data.NOTICE_SCENE[this.detailData.type] ? this.dc_data.NOTICE_SCENE[this.detailData.type].label : '' : ''
            this.dialogVisibleFor = true
            if (this.detailData.typeStr === '供水爆管') {
                this.$nextTick(() => {
                    this.$refs.gsbg.initData(this.detailData.bsm, this.detailData.table)
                })
            } else if (this.detailData.typeStr === '燃气爆炸') {
                this.$nextTick(() => {
                    this.$refs.rqbz.initData(this.detailData.bsm, this.detailData.table)
                })
            } else if (this.detailData.typeStr === '道路塌陷') {
                this.$nextTick(() => {
                    this.$refs.dltx.initData(this.detailData.bsm, this.detailData.table)
                })
            } else if (this.detailData.typeStr === '桥梁倒塌') {
                this.$nextTick(() => {
                    this.$refs.qldt.initData(this.detailData.bsm, this.detailData.table)
                })
            } else if (this.detailData.typeStr === '城市内涝' && this.detailData.childtype === '雨水') {
                this.$nextTick(() => {
                    this.$refs.nlys.initData(this.detailData.bsm, this.detailData.table)
                })
            } else if (this.detailData.typeStr === '城市内涝' && this.detailData.childtype === '易涝点') {
                this.$nextTick(() => {
                    this.$refs.nlyl.initData(this.detailData.bsm, this.detailData.table)
                })
            } else {
                this.$nextTick(() => {
                    this.$refs.riskDetail.initData(this.detailData.bsm, this.detailData.table)
                })
            }
        },
        closeItem() {
            this.dialogWarning = false
        },
        // ok 做一个父传子的数据
        // 显示风险小屏幕, sceneCode选择场景,isOver是否超时,selectGrade选择等级
        toGetData(sceneCode, isOver, selectGrade, childtype) {

            console.log('进入父传子的数据', selectGrade)
            this.sceneCode = sceneCode
            this.childtype = childtype
						console.log(childtype)
						console.log('sceneCodesceneCodesceneCode',sceneCode)
            if (sceneCode === '1') {
                this.sceneName = '内涝-' + childtype
            } else {
                this.sceneName = constant.SCENE_MAP.get(sceneCode)
            }
            this.checkListIsOften = []
            this.checkListIsOver = []
            this.checkListDoState = []
            this.lvList.forEach((e) => {
                e.isSelected = false
            })
            this.areaList.forEach((e) => {
                e.isSelected = false
            })

            if (isOver) {
                this.checkListIsOver = []
                this.checkListIsOver.push('是')
            }
            if (selectGrade) {
                if (selectGrade == constant.RISK_GRADE.get('低')) {
                    this.lvList[3].isSelected = true
                } else if (selectGrade == constant.RISK_GRADE.get('一般')) {
                    this.lvList[2].isSelected = true
                } else if (selectGrade == constant.RISK_GRADE.get('较大')) {
                    this.lvList[1].isSelected = true
                } else if (selectGrade == constant.RISK_GRADE.get('重大')) {
                    this.lvList[0].isSelected = true
                }
            }

            // 进行获取数据
            this.initDict(this.dc_key).then((res) => {
							this.infoDataList = []
							this.getData()
                this.typeList = []
                if (sceneCode === '0' && this.dc_data.燃气_FXPG_FXLX_DM) {
                    this.dc_data.燃气_FXPG_FXLX_DM.forEach(item => {
                        this.typeList.push({
                            label: item.label,
                            value: item.value,
                            isSelected: false
                        })
                    })
                    this.typeShow = true
                } else if (sceneCode === '4' && this.dc_data.综合管线_JHFXYH_YHLX_DM) {
                    this.dc_data.综合管线_JHFXYH_YHLX_DM.forEach(item => {
                        this.typeList.push({
                            label: item.label,
                            value: item.value,
                            isSelected: false
                        })
                    })
                    this.typeShow = true
                }
            })
        },
        // 获取数据
        getData() {
            const _this = this
            const gradeList = []
					_this.lvList.forEach((e) => {
                if (e.isSelected === true) {
                    gradeList.push(e.value)
                }
            })
            const placesList = []
					_this.areaList.forEach((e) => {
                if (e.isSelected) {
                    placesList.push(e.value)
                }
            })
            const typeList = []
					_this.typeList.forEach((e) => {
                if (e.isSelected) {
                    typeList.push(e.value)
                }
            })
            _this.infoDataList = []
					_this.baseRequestZt('SecuritySuperviseController/findInfoDetailEveryPlace', {
                pageNum: _this.currentPage,
                pageSize: _this.pageSize,
                top_type: '1',
                childtype: _this.childtype,
                second_type: _this.sceneCode,
                levels: gradeList.join(','),
                places: placesList.join(','),
                disposeProgress: _this.checkListDoState.join(','),
                isOften: _this.checkListIsOften.join(','),
                isTimeout: _this.checkListIsOver.join(','),
                type: typeList.join(',')
            }).then((res) => {
                // const data = res.data
                // console.log('获取数据:res.data', res.data)
                if (res.data.rows) {
                    res.data.rows.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        _this.infoDataList.push(json)
                    })
                    _this.allpage = res.data.total
									console.log('_this.infoDataList',_this.infoDataList)
                }
                // data.forEach(function(item) {
                //     const json = _this.getItemJson(item)
                //     _this.infoDataList.push(json)
                // })
            }).catch((e) => {
                // console.log(e)
            })
        },
        getItemJson: function(item) {
            item.row1 = this.dc_map.GRADE[item.fxdj] || '-'
            item.row2 = item.fxms // this.$common.transDate(item.birthday, this.$constant.DATE_PATTERN.DATE_TIME_s_h)
            item.row2_1 = item.is_often === '是' ? '高发' : ''// this.$common.transDate(item.createdAt, this.$constant.DATE_PATTERN.DATE_TIME_s_h)
            item.row3 = this.dc_map.AREA_CODE[item.xzqhdm]
            item.row4 = item.zrdw
            item.row5 = item.pgdw
            item.row6 = item.pgsj ? this.$common.formatDate('yyyy-MM-dd', new Date(item.pgsj)) : ''
            return item
        },
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        baseRequestZt(opUrl, postData) {
            return this.$channel.globeRequest('', opUrl, postData, 'project')
        },
        consoleLog() {
            // console.log('asnvjofqpfwvfnpnwj')
        },
        selectClassRow1(row1) {
            if (row1 === '重大') {
                return 'assistdanger'
            } else if (row1 === '较大') {
                return 'warn'
            } else if (row1 === '一般') {
                return 'success'
            }
        },
        selectClassRow4(row1) {
            if (row1 === '未启动') {
                return 'statusbox'
            } else if (row1 === '处置中') {
                return 'statusbox-warn'
            }
        },
        selectClassRow5(row1) {
            // console.log('row1', row1)
            row1 = row1 / 1
            // console.log('row1', row1)
            if (row1 <= 3) {
                return 'green'
            } else if (row1 <= 12) {
                return 'yellow'
            } else {
                return 'red'
            }
        },
        isValidCoordinate(lng, lat) {
            if (lat === 0 || lng === 0) {
                return false
            }
            // 校验纬度是否在 -90 到 90 之间
            if (lat < -90 || lat > 90) {
                return false
            }
            // 校验经度是否在 -180 到 180 之间
            return !(lng < -180 || lng > 180)
        },
        selectArea(index) {
            this.areaList[index].isSelected = !this.areaList[index].isSelected
            this.getData()
        },
        selectType(index) {
            this.typeList[index].isSelected = !this.typeList[index].isSelected
            this.getData()
        },
        selectLv(index) {
            this.lvList[index].isSelected = !this.lvList[index].isSelected
            this.getData()
        }
        // dialogClose() {
        //     this.dialogVisible = false
        // }
    }
}
</script>

<style lang="scss">
.dd_class_div3 {

	.dialog-body {
		.pagination-class {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
			line-height: 30px;

			.el-icon-arrow-lef {
				font-size: 45px;
			}

			button {
				background-color: rgba(0, 0, 0, 0);
				color: white;

				.el-icon {
					font-size: 45px;
				}

				.more::before {
					line-height: 90px;
				}

				height: 75px !important;
				width: 75px !important;
				line-height: 75px !important;
			}

			li {
				font-size: 45px;
				background-color: rgba(0, 0, 0, 0);
				color: white;
			}

			.btn-next .btn-prev {
				height: 75px;
				width: 75px;
				//font-size: 75px;
				line-height: 75px;
				color: white;
				background-color: rgba(0, 0, 0, 0);
			}

			.active {
				color: #409EFF;
				font-size: 45px;
				height: 75px !important;
				width: 75px !important;
				line-height: 75px !important;
				background: #2B78FF !important;
				border-radius: 4px 4px 4px 4px;
			}

			.el-pagination__total {
				font-size: 45px;
				color: white;
			}

			.number {
				margin-left: 10px;
				margin-right: 10px;
				font-size: 45px;
				height: 75px !important;
				width: 75px !important;
				line-height: 75px !important;
				color: #DDDDDD;
				background: rgba(155, 188, 255, 0.27);
			}

		}

		.jiaobiao {
			background: url(./image/jiaobiao.png);
			width: 64px;
			height: 46px;
			font-size: 20px;
			text-align: center;
			line-height: 46px;
			color: #ffffff;
			position: absolute;
			top: 0;
			right: 0;
		}

		.time-line {
			width: 80px;
			height: 16px;
			background: #f47526;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
		}

		.tiem-hour {
			width: 400px;
			color: #f47526;
		}

		.timebox {
			width: 320px;
			height: 16px;
			background: #ffffff;
			border-radius: 0px 0px 0px 0px;
			margin-right: 20px;
		}

		.statusbox {
			width: 240px;
			height: 100px;
			background: rgba(255, 78, 54, 0.3);
			border-radius: 50px 50px 50px 50px;
			opacity: 1;
			line-height: 100px;
			color: #ff4e36;
			border: 2px solid rgba(255, 78, 54, 0.5);
		}

		.statusbox-warn {
			width: 240px;
			height: 100px;
			line-height: 100px;
			background: rgba(255, 147, 54, 0.3);
			border-radius: 50px 50px 50px 50px;
			opacity: 1;
			border: 2px solid rgba(255, 147, 54, 0.5);
			color: #ff9336;
		}

		.row-center {
			width: 100%;
			height: 150px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.success {
			color: #29bb38;
			font-size: 48px;
			line-height: 150px;
		}

		.warn {
			color: #ff9900;
			font-size: 48px;
			line-height: 150px;
		}

		.danger {
			color: #fb565e;
			font-size: 48px;
			line-height: 150px;
		}

		.area {
			height: 150px;
			line-height: 150px;
		}

		.title {
			text-align: center;
			font-size: 60px;
			margin-top: 50px;

			.title_first {
				color: #fec12d;
			}

			.secod_first {
				color: white;
			}
		}

		.search-box {
			background: rgba(16, 57, 143, 0.5);
			width: 3600px;
			display: block;
			margin: 0 auto;
			margin-top: 60px;
			padding: 60px;
		}

		.select-row {
			display: flex;
			margin-bottom: 40px;
		}

		.select-item {
			height: 82px;
			line-height: 82px;
			font-size: 52px;
			color: #cccccc;
		}

		.dialog-table-header {
			font-size: 52px;
			font-weight: 400;
			color: #ffffff;
			width: 3600px;
			display: block;
			margin: 0 auto;
			margin-top: 40px;
			text-align: center;
		}

		.dialog-table-body {
			font-size: 52px;
			font-weight: 400;
			color: #ffffff;
			width: 3600px;
			height: 150px;
			display: block;
			margin: 0 auto;
			margin-top: 40px;
			background: rgba(20, 61, 147, 0.4);
			text-align: center;
		}

		.select-box {
			padding: 0 52px;
			height: 82px;
			margin: 0 40px;
			font-weight: 300;
			line-height: 82px;
			font-size: 44px;
			text-align: center;
			border-radius: 4px 4px 4px 4px;
			background: rgba(255, 255, 255, 0.24);
			color: white;
		}

		.select-box-active {
			background: rgba(0, 242, 255, 0.24);
			color: #00f2ff;
		}

		.el-checkbox {
			margin: 0 30px;
			display: flex;
			align-items: center;
		}

		.el-checkbox-group {
			display: flex;
		}

		.el-checkbox__inner {
			display: inline-block;
			zoom: 3.7;
			background: rgba(0, 0, 0, 0);
		}

		.el-checkbox__label {
			font-weight: 600;
			color: #ffffff;
			font-size: 48px;
			height: 82px;
			line-height: 82px;
		}
	}

}

.el-dialog__body {
	padding: 0 !important;
}

.dd_class_div3 {
	width: 100%;
	height: 2120px;
	overflow: hidden;
	position: relative;
}

.el-dialog {
	pointer-events: auto;
}

.row-center-text {
	width: 100%;
	max-height: 60px;
	overflow: hidden;
	/* 三行显示省略号 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.dialogNew {
	height: 2160px !important;
	//   background: #16213c;
	background: url("./image/dialogBg.jpg") no-repeat !important;
	background-size: 100% !important;
}

</style>
<style lang="scss" scoped>
/deep/ .el-dialog__header {
	height: 75px;
	width: 100%;
	position: absolute;
}
//这段样式务必加上，不然其他按钮无法点击
.el-dialog__wrapper {
	pointer-events: none !important;

	.el-dialog {
		pointer-events: auto;
		margin: auto;
		top: calc(50% - 540px);
		margin-top: 0 !important;
	}

}
</style>