- <template>
- <div id="dgtxg">
- <!-- 公用部分,所有弹窗都要的分区查询,由于类型较多,不封装,通过复制代码公用 -->
- <div class="JCFX_Com_SearchBox">
- <el-form :model="Search_form" label-width="auto" :inline="true">
- <el-form-item :label="TypeID == 'sewage' ? '污水系统' : '汇水分区'">
- <el-select
- v-model="Search_form.oneID"
- style="width: 160px"
- @change="OneChange()"
- >
- <el-option
- v-for="item in AllData.oneOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item :label="TypeID == 'sewage' ? '污水片区' : '汇水片区'">
- <el-select
- v-model="Search_form.twoID"
- style="width: 160px"
- @change="TwoChange()"
- >
- <el-option
- v-for="item in AllData.twoOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item :label="TypeID == 'sewage' ? '污水干管' : '雨水干管'">
- <el-select
- v-model="Search_form.threeID"
- style="width: 160px"
- @change="ThreeChange()"
- >
- <el-option
- v-for="item in AllData.threeOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="排水单元">
- <el-select v-model="Search_form.fourID" style="width: 160px">
- <el-option
- v-for="item in AllData.fourOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="井编号">
- <el-input v-model="Search_form.JBH" style="width: 160px" clearable />
- </el-form-item>
- <el-form-item label="复勘状态">
- <el-select v-model="Search_form.FKID" style="width: 160px">
- <el-option
- v-for="item in AllData.FKOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="位置关键字">
- <el-input v-model="Search_form.GJZ" style="width: 240px" clearable />
- </el-form-item>
- <el-form-item>
- <el-button color="#0B9BFF" :icon="Search" @click="getTableData">搜索</el-button>
- </el-form-item>
- </el-form>
- </div>
- <!-- 业务部分 -->
- <div class="JCFX_Com_Body">
- <el-table
- class="JCFX_Com_Table"
- :data="AllData.tableData"
- height="100%"
- style="width: 100%"
- stripe
- v-loading="AllData.TBloading"
- element-loading-text="加载中..."
- element-loading-background="rgba(0, 0, 0, 0.8)"
- >
- <el-table-column type="index" label="序号" width="60" />
- <el-table-column
- prop="startPointNumber"
- label="检查井号"
- width="100"
- show-overflow-tooltip
- />
- <el-table-column
- prop="pipelineCode"
- label="管段编号"
- width="100"
- show-overflow-tooltip
- ><template #default="scope">
- {{ scope.row.pipelineCode ? scope.row.pipelineCode : "-" }}
- </template>
- </el-table-column>
- <el-table-column prop="location" label="位置" width="180">
- <template #default="scope">
- <div class="color_blue" @click="ClickZBQJ(scope.row)">
- {{ scope.row.location }}
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="pipelineTexture" label="管网材质" width="100">
- <template #default="scope">
- {{ scope.row.pipelineTexture ? scope.row.pipelineTexture : "-" }}
- </template>
- </el-table-column>
- <el-table-column prop="defectTypeName" label="分析缺陷" width="100">
- <template #default="scope">
- {{ scope.row.defectTypeName ? scope.row.defectTypeName : "-" }}
- </template>
- </el-table-column>
- <el-table-column prop="resurveyFlag" label="复勘情况" width="100">
- <template #default="scope">
- <div :class="[scope.row.resurveyFlag == '已复勘' ? 'color_aqua' : '']">
- {{ scope.row.resurveyFlag }}
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="problemDescription" label="问题描述">
- <template #default="scope">
- {{ scope.row.problemDescription ? scope.row.problemDescription : "-" }}
- </template>
- </el-table-column>
- </el-table>
- <div class="paginationBox">
- <el-pagination
- layout="total, sizes, prev, pager, next, jumper"
- :page-size="Search_form.query.size"
- :total="Search_form.query.total"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="dgtxg">
- import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
- import { listPipelineDefectRisk } from "@/api/MonitoringAnalysis";
- import usepartitionStore from "@/store/modules/partition";
- const useStore = usepartitionStore();
- import { Search } from "@element-plus/icons-vue";
- import bus from "@/bus";
- const props = defineProps({
- //污水/雨水
- TypeID: {
- type: [String],
- default: "sewage",
- },
- //当前父页面选择的层级数据
- FenQuData: {
- type: Array,
- },
- //点击echarts图形对应的数据名称
- lastFQName: {
- type: String,
- },
- });
- const Search_form = reactive({
- oneID: "",
- twoID: "",
- threeID: "",
- fourID: "",
- FKID: "",
- JBH: "",
- GJZ: "",
- query: {
- current: 1,
- size: 10,
- total: 0,
- },
- });
- const AllData = reactive({
- oneOptions: [{ name: "全部", shortName: "全部", id: "" }],
- twoOptions: [{ name: "全部", shortName: "全部", id: "" }],
- threeOptions: [{ name: "全部", shortName: "全部", id: "" }],
- fourOptions: [{ name: "全部", shortName: "全部", id: "" }],
- FKOptions: [
- { name: "全部", id: "" },
- { name: "已复勘", id: "true" },
- { name: "未复勘", id: "false" },
- ],
- tableData: [],
- TBloading: false,
- });
- const handleSizeChange = (val) => {
- Search_form.query.size = val;
- console.log(Search_form.query);
- getTableData();
- };
- const handleCurrentChange = (val) => {
- Search_form.query.current = val;
- console.log(Search_form.query);
- getTableData();
- };
- // 一级下拉框选择
- const OneChange = () => {
- console.log(Search_form.oneID);
- // 通过id获取到下一级数据
- AllData.twoOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.twoID = "";
- AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.threeID = "";
- AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.fourID = "";
- AllData.oneOptions.forEach((element) => {
- if (element.id == Search_form.oneID) {
- AllData.twoOptions = AllData.twoOptions.concat(element.childList);
- }
- });
- };
- // 二级下拉框选择
- const TwoChange = () => {
- console.log(Search_form.twoID);
- //通过id获取到下一级数据
- AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.threeID = "";
- AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.fourID = "";
- AllData.twoOptions.forEach((element) => {
- if (element.id == Search_form.twoID) {
- AllData.threeOptions = AllData.threeOptions.concat(element.childList);
- }
- });
- };
- // 三级下拉框选择
- const ThreeChange = () => {
- console.log(Search_form.threeID);
- //通过id获取到下一级数据
- AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
- Search_form.fourID = "";
- AllData.threeOptions.forEach((element) => {
- if (element.id == Search_form.threeID) {
- AllData.fourOptions = AllData.fourOptions.concat(element.childList);
- }
- });
- };
- // 获取数据
- const getTableData = () => {
- AllData.TBloading = true;
- AllData.tableData = [];
- listPipelineDefectRisk({
- regionType: props.TypeID, //分区类型(sewage:污水 || rain:雨水)
- analysisType: "defect", //分析类型:(defect:本地缺陷 || risk:风险分析)
- queryType: "big_cover_small", //查询类型:(slope:坡度 || big_cover_small:大管套小管 || mix:混接 || sewageQualityAbnormal:水质异常 || outerWaterInject:外水注入 || siltRisk:淤堵风险 || fullPipe:满管 || overFlow:溢流风险 || groundwaterInflow:地下水渗入 || sewageInject:污水注入)
- startTime: "",
- endTime: "",
- oneGradeId: Search_form.oneID, //一级分区id
- twoGradeId: Search_form.twoID, //二级分区id
- threeGradeId: Search_form.threeID, //三级分区id
- fourGradeId: Search_form.fourID, //四级分区id
- pageNum: Search_form.query.current,
- pageSize: Search_form.query.size,
- pointNumber: Search_form.JBH, //井编号
- resurveyFlag: Search_form.FKID, //复勘状态
- location: Search_form.GJZ, //位置关键字
- }).then((res) => {
- AllData.TBloading = false;
- if (res && res.code == 200) {
- AllData.tableData = res.data.problemInfoVoList;
- Search_form.query.total = res.total;
- }
- });
- };
- // 打开周边全景
- const ClickZBQJ = (item) => {
- item.RefName = "zhoubianjiejing";
- item.NoPromise = true;
- item.Getmenuarr = [
- {
- menuName: "周边全景",
- moduleName: "zhoubianjiejing",
- pointName: "",
- pointType: "",
- show: true,
- },
- {
- menuName: "管网档案",
- moduleName: "guanwangpoumian",
- pointName: "",
- pointType: "",
- show: true,
- },
- ];
- item.comIDs = ["zhoubianjiejing", "guanwangpoumian"];
- item.GWDADataNow = true; //管网风险
- bus.emit("DynamicBus", item);
- };
- onMounted(() => {
- // 下拉框赋值
- nextTick(() => {
- // 一级菜单选项赋值
- let Data = props.TypeID == "sewage" ? useStore.sewageData : useStore.rainData;
- AllData.oneOptions = AllData.oneOptions.concat(Data);
- // 根据外层点击的层级赋值
- console.log(props.FenQuData);
- console.log(props.lastFQName);
- // 通过判断父级FenQuData选择了几层数据,确定lastFQName对应的层级,FenQuData有一条非空数据:lastFQName对应一级...
- let CengJi = 0;
- props.FenQuData.forEach((element) => {
- if (element.abbreviation != "") CengJi++;
- });
- // 根据层级的数量来动态判断默认选中下拉框
- if (CengJi == 2) {
- // 赋值一级
- Search_form.oneID = Number(props.FenQuData[1].id);
- // 二级下拉框数据赋值
- AllData.oneOptions.forEach((element) => {
- if (element.id == Search_form.oneID) {
- AllData.twoOptions = AllData.twoOptions.concat(element.childList);
- }
- });
- // 二级下拉框选中以及给三级下拉框赋值
- AllData.twoOptions.forEach((element) => {
- if (element.shortName == props.lastFQName) {
- Search_form.twoID = element.id;
- //给三级下拉框赋值
- AllData.threeOptions = AllData.threeOptions.concat(element.childList);
- }
- });
- } else if (CengJi == 3) {
- // 赋值一级
- Search_form.oneID = Number(props.FenQuData[1].id);
- // 赋值二级
- Search_form.twoID = Number(props.FenQuData[2].id);
- // 二级下拉框数据赋值
- AllData.oneOptions.forEach((element) => {
- if (element.id == Search_form.oneID) {
- AllData.twoOptions = AllData.twoOptions.concat(element.childList);
- }
- });
- // 二级下拉框选中以及给三级下拉框赋值
- AllData.twoOptions.forEach((element) => {
- if (element.id == Search_form.twoID) {
- Search_form.twoID = element.id;
- //给三级下拉框赋值
- AllData.threeOptions = AllData.threeOptions.concat(element.childList);
- }
- });
- //三级下拉框选中以及给四级下拉框赋值
- AllData.threeOptions.forEach((element) => {
- if (element.shortName == props.lastFQName) {
- Search_form.threeID = element.id;
- //给三级下拉框赋值
- AllData.fourOptions = AllData.fourOptions.concat(element.childList);
- }
- });
- } else if (CengJi == 4) {
- // 赋值一级
- Search_form.oneID = Number(props.FenQuData[1].id);
- // 赋值二级
- Search_form.twoID = Number(props.FenQuData[2].id);
- // 赋值三级
- Search_form.threeID = Number(props.FenQuData[3].id);
- // 二级下拉框数据赋值
- AllData.oneOptions.forEach((element) => {
- if (element.id == Search_form.oneID) {
- AllData.twoOptions = AllData.twoOptions.concat(element.childList);
- }
- });
- // 二级下拉框选中以及给三级下拉框赋值
- AllData.twoOptions.forEach((element) => {
- if (element.id == Search_form.twoID) {
- Search_form.twoID = element.id;
- //给三级下拉框赋值
- AllData.threeOptions = AllData.threeOptions.concat(element.childList);
- }
- });
- //三级下拉框选中以及给四级下拉框赋值
- AllData.threeOptions.forEach((element) => {
- if (element.id == Search_form.threeID) {
- Search_form.threeID = element.id;
- //给三级下拉框赋值
- AllData.fourOptions = AllData.fourOptions.concat(element.childList);
- }
- });
- //四级下拉框选中
- AllData.fourOptions.forEach((element) => {
- if (element.shortName == props.lastFQName) {
- Search_form.fourID = element.id;
- }
- });
- } else {
- // CengJi =1
- AllData.oneOptions.forEach((element) => {
- if (element.shortName == props.lastFQName) {
- Search_form.oneID = element.id;
- //给二级下拉框赋值
- AllData.twoOptions = AllData.twoOptions.concat(element.childList);
- }
- });
- }
- getTableData();
- });
- });
- </script>
-
- <style lang="scss" scoped>
- #dgtxg {
- width: 100%;
- height: 100%;
-
- :deep(.JCFX_Com_SearchBox) {
- height: 110px;
- width: 100%;
- .el-form-item__label {
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ccdfff;
- }
- .el-input__wrapper {
- background: #0d2359;
- border-radius: 6px;
- border: 1px solid #0b9bff;
- box-shadow: none;
-
- .el-input__inner {
- color: #8fbffe;
- }
- }
- .el-select {
- background: #0d2359;
- }
- }
- .JCFX_Com_Body {
- width: 100%;
- height: calc(100% - 165px);
-
- :deep(.JCFX_Com_Table) {
- &.el-table {
- font-family: Source Han Sans CN;
- background: none;
- width: 100%;
- height: calc(100% - 50px);
- }
- .el-table__inner-wrapper::before {
- height: 0;
- }
- tr {
- background: #ffffff00;
- }
- td.el-table__cell,
- th.el-table__cell.is-leaf {
- border-color: #ffffff00;
- color: #ccdfff;
- font-weight: lighter !important;
- }
- &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
- background: #0d2359;
- }
- .el-table__header-wrapper th {
- background: #153990 !important;
- }
-
- th {
- color: #ffffff !important;
- font-size: 14px;
- }
-
- &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
- background: rgba(13, 57, 139, 0.7);
- }
-
- .color_aqua {
- color: #00fcff;
- }
-
- .color_blue {
- color: #2cb7ff;
- font-size: 14px;
- font-weight: 100 !important;
- cursor: pointer;
- }
- }
- }
- // 分页样式
- .paginationBox {
- padding-top: 15px;
- text-align: right;
- display: flex;
- justify-content: flex-end;
- flex-direction: row;
- flex-wrap: nowrap;
- font-family: Source Han Sans CN;
- }
- }
- </style>