settle_down_web/src/views/life-line/monitor/components/event-analysis.vue

<template>
  <div class="eventAnalysis">
    <div class="dialog-body">
      <div style="display: flex;justify-content: space-between">
        <div class="el-carousel-title">
          事件档案：
        </div>
        <div>
          <el-input
            v-model="input"
            placeholder="请输入关键字、事件名称等模糊查询"
            style="width: 830px;height: 108px;font-size: 40px"
            @change="handleSearch"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" />
          </el-input>
        </div>
      </div>
      <div class="title">
        <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 lvList"
            :key="item.value"
            :class="[
              'select-box',
              item.isSelected ? 'select-box-active' : '',
            ]"
            @click="selectLv(index)"
          >
            {{ item.label }}
          </div>
          <div style="margin-left: 1200px;">
            <div style="display: flex;align-items: center">
              <div class="select-item">是否高发：</div>
              <div style="display: flex">
                <el-checkbox v-model="checked" label="是" size="medium" @change="changeCheck" />
                <el-checkbox v-model="checked2" label="否" size="medium" @change="changeCheck2" />
              </div>
            </div>
          </div>
        </div>
        <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" 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="2">等级</el-col>
          <el-col :span="8">事件描述</el-col>
          <el-col :span="2">所属区域</el-col>
          <el-col :span="4">处置状态</el-col>
          <el-col :span="4">存档日期</el-col>
          <el-col :span="2">档案</el-col>
        </el-row>
      </div>
			<div style="height: 1150px;overflow-y: scroll;">
      <div v-for="(item,index) in infoDataList" class="dialog-table-body">
        <el-row>
          <el-col :span="2">
            <span class="row-center">{{ index + 1 }}</span>
          </el-col>
          <el-col :span="2">
            <span :class="selectClassRow1(item.row1)">{{ item.row1 }}&nbsp;</span>
          </el-col>
          <el-col :span="8">
            <div class="row-center" style="position: relative">
              <div class="row-center-text">
                {{ item.row2 }}
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="area">{{ item.row3 }}</div>
          </el-col>
          <el-col :span="4">
            <div class="row-center">
              <div :class="selectClassRow4(item.row4)">{{ item.row4 }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="row-center">
              <div>{{ item.row5 }}</div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="row-center">
              <span style="color: #fecd2d" @click="showDetailDangAn(item)">查看</span>
            </div>
          </el-col>
        </el-row>
      </div>
			</div>
      <!--      <el-pagination-->
      <!--        background-->
      <!--        layout="prev, pager, next"-->
      <!--        :total="1000"-->
      <!--      />-->
      <!--        <div class="table-page">-->
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="allpage"
        background
        layout="total, prev, pager, next"
        @current-change="handleCurrentChange"
      />
      <!--        </div>-->
    </div>
<!--    <dialogFor-->
<!--      :dialog-visible="dialogVisibleDangAn"-->
<!--      @closeVideo="closeItem()"-->
<!--    >-->
<!--      &lt;!&ndash;          事件&ndash;&gt;-->
<!--      <template slot="dialogBody">-->
<!--        <things v-if="dialogVisibleDangAn" :data="toData" />-->
<!--      </template>-->
<!--    </dialogFor>-->
  </div>
</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import constant from '@/static/utils/constant'
import myBus from '@/views/life-line/monitor/assets/js/myBus'
// import things from '@/views/detailPages/things.vue'
// import dialogFor from '@/components/my-dialog/dialogFor.vue'

export default {
    components: {
        // things,
        // dialogFor
    },
    // name: "DraggableDialog",
    mixins: [Base, BaseData],
    props: ['faMsg'],
    data() {
        return {
            dialogVisibleDangAn: false,
            toData: {},
            dc_key: ['EVENT_RANK', 'DISPOSAL_STATE', 'AREA_CODE', 'EVENT_TYPE'],
            // 列表相关
            search: {
                scene: '',
                info: '',
                places: '',
                levels: '',
                isOften: '',
                types: ''
            },
            checked: false,
            checked2: false,
            input: '',
            infoDataList: [
                // {
                //     row1: '重大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '滨湖区',
                //     row4: '已处置',
                //     row5: '2022-12-01',
                //     row6: '2'
                // },
                // {
                //     row1: '较大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '新吴区',
                //     row4: '处置中',
                //     row5: '2023-01-11'
                // },
                // {
                //     row1: '较大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '新吴区',
                //     row4: '处置中',
                //     row5: '2023-01-11'
                // },
                // {
                //     row1: '较大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '新吴区',
                //     row4: '处置中',
                //     row5: '2023-01-11'
                // },
                // {
                //     row1: '较大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '新吴区',
                //     row4: '处置中',
                //     row5: '2023-01-11'
                // },
                // {
                //     row1: '较大',
                //     row2: 'XXX点位燃气管网第三方施工管网交叉穿越圈占压',
                //     row3: '新吴区',
                //     row4: '处置中',
                //     row5: '2023-01-11'
                // }
            ],
            dialogVisible: true,
            dialogVisible2: false,
            imageUrl: '',
            title: '',
            checkList: [],
            typeList: [
                // { label: '第三方施工', value: 1, isSelected: false },
                // { label: '管网安全间距不足', value: 2, isSelected: false },
                // { label: '管网老化', value: 3, isSelected: false },
                // { label: '管网交叉穿越', value: 4, isSelected: false },
                // { label: '管网圈占压', value: 4, isSelected: false }
            ],
            lvList: [
                { label: '四级', value: constant.SHIJIAN_GRADE.get('四级'), isSelected: false },
                { label: '三级', value: constant.SHIJIAN_GRADE.get('三级'), isSelected: false },
                { label: '二级', value: constant.SHIJIAN_GRADE.get('二级'), isSelected: false },
                { label: '一级', value: constant.SHIJIAN_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 }
            ]
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {
            this.typeList = []
            this.dc_data.EVENT_TYPE.forEach(e => {
                this.typeList.push({
                    label: e.label, value: e.value, isSelected: false
                })
            })
            this.getData()
        })
    },
    methods: {
        closeItem() {
            this.dialogVisibleDangAn = false
        },
        showDetailDangAn(item) {
            myBus.$emit('eventList',item)
            // console.log('查询111详细信息', item)
            // this.toData = item
            // this.dialogVisibleDangAn = true
        },
        getData() {
            const _this = this
            try {
                const levelList = []
                this.lvList.forEach((e) => {
                    if (e.isSelected === true) {
                        levelList.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.search.pageNum = this.currentPage
                this.search.pageSize = this.pageSize
                this.search.scene = this.faMsg
                this.search.info = this.input
                this.search.places = placesList.join(',')
                this.search.levels = levelList.join(',')
                // this.search.isOften = (this.checked ? '是' : '否') + ',' + (this.checked2 ? '否' : '是')
                if (this.checked && !this.checked2) {
                    this.search.isOften = '是'
                } else if (!this.checked && this.checked2) {
                    this.search.isOften = '否'
                } else {
                    this.search.isOften = ''
                }
                this.search.types = typeList.join(',')
                _this.baseRequestZt('SecuritySuperviseController/findShiJianFenXi',
                    _this.search
                ).then((res) => {
                    const data = res.data
                    // console.log('findShiJianFenXi获取数据data:', data)
                    // const item = data[0]
                    if (res.data.rows) {
                        res.data.rows.forEach(function(item) {
                            const json = _this.getItemJson(item)
                            _this.infoDataList.push(json)
                        })
                        console.log('_this.infoDataList', _this.infoDataList)
                        _this.allpage = res.data.total
                    }
                })
            } catch (e) {
                console.log(e)
            }
        },
        getItemJson: function(item) {
            item.level = item.level == '5' ? '4' : item.level
            item.row1 = this.dc_map.EVENT_RANK[item.level]
            item.row2 = item.name // 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.area]
            item.row4 = this.dc_map.DISPOSAL_STATE[item.dispose_progress]
            item.row5 = this.$common.transDate(item.create_time, this.$constant.DATE_PATTERN.DATE)

            // const time = parseInt(new Date().getTime() - item.find_time) / 1000 / 60 / 60 // 两个时间相差的秒数
            // item.row5_1 = (time / 24 * 100).toFixed(2) + '%'
            // item.row5 = time.toFixed(0)
            return item
        },
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        baseRequestZt(opUrl, postData) {
            return this.$channel.globeRequest('', opUrl, postData, 'project')
        },
        consoleLog() {
            console.log('asnvjofqpfwvfnpnwj')
        },
        changeCheck(e) {
            if (e) {
                this.checked2 = false
            }
            this.getData()
        },
        changeCheck2(e) {
            if (e) {
                this.checked = false
            }
            this.getData()
        },
        selectClassRow1(row1) {
            if (row1 === '四级') {
                return 'danger'
            } else if (row1 === '三级') {
                return 'warn'
            } else if (row1 === '二级') {
                return 'normal'
            } else if (row1 === '一级') {
                return 'success'
            }
        },
        selectClassRow4(row) {
            if (row === '未启动') {
                return 'statusbox'
            } else if (row === '处置中') {
                return 'statusbox-warn'
            } else if (row === '已处置') {
                return 'statusbox-finish'
            }
        },
        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'
            }
        },
        handleSearch: function() {
            this.getData()
        },
        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">

.eventAnalysis {
    width: 4603px;
    height: 100%;
    overflow: hidden;
    position: relative;

    .dialog-body {
        .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: 200px;
            color: #f47526;
        }

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

        .statusbox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 232px;
            height: 72px;
            background: rgba(255, 78, 54, 0.3);
            border-radius: 50px 50px 50px 50px;
            opacity: 1;
            color: #ff4e36;
            border: 2px solid rgba(255, 78, 54, 0.5);
        }

        .statusbox-warn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 232px;
            height: 72px;
            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;
        }

        .statusbox-finish {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 232px;
            height: 72px;
            background: rgba(0, 242, 255, 0.24);
            border-radius: 50px 50px 50px 50px;
            opacity: 1;
            border: 2px solid rgba(0, 242, 255, 0.24);
            color: rgba(0, 242, 255, 1);
        }

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

        .success {
            color: #29bb38;
            font-size: 54px;
            line-height: 149px;
        }
        .normal {
            color: royalblue;
            font-size: 54px;
            line-height: 149px;
        }
        .warn {
            color: #ff9900;
            font-size: 54px;
            line-height: 149px;
        }

        .danger {
            color: #fb565e;
            font-size: 54px;
            line-height: 149px;
        }

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

        .title {
            text-align: center;
            font-size: 78px;
            margin-top: 25px;
            font-family: pmzd;

            .title_first {
                color: #fec12d;
            }

            .secod_first {
                color: white;
            }
        }

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

        .select-row {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }

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

        .dialog-table-header {
            font-size: 54px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.6);
            width: 100%;
            display: block;
            margin: 0 auto;
            margin-top: 60px;
            text-align: center;
            padding: 30px 0;
        }

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

        .select-box {
            display: flex;
            align-items: center;
            padding: 10px 46px;
            height: 80px;
            margin: 0 20px;
            font-weight: 300;
            //line-height: 80px;
            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 15px;
            display: flex;
            align-items: center;
        }

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

        .el-checkbox__inner {
            width: 40px !important;
            height: 40px !important;
            display: inline-block;
            zoom: 1.7;
            background: rgba(0, 0, 0, 0);
        }

        .el-checkbox__label {
            font-weight: 400;
            color: #ffffff;
            font-size: 54px !important;
            height: 80px !important;
            line-height: 80px !important;
        }



        .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;
        }
    }

    .el-checkbox__inner::after {
        width: 9px;
        height: 21px;
        top: 3px !important;
        left: 13px !important;
    }

    .el-input__inner {
        height: 108px !important;
        border-radius: 54px !important;
    }

    .el-input__suffix {
        right: 85px !important;
        top: 37px !important;
    }

    .number {
        background: transparent !important;
        border: 3px solid rgba(204, 204, 204, 1) !important;
        color: rgba(204, 204, 204, 1) !important;
        margin: 0 30px !important;
        border-radius: 8px !important;

        &:hover {
            color: white;
            background: rgba(0, 242, 255, 0.61) !important;
            border: none !important;
        }
    }

    .el-icon-more {
        background: transparent !important;
        border: 3px solid rgba(204, 204, 204, 1) !important;
        color: rgba(204, 204, 204, 1) !important;
        border-radius: 8px !important;

        &:hover {
            color: white;
            background: rgba(0, 242, 255, 0.61) !important;
            border: none !important;
        }
    }

    .btn-next {
        background: transparent !important;
        border: 3px solid rgba(204, 204, 204, 1) !important;
        color: rgba(204, 204, 204, 1) !important;
        border-radius: 8px !important;

        &:hover {
            color: white;
            background: rgba(0, 242, 255, 0.61) !important;
            border: none !important;
        }
    }

    .btn-prev {
        background: transparent !important;
        border: 3px solid rgba(204, 204, 204, 1) !important;
        color: rgba(204, 204, 204, 1) !important;
        border-radius: 8px !important;

        &:hover {
            color: white;
            background: rgba(0, 242, 255, 0.6) !important;
            border: none !important;
        }
    }

    .active {
        background: rgba(0, 242, 255, 1) !important;
        color: white !important;
        border-radius: 8px !important;
        border: none !important;
    }
}
</style>
<style lang="scss" scoped>
/deep/ .el-dialog__header {
    height: 75px;
    width: 100%;
    position: absolute;
}

//这段样式务必加上，不然其他按钮无法点击
/deep/ .el-dialog__wrapper {
    pointer-events: none !important;

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

}
</style>