zhgkpt-datav/app/src/views/Fire/components/UnitInfo.vue

<template>
	<div class="maintenance-supervision">
		<div class="maintenance-supervision_header">
			<el-input v-model="search" placeholder="建筑名称"></el-input>
			<div>
				<el-select v-model="value" placeholder="管理形式">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>

			<el-button @click="getZjglList">搜索</el-button>
			<el-button @click="colos">重置</el-button>
		</div>
		<div v-if="checked === 0">
			<div class="row header">
				<span class="num">序号</span>
				<span class="time">建筑名称</span>
				<span class="person">管理形式</span>
				<span class="result">管理单位</span>
			</div>
			<VueSeamlessScroll :data="ZjglList" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in ZjglList" :key="index">
						<span class="num">{{ index + 1 }}</span>
						<span class="time">{{ item.gcjzmc }}</span>
						<span class="person">{{ item.xfaqglxs }}</span>
						<span class="result" :style="{
                color: resultType(item.glzthztjzd),
              }">{{ item.glzthztjzd }}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>

		<div v-if="checked === 1">
			<div class="row header">
				<span class="time">检查结束事件</span>
				<span class="person">执法机构</span>
				<span class="result">检查结果</span>
			</div>
			<VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in list2" :key="index">
						<span class="time">{{ item[0] }}</span>
						<span class="person">{{ item[1] }}</span>
						<span class="result" :style="{
                color: resultType(item[2]),
              }">{{ item[2] }}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>
		<div v-if="checked === 2">
			<div class="row header">
				<span class="time">登记事件</span>
				<span class="person">排查人员</span>
				<span class="result">是否存在隐患</span>
			</div>
			<VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in list3" :key="index">
						<span class="time">{{ item[0] }}</span>
						<span class="person">{{ item[1] }}</span>
						<span class="result" :style="{
                color: resultType(item[2]),
              }">{{ item[2] }}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>
		<div v-if="checked === 3">
			<div class="row header">
				<span class="time">检查时间</span>
				<span class="person">检查人</span>
				<span class="result">检查结果</span>
			</div>
			<VueSeamlessScroll :data="list4" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in list4" :key="index">
						<span class="time">{{ item[0] }}</span>
						<span class="person ellipsis">{{ item[1] }}</span>
						<span class="result ellipsis">{{ item[2] }}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>
	</div>
</template>
<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import { getZjgldwxx} from "@/api/management.js";
export default {
  name: "MaintenanceSupervision",
  data() {
    return {
       ZjglList:[],
      search: "",
      options: [
        {
          value: '有管理单位 (物业)',
          label: '有管理单位 (物业)'
        },
        {
          value: '有管理单位 (非物业)',
          label: '有管理单位 (非物业)'
        },
        {
          value: '居民自主管理',
          label: '居民自主管理'
        },
        {
          value: '街道社区代表',
          label: '街道社区代表'
        },
        {
          value: '其他',
          label: '其他'
        },
        {
          value: '无管理主体',
          label: '无管理主体'
        }
      ],
      value: "",
      checked: 0,
    };
  },
  props: {
    qx: String
  },
  components: {
    VueSeamlessScroll,
  },
  computed: {
    classOption() {
      return {
        singleHeight: 43,
      };
    },
  },
  watch: {
    qx() {
      this.getZjglList()
    }
  },
  methods: {
    colos(){
      this.search=''
      this.value=''
      this.getZjglList()
    },
    change(idx) {
      this.checked = idx;
    },
    resultType(text) {
      return {
        合格: "#23f59d",
        不合格: "#df575b",
        是: "#23f59d",
        否: "#df575b",
      }[text];
    },
     // 管理单位信息
	getZjglList(){
    const params={
      pageSize: 100,
        pageNum: 1,
        qx: this.qx === '重庆市' ? "" : this.qx,
        glzthztjzd:this.search,
        xfaqglxs:this.value
    }
		getZjgldwxx(params).then(res=>{
			this.ZjglList=res.data.rows
		})
	}
  },
    created(){
    this.getZjglList()
  }
};
</script>

<style scoped lang="less">
	.maintenance-supervision {

		// padding: 10px 10px 0px 20px;
		::v-deep(.el-input__inner) {
			border: none;
			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
			color: #fff;
		}

		::v-deep(.el-button) {
			border: none;
			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
			color: #fff;
		}

		.maintenance-supervision_header {
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #154956;
			padding-bottom: 2px;
			margin-top: 15px;
			font-size: 12px;
			color: rgb(79, 149, 186);
		}

		.warp {
			height: 520px;
			margin: 0 auto;
			overflow: hidden;

			.item {
				list-style: none;
				padding: 0;
				margin: 0 auto;
				cursor: pointer;
			}
		}

		.header {
			color: #fff;
			height: 33px !important;
			line-height: 33px !important;
			background-color: rgba(0, 163, 255, 0.3) !important;
			color: #61dbff;
			margin-top: 15px;
			margin-bottom: 6px;
		}


		.row,
		li,
		a {
			display: block;
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			background-color: rgba(0, 0, 0, 0.2);

			.time,
			.num,
			.person,
			.result {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
				// 超出隐藏
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.num {
				flex: 0.15;
			}
		}
	}



	/deep/.el-input__inner {
		background-color: #184254;
		width: 120px;
		height: 30px;
		margin-bottom: 5px;
	}

	/deep/.el-button {
		width: 80px;
		height: 32px;
		font-size: 14px;
		line-height: 2px;
		background: #184254;
		margin: 0 5px 0 30px;
		color: #fff;
		border-radius: 5px;
		border: none;
	}

	// /deep/.el-select-dropdown{

	//     background-color:#184254 !important;
	//     position: fixed;

	//   }
	/deep/.select_btn {
		position: absolute;
		top: 225px;
		right: 320px;
		//下拉框
	}

	// /deep/.el-select-dropdown{
	//      border: none;
	//      background-color: #184254 ;
	//  }
	//输入框
	//  /deep/.el-input__inner{
	//      color:#eee;
	//      border-color: #00fff6;
	//      background-color: rgba(1, 28, 82, 0.8);
	//  }
	//  //聚焦时的样式
	//  /deep/.el-select .el-input.is-focus .el-input__inner{
	//      border-color: #0B61AA;
	//      background-color: rgba(1, 28, 82, 0.8);
	//      color:#00D3E9;
	//  }
	//  //下拉框选中
	//  /deep/.el-select-dropdown__item{
	//      color: #eee;
	//  }
	//  //鼠标经过下拉框
	//  /deep/.el-select-dropdown__item.hover,
	//  /deep/.el-select-dropdown__item:hover{
	//      color:#00D3E9;
	//      background-color: #0F3360;
	//  }
</style>


<style>
	.el-select-dropdown.el-popper {
		background-color: #4167a0;
		color: #fff;
	}

	.el-popper[x-placement^=bottom] .popper__arrow::after {
		border-bottom-color: #4167a0 !important;
	}

	.el-select-dropdown.el-popper {
		border: 1px solid rgba(0, 213, 255, 0.6) !important;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item span {
		color: #fff;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
		color: #2f7df2;
	}

	.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
		background-color: #2f7df2;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
		color: #fff !important;
	}
</style>