zdsz_vue/src/views/zdsz/engineeringCivil/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="行政区" prop="district">
        <el-select v-model="queryParams1.district" placeholder="请选择行政区" clearable
                   @change="queryParams1.areaId = undefined;getAreaList(queryParams1.district)"
                   @clear="queryParams1.areaId = undefined;areaList=[];
                   queryParams1.buildingId = undefined;buildingList=[];
                   queryParams1.unitId = undefined;unitList=[]">
          <el-option
            v-for="dict in dict.type.district"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="小区名称" prop="areaId">
        <el-select v-model="queryParams1.areaId" filterable clearable placeholder="请选择小区"
                   @change="queryParams1.buildingId = undefined;getBuildingList1(queryParams1.areaId)"
                   @clear="queryParams1.buildingId = undefined;buildingList=[];
                   queryParams1.unitId = undefined;unitList=[]">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼宇名称" prop="buildingId">
        <el-select v-model="queryParams1.buildingId" filterable clearable placeholder="请选择楼宇"
                   @change="queryParams1.unitId = undefined;getUnitList1(queryParams1.buildingId)"
                   @clear="queryParams1.unitId = undefined;unitList=[]"
        >
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单元" prop="unitId">
        <el-select v-model="queryParams1.unitId" placeholder="请选择单元" filterable clearable>
          <el-option
            v-for="obj in unitList"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工程类型" prop="enginType">
        <el-select v-model="queryParams1.enginType" placeholder="请选择工程类型" clearable
                   @change="enginTypeHasChangeds"
                   @clear="currentEnginTypeChangeOptions1=[];queryParams1.enginClassification=undefined;queryParams1.enginType=undefined">
          <el-option
            v-for="dict in enginTypeOption"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工程分类" prop="enginClassification">
        <el-select v-model="queryParams1.enginClassification" placeholder="请选择工程分类" clearable
                   @clear="">
          <el-option
            v-for="dict in currentEnginTypeChangeOptions1"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="工程周期" prop="enginCycle">-->
<!--        <el-select v-model="queryParams1.enginCycle" placeholder="请选择工程周期" clearable-->
<!--                   @clear="">-->
<!--          <el-option-->
<!--            v-for="dict in dict.type.engin_cycle"-->
<!--            :key="dict.value"-->
<!--            :label="dict.label"-->
<!--            :value="dict.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['zdsz:engineeringCivil:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['zdsz:engineeringCivil:edit']"
        >修改工程信息
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['zdsz:engineeringCivil:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['zdsz:engineeringCivil:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-circle-check"
          size="mini"
          @click="handleCheckings"
          v-hasPermi="['zdsz:engineeringCivil:review']"
        >批量审核
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="engineeringCivilList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <el-table-column label="行政区" align="center" prop="district">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.district" :value="scope.row.district"/>
        </template>
      </el-table-column>
      <el-table-column label="小区名称" align="center" prop="areaName"/>
      <el-table-column label="楼宇名称" align="center" prop="buildingName"/>
      <el-table-column label="单元名称" align="center" prop="unitName"/>
      <el-table-column label="房间名称" align="center" prop="houseName"/>
      <el-table-column label="工程类型" align="center" prop="enginType">
        <template slot-scope="scope">
          {{ scope.row.enginType === 'old_renovation' ? "旧改工程" : "新建" }}
        </template>
      </el-table-column>
      <el-table-column label="工程分类" align="center" prop="enginClassificationName"/>
<!--      <el-table-column label="工程周期" align="center" prop="enginCycle">-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.engin_cycle" :value="scope.row.enginCycle"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!--      <el-table-column label="完工状态" align="center" prop="completionStatus"/>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:edit']"
          >修改工程信息
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="addNodeInfo(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:add']"
          >修改施工信息
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="viewSource(scope.row,'check')"
            v-hasPermi="['zdsz:engineeringCivil:review']"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="viewSource(scope.row)"
            v-hasPermi="['zdsz:engineeringCivil:query']"
          >历史施工
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['zdsz:engineeringPipeJacking:add']"
            @click="addNewPipe(scope.row)"
          >新增顶管工程
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['zdsz:engineeringCivil:add']"
            @click="addMaterial(scope.row)"
          >添加用料
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改民用工程对话框 -->
    <el-dialog :title="title" ref="nodeForm" :visible.sync="open" width="500" append-to-body custom-class="addDialog"
               @close="onClose">
      <el-form ref="form" :model="queryParams" :rules="rules" label-width="110px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="行政区" prop="district">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.district"
                placeholder="请选择行政区"
                filterable
                @change="districtHasChanged"
              >
                <el-option
                  v-for="e in dict.type.district"
                  :key="e.value"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区" prop="areaId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.areaId"
                filterable
                placeholder="请选择小区"
                @change="communityHasChanged"
              >
                <el-option
                  v-for="e in communityOptions"
                  :key="e.id"
                  :label="e.name"
                  :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼栋" prop="buildingId">
              <el-select
                :disabled="title == '添加用料' "
                filterable
                v-model="queryParams.buildingId"
                placeholder="请选择楼栋"
                @change="buildingHasChanged"
              >
                <el-option
                  v-for="e in buildingOptions"
                  :key="e.id"
                  :label="e.name"
                  :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单元" prop="unitId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.unitId"
                filterable
                placeholder="请选择单元"
                @change="unitHasChanged"
              >
                <el-option
                  v-for="e in unitOptions"
                  :key="e.id"
                  :label="e.name"
                  :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间" prop="houseId">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.houseId"
                filterable
                placeholder="请选择房间"
              >
                <el-option
                  v-for="e in houseOptions"
                  :key="e.id"
                  :label="e.name"
                  :value="e.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程类型" prop="enginType">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.enginType"
                placeholder="请选择工程类型"
                @change="enginTypeHasChanged"
              >
                <el-option
                  v-for="e in enginTypeOption"
                  :key="e.value"
                  :label="e.label"
                  :value="e.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程分类" prop="enginClassification">
              <el-select
                :disabled="title == '添加用料' "
                v-model="queryParams.enginClassification"
                placeholder="请选择工程分类"
                @change="currentEnginTypeChanged"
              >
                <el-option
                  v-for="e in currentEnginTypeChangeOptions"
                  :key="e.dictValue"
                  :label="e.dictLabel"
                  :value="e.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="工程周期" prop="enginCycle">-->
<!--              <el-select-->
<!--                :disabled="title == '添加用料' "-->
<!--                v-model="queryParams.enginCycle"-->
<!--                placeholder="请填写工程周期"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="e in dict.type.engin_cycle"-->
<!--                  :key="e.value"-->
<!--                  :label="e.label"-->
<!--                  :value="e.value"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="24" v-if="title!=='修改民用工程'">
            <el-form-item label="环节">
              <el-checkbox-group v-model="currentCheckList">
                <el-checkbox
                  :disabled=enginNodeStatusExecuted(item)
                  :label="item.dictValue"
                  v-for="item in checkList"
                  :key="item"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <EnginNodeInfo
          v-for="(e,idx) in currentCheckList"
          :key="idx"
          :name="e"
          :ref="'EnginNodeInfo'+idx"
          :currentContain="(listContain.find(i => i.name == e)).components"
          :updateOption='(updateOption.find(i => i.type == e)) || {}'
          :types="currentCheckList"
          :status="enginNodeStatus"
          enginType="民用工程"
        />
        <!-- <el-tabs type="border-card" >
          <el-tab-pane label="用户管理">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="toNodeDetail">{{ enginNodeStatus }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看历史 -->
    <ConstructionDetails
      ref="ConstructionDetails"
      :currentCollapses="currentCollapses"
      :type="nodeDetailType"
      @updateNodeOption="updateNodeOption"
      @checkWorking="checkWorking"
      :status="status"
      :zEngineeringNodeBo="zEngineeringNodeBo"
      enginType="民用工程"
    />

    <!-- 批量审核 -->
    <el-dialog
      ref="checkingAllForm"
      title="批量审核"
      :visible.sync="checkingsVisible"
      class="checkingAll"
      @close="checkingAllFormClosed"
    >
      <el-form :model="checkingForm" :rules="checkingFormRules" ref="checkingFormAll">
        <el-form-item label="工程类型" prop="enginType">
          <el-select
            v-model="checkingForm.enginType"
            placeholder="请选择工程类型"
            @change="enginTypeHasChanged"
          >
            <el-option
              v-for="e in enginTypeOption"
              :key="e.value"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程分类" prop="enginClassification">
          <el-select
            v-model="checkingForm.enginClassification"
            placeholder="请选择工程分类"
            @change="currentCheckingAllEnginTypeChanged"
          >
            <el-option
              v-for="e in currentEnginTypeChangeOptions"
              :key="e.dictValue"
              :label="e.dictLabel"
              :value="e.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环节" label-width="78px" prop="type">
          <el-select
            v-model="checkingForm.type"
            placeholder="请选择工程分类"
          >
            <el-option
              v-for="e in checkingAllList"
              :key="e.dictValue"
              :label="e.dictLabel"
              :value="e.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="reviewTime" label="工程创建时间" style="margin-left: -5%;">
          <el-date-picker
            v-model="checkingForm.reviewTime"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label-width="78px"
          label="审核状态"
          prop="reviewStatus"
        >
          <el-select v-model="checkingForm.reviewStatus" placeholder="请选择审核状态" label="审核状态" @change="validateCHanged">
            <el-option
              v-for="e in reviewStatusList"
              :key="e.label"
              :label="e.label"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label-width="78px"
          label="审核内容"
          prop="reviewContent"
        >
          <div class="block" style="display: inline-block; margin-right: 20px;">
            <el-input
              v-model="checkingForm.reviewContent"
              placeholder="请输入审核内容"
              type="textarea"
              style="width: 100%"/>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkingsVisible = false">取 消</el-button>
        <el-button type="primary" @click=checkingAllSubmit>提 交</el-button>
      </span>
    </el-dialog>
    <!-- 顶管工程新增 -->
    <EngineePipe ref="enginPipe"/>

  </div>
</template>
<!--engineeringPipeJacking-->
<script>
import {
  listEngineeringCivil,
  getEngineeringCivil,
  delEngineeringCivil,
  addEngineeringCivil,
  updateEngineeringCivil
} from "@/api/zdsz/engineeringCivil";
import {
  addEnginee,                                // 新增工程
  getHousesList,                             // 获取当前房间集合
  putEngineeringCivil,                       // 民用工程修改
  viewEngineeringCivil,                      // 民用工程查看详情
  deleteEngineeringCivil,                    // 删除民用工程
  getDictList,
  viewEngineeringInfrastructureSource,
  viewEngineeringCivilSource,

  engineeringCivilAllReview,
  CivilReview
} from "@/api/zdsz/enginee"
import {getAreaList} from "@/api/zdsz/area";
import {getBuildingList} from "@/api/zdsz/building";
import {getUnits} from "@/api/zdsz/unit";
import {getDicts} from "@/api/system/dict/data";
import EnginNodeInfo from "@/components/EnginNodeInfo/index";
import EngineePipe from '@/components/EngineePipe'
import ConstructionDetails from "@/components/ConstructionDetails/index.vue";

function formatDate(date) {
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  const day = days[date.getUTCDay()];
  const month = months[date.getUTCMonth()];
  const dateNum = String(date.getUTCDate()).padStart(2, '0');
  const hours = String(date.getUTCHours()).padStart(2, '0');
  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
  const year = date.getUTCFullYear();

  return `${day} ${month} ${dateNum} ${hours}:${minutes}:${seconds} CST ${year}`;
}

export default {
  components: {
    ConstructionDetails,
    EnginNodeInfo,
    EngineePipe
  },

  name: "EngineeringCivil",
  dicts: ['pass_check',
    'is_repair',
    'engin_type',
    'self_closing_valve_type',
    'visit_type', 'district',
    'new_built_indoor_engin',
    "old_renovation_indoor_engin",
    "old_renovation_courtyard",
    "old_renovation_overhead",
    "new_built_indoor_engin",
    "new_built_courtyard",
    "new_built_overhead",
    "engin_cycle"],
  data() {
    return {
      nodeDetailType: null,
      currentCollapses: [],
      enginId: undefined,
      checkingsVisible: false,
      updateOption: [],
      checkingFormRules:{
        enginType: [
            {required: true, message: "工程类型不能为空", trigger: ['change']}
        ],
        enginClassification: [
            {required: true, message: "工程分类不能为空", trigger: ['change']}
        ],
        type: [
            {required: true, message: "环节不能为空", trigger: ['change']}
        ],
        reviewTime: [
            {required: true, message: "工程创建时间不能为空", trigger: ['change']}
        ],
        reviewStatus: [
            {required: true, message: "审核状态不能为空", trigger: ['change']}
        ],
        reviewContent: [
            {required: true, message: "审核内容不能为空", trigger: ['change']}
        ],
      },
      listContain: [
        {
          name: '拆旧管',
          components: [
            [
              'corrosionLevel',                        // 腐蚀等级
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '报警器切断阀',
          components: [
            [
              'brand',                                 // 品牌
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '放线',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '挖沟',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '焊接',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '下沟',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '回田',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'backfillTime',                            // 回填时间
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '打压',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'segmentedCompressionQualified',           // 分段打压
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '除锈',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '刷油',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '打磨',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '打孔',
          components: [
            [
              'corrosionLevel',                        // 孔径/腐蚀等级
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '立杠',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '挂表',
          components: [
            [
              'brand',                                 // 品牌
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
            // 'remark',                                  // 施工内容
          ]
        },
        {
          name: '表后管',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
            ],
            'constructAccordingDrawings',              // 是否按图纸施工
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
        {
          name: '阀管',
          components: [
            [
              'materialQuality',                       // 材质
              'specifications',                        // 规格
              'number',                                // 数量
              'visitType',                             // 上门类型
              'selfClosingValveType',                  // 自闭阀类型
            ],
            'constructTime',                           // 施工时间
            'zEngiineeringPhotoBoList',                // 照片
          ]
        },
      ],
      currentCheckList: [],
      enginClassificationinfo: '',
      enginClassification: '',
      enginClassificationOption: [],
      enginTypeOption: [
        {
          value: 'old_renovation',
          label: '旧改'
        }, {
          value: 'new_built',
          label: '新建'
        },
      ],
      currentEnginTypeChangeOptions: [],
      currentEnginTypeChangeOptions1: [],

      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 民用工程表格数据
      engineeringCivilList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        enginClassification: undefined,
        imgUrl: undefined,
        zEngineeringNodeBoList: {
          type: undefined,
          zEngineeringInfoBo: {
            constructAddre: undefined,        // 施工地址
            constructPhone: undefined,        // 施工人电话
            constructUser: undefined,         // 施工人
            headName: undefined,              // 负责人
            headPhone: undefined,             // 负责人电话
            constructAccordingDrawings: undefined, // 是否按图纸施工
            segmentedCompressionQualified: undefined, // 分段打压是否合格
            selfClosingValveType: undefined,          // 自闭阀类型
            visitType: undefined,                     // 上门类型
            backfillTime: undefined,                  // 回填时间
            constructTime: undefined,                  // 施工时间
            zEngiineeringPhotoBoList: undefined,              // 图片列表
            zEngineeringMaterialBo: undefined,// 用料对象,    //节点信息
          }
        }
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        imgUrl: undefined,
      },
      zEngineeringInfoBo: {
        constructAddre: '',        // 施工地址
        constructPhone: '',        // 施工人电话
        constructUser: '',         // 施工人
        headName: '',              // 负责人
        headPhone: '',             // 负责人电话
        constructAccordingDrawings: '', // 是否按图纸施工
        segmentedCompressionQualified: '', // 分段打压是否合格
        selfClosingValveType: '',          // 自闭阀类型
        visitType: '',                     // 上门类型
        backfillTime: '',                  // 回填时间
        constructTime: '',                  // 施工时间
        zEngiineeringPhotoBoList: [],              // 图片列表
        zEngineeringMaterialBo: [],// 用料对象
      },
      nodeList: [],
      // 表单参数
      form: {},
      value: [],
      // 表单校验
      rules: {
        id: [
          {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        district: [
          {required: true, message: "行政区不能为空", trigger: "change"}
        ],
        areaId: [
          {required: true, message: "小区不能为空", trigger: "change"}
        ],
        buildingId: [
          {required: true, message: "楼宇不能为空", trigger: "change"}
        ],
        unitId: [
          {required: true, message: "单元不能为空", trigger: "change"}
        ],
        houseId: [
          {required: true, message: "房间不能为空", trigger: "change"}
        ],
        enginType: [
          {required: true, message: "工程类型不能为空", trigger: "change"}
        ],
        enginClassification: [
          {required: true, message: "工程分类不能为空", trigger: "change"}
        ],
        // enginCycle: [
        //   {required: true, message: "工程周期不能为空", trigger: "change"}
        // ],
        completionStatus: [
          {required: true, message: "完工状态不能为空", trigger: "change"}
        ],
        imgUrl: [
          {required: true, message: "默认图片地址不能为空", trigger: "blur"}
        ],
        remark: [
          {required: true, message: "备注不能为空", trigger: "blur"}
        ],
      },
      areaList: [],
      buildingList: [],
      unitList: [],
      currentDistrict: null,       // 当前行政区
      currentCommunity: null,      // 当前小区
      currentBuilding: null,       // 当前楼宇
      currentUnit: null,           // 当前单元
      communityOptions: [],
      buildingOptions: [],         // 楼栋集合
      unitOptions: [],             // 单元集合
      houseOptions: [],            // 房间集合
      enginClassification_list: [], // 室内节点,
      checkList: [],// 节点集合
      enginNodeStatus: null,
      updateParams: {},
      status: null,
      createTime: '',               // 工程创建时间
      checkingForm: {
        reviewStatus: '',               // 审核状态
        reviewContent: '',              // 审核内容
        enginType: null,
        enginClassification: null,
        reviewTime: '',
        type: '',
      },
      checkingAllList: [],
      reviewStatusList: [
        {
          value: '1',
          label: '通过'
        },
        {
          value: '0',
          label: '不通过'
        }
      ],
      zEngineeringNodeBo:{

      },
      currentEnginName: null,
      currentCheckingEnginList:[]
    };
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  computed: {
    currentContain(e) {
      console.log('当前contain', e)
    }
  },
  methods: {
    enginNodeStatusExecuted(item){
      try {
        let flag
        if(this.currentCheckingEnginList.filter(e => e.label == item.dictValue)[0].status == '1') return true
      } catch (error) {
        return false
      }
    },
    checkingAllFormClosed(){
      this.$refs.checkingFormAll.resetFields()
    },
    validateCHanged(e){
      this.reviewStatusList[e].label == '通过' ? this.checkingFormRules.reviewContent[0].required = true : this.checkingFormRules.reviewContent[0].required = false
    },
    checkingAllSubmit() {
      this.$refs.checkingFormAll.validate(valid => {
        if(valid){
          // this.checkingForm.createTime = formatDate(this.checkingForm.createTime)
          engineeringCivilAllReview(this.checkingForm).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '批量审核请求以提交后台，5-10分钟后均可成功。',
                type: 'success'
              });
              this.checkingsVisible = false
              this.checkingForm = {
                reviewStatus: '',               // 审核状态
                reviewContent: '',              // 审核内容
                enginType: null,
                enginClassification: null,
                reviewTime: '',
                type: '',
              }
              this.$refs.checkingFormAll.resetFields()
            }
          })
        } else {
          this.$message.error('请填写必填项!')
        }
      })
    },
    // 批量审核
    handleCheckings() {
      this.checkingsVisible = true
    },
    // 节点单项审核
    checkWorking(checkingInfo) {
      let params = checkingInfo
      params.createTime = this.createTime
      CivilReview(params).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '审核成功',
            type: 'success'
          });
          setTimeout(() => {
            this.viewNodeSource()
          },1000)
        }
      })
    },
    // 修改施工信息
    updateNodeOption(zEngineeringInfoBoList) {
      delete this.updateParams.zEngineeringNodeBoList
      this.updateParams.zEngineeringNodeBo.zEngineeringInfoBoList = zEngineeringInfoBoList
      putEngineeringCivil(this.updateParams).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$refs.ConstructionDetails.dialogVisible = false
          this.updateParams = {}

        }
      })
    },
    addNodeInfo(e) {
      this.nodeDetailType = '修改'
      this.enginId = e.id
      this.status = 'put'
      let val = e.enginType + "_" + e.enginClassification
      getDicts(val).then(res => {
        let dict = []
        for (let i = 0; i < res.data.length; i++) {
          dict.push({
            "label": res.data[i].dictLabel,
            "value": res.data[i].dictValue,
          })
        }
        this.$refs.ConstructionDetails.open(dict)
      })
    },
    viewNodeSource(e = null) {
      if(e){
        this.currentEnginName = e
      }
      console.log(this.currentEnginName )
      viewEngineeringCivilSource({
        id: this.enginId,
        type: e || this.currentEnginName
      }).then(res => {
        console.log('______', res)
        this.createTime = res.data.createTime
        try {
          this.updateParams = res.data
          this.currentCollapses = res.data.zEngineeringNodeBo.zEngineeringInfoBoList
          this.$refs.ConstructionDetails.setEngineId(res.data.zEngineeringNodeBo.id || null)
        } catch (error) {
          this.currentCollapses = [];
        }
        console.log('折叠面板info', this.currentCollapses)
      })
      this.$forceUpdate()
    },
    // 查看历史
    viewSource(e, type = null) {
      this.enginId = e.id
      let val = e.enginType + "_" + e.enginClassification
      getDicts(val).then(res => {
        let dict = []
        for (let i = 0; i < res.data.length; i++) {
          dict.push({
            "label": res.data[i].dictLabel,
            "value": res.data[i].dictValue,
          })
        }
        this.zEngineeringNodeBo = e
        this.$refs.ConstructionDetails.open(dict, _, type)
        this.status = 'read-only'
      })
    },
    // 新增顶管工程
    addNewPipe(data) {
      this.$refs.enginPipe.openDialog({
        id: data.id,
        type: '民用工程'
      }, 'add', data)
    },
    // 新增物料
    addMaterial(data) {
      this.title = "添加用料";
      this.enginNodeStatus = '添加用料'
      this.loading = true;
      this.reset();
      const id = data.id || this.ids
      getEngineeringCivil(id).then(res => {
        this.loading = false;
        this.currentCheckingEnginList = []
        // 处理当前已审核通过的节点
        try {
          res.data.zEngineeringNodeBoList.forEach(e => {
            let status
            try {
              status = e.zEngineeringInfoBoList[0].zEngineeringReviewBo.reviewStatus
            } catch (error) {
              status = '0'
            }
            this.currentCheckingEnginList.push({
              label:e.type,
              status
            })
          })
        } catch (error) {
          this.currentCheckingEnginList = []
        }
        console.log('as',this.currentCheckingEnginList)
        let newData = res.data
        // 手动调用行政区发生改变
        this.districtHasChanged(newData.district)
        this.communityHasChanged(newData.areaId)
        this.buildingHasChanged(newData.buildingId, newData.areaId)
        this.unitHasChanged(newData.unitId)
        // 获取工程分类
        this.enginTypeHasChanged(newData.enginType)
        let val = newData.enginType + "_" + newData.enginClassification
        this.currentCheckList = []
        getDicts(val).then(res => {
          this.checkList = res.data
          console.log(this.checkList)
        })

        this.queryParams = newData
        console.log(this.queryParams.areaId)

        // console.log('选中节点集合',this.currentCheckList)
        // this.enginClassification = zEngineeringNodeBo.type
        // newData.zEngineeringNodeBo = zEngineeringNodeBo
        this.currentType = 'addMaterial'
        this.open = true

      })
    },
    currentEnginTypeChanged() {
      this.currentCheckList = []
      if (this.queryParams.enginType == undefined || this.queryParams.enginType == ''
        || this.queryParams.enginClassification == undefined || this.queryParams.enginClassification == ''
      )
        return
      let val = this.queryParams.enginType + "_" + this.queryParams.enginClassification
      getDicts(val).then(res => {
        this.checkList = res.data
      })
    },
    currentCheckingAllEnginTypeChanged() {
      this.checkingAllList = []
      if (this.checkingForm.enginType == undefined || this.checkingForm.enginType == ''
        || this.checkingForm.enginClassification == undefined || this.checkingForm.enginClassification == ''
      )
        return
      let val = this.checkingForm.enginType + "_" + this.checkingForm.enginClassification
      getDicts(val).then(res => {
        this.checkingAllList = res.data
      })
    },
    // 当前所选行政区发生改变 查询当前小区集合
    districtHasChanged(district) {
      this.queryParams.areaId = null
      this.queryParams.buildingId = null
      this.queryParams.unitId = null
      this.communityOptions = [];
      this.buildingOptions = [];
      this.unitOptions=[];
      this.houseOptions=[];
      getAreaList({district}).then(res => {
        this.communityOptions = res.data
      })
    },
    // 当前所选小区发生改变 查询当前楼栋集合
    communityHasChanged(areaId) {
      this.queryParams.buildingId = null
      this.queryParams.unitId = null
      this.buildingOptions = [];
      this.unitOptions=[];
      this.houseOptions=[];
      getBuildingList({areaId}).then(res => {
        this.buildingOptions = res.data
      })
    },
    buildingHasChanged(buildingId, areaId) {
      this.unitOptions=[];
      this.houseOptions=[];
      this.queryParams.unitId = null
      getUnits(buildingId).then(res => {
        this.unitOptions = res.data
      })
    },
    unitHasChanged(unitId) {
      this.houseOptions=[];
      getHousesList({unitId}).then(res => {
        console.log(res)
        this.houseOptions = res.data
      })
    },
    enginTypeHasChangeds(enginType = null) {
      if (this.queryParams1.enginType == undefined || this.queryParams1.enginType == null || this.queryParams1.enginType == '')
        return
      this.currentCheckList = []
      this.queryParams1.enginClassification = ''
      this.currentEnginTypeChangeOptions1 = []
      getDicts(enginType || this.queryParams1.enginType).then(res => {
        this.currentEnginTypeChangeOptions1 = res.data
      })
    },
    enginTypeHasChanged(enginType = null) {
      this.currentCheckList = []
      this.queryParams.enginClassification = ''
      this.currentEnginTypeChangeOptions = []
      getDicts(enginType || this.queryParams.enginType).then(res => {
        this.currentEnginTypeChangeOptions = res.data
      })
    },
    onClose() {
      console.log(this.currentCheckList)
      this.currentCheckList = []
      this.checkList = []
      this.reset()
    },
    closeToSucceed() {
      this.open = false;
    },
    getAreaList(district) {
      if (district === undefined || district == null || district === '')
        return
      getAreaList({district: district}).then(res => this.areaList = res.data)
    },
    getBuildingList1(areaId) {
      if (areaId === undefined || areaId == null || areaId === '')
        return
      getBuildingList({areaId: areaId}).then(res => this.buildingList = res.data)
    },
    getUnitList1(buildingId) {
      if (buildingId === undefined || buildingId == null || buildingId === '')
        return
      getUnits(buildingId).then(res => this.unitList = res.data)
    },
    /** 查询民用工程列表 */
    getList() {
      this.loading = true;
      listEngineeringCivil(this.queryParams1).then(response => {
        this.engineeringCivilList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        version: undefined,
        imgUrl: undefined,
        // remark: undefined,
        delFlag: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      };
      this.queryParams = {
        district: undefined,
        areaId: undefined,
        buildingId: undefined,
        unitId: undefined,
        houseId: undefined,
        enginType: undefined,
        enginClassification: undefined,
        enginCycle: 0,
        completionStatus: undefined,
        imgUrl: undefined,
        // zEngineeringNodeBo: {
        //   type: undefined,
        //   zEngineeringInfoBo: {
        //     constructAddre: undefined,        // 施工地址
        //     constructPhone: undefined,        // 施工人电话
        //     constructUser: undefined,         // 施工人
        //     headName: undefined,              // 负责人
        //     headPhone: undefined,             // 负责人电话
        //     constructAccordingDrawings: undefined, // 是否按图纸施工
        //     segmentedCompressionQualified: undefined, // 分段打压是否合格
        //     selfClosingValveType: undefined,          // 自闭阀类型
        //     visitType: undefined,                     // 上门类型
        //     backfillTime: undefined,                  // 回填时间
        //     constructTime: undefined,                  // 施工时间
        //     zEngiineeringPhotoBoList: undefined,              // 图片列表
        //     zEngineeringMaterialBo: undefined,// 用料对象,    //节点信息
        //   }
        // },
      }
      this.enginClassification = null
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams1.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.areaList = []
      this.buildingList = []
      this.unitList = []
      this.currentEnginTypeChangeOptions1 = []
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 新增顶管工程
    // addNewPipe(data){
    //   this.$refs.enginPipe.openDialog({
    //     id:data.id
    //   },'add')
    // },
    nodeCancel() {
      this.nodeDetailVisible = false
    },
    toNodeDetail() {
      this.$refs.form.validate(valid => {
        if(valid){
          let nodeCollection = []
          // 收集节点信息
          this.currentCheckList.forEach((e, idx) => {
            let nodeItem = this.$refs['EnginNodeInfo' + idx][0].infoCollection()
            nodeCollection.push(nodeItem)
            setTimeout(() =>{
              console.log('nodeCollection:', nodeItem)
            console.log('nodeCollection:', this.$refs['EnginNodeInfo' + idx][0])
            },2000)

          })
          this.queryParams.zEngineeringNodeBoList = nodeCollection
          if (this.enginNodeStatus == '修改') {
            putEngineeringCivil(this.queryParams).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.open = false
                console.log('选中节点集合', this.currentCheckList)
                this.currentCheckList = []
                this.getList()
                // this.$emit('closeToSucceed')
              }
            })
          } else if (this.enginNodeStatus == '添加用料') {
            addEngineeringCivil(this.queryParams).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.open = false
                console.log('选中节点集合', this.currentCheckList)
                this.currentCheckList = []
                this.getList()
                // this.$emit('closeToSucceed')
              }
            })
          } else if (this.enginNodeStatus == '添加用料') {
            addEngineeringCivil(this.queryParams).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.open = false
                console.log('选中节点集合', this.currentCheckList)
                this.currentCheckList = []
                this.getList();
                // this.$emit('closeToSucceed')
              }
            })
          } else {
            addEngineeringCivil(this.queryParams).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                this.open = false
                console.log('选中节点集合', this.currentCheckList)
                this.currentCheckList = []
                this.getList();
                // this.$emit('closeToSucceed')
              }
            })
          }
        } else {
          // this.$message.error(`请完善信息!`);
        }
      })


      return
      getDictList({enginType: ['new_built', 'old_renovation']}).then(res => {
        this.nodeList = res.data
        console.log('跳到详情前的queryParams', this.queryParams)
        console.log('跳到详情前的节点集合', this.nodeList)
        if (this.currentType == 'put') {
          this.$refs.childNode.open(this.queryParams, 16, this.nodeList)
          this.currentType = null
          return
        }
        // 加工 enginClassification 工程节点
        // const parts = this.value[1].split('_');
        // let result = parts.slice(2).join('_');
        // console.log(result)
        // this.queryParams.zEngineeringNodeBo.type = this.enginClassification
        // this.queryParams.enginClassification = result
        // console.log(this.queryParams)
        console.log('新增queryparams传值', this.queryParams)
        this.$refs.childNode.open(this.queryParams, 0, this.nodeList)
        return
        this.$refs['form'].validate(e => {
          if (e) {
            this.nodeDetailVisible = true
          }
        })
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.currentCheckingEnginList = []
      this.enginNodeStatus = '新增'
      this.reset();
      this.open = true;
      this.title = "添加民用工程";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let that = this
      this.enginNodeStatus = '修改'
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      getEngineeringCivil(id).then(res => {
        that.loading = false;
        // let newData = res.data
        // // 手动调用行政区发生改变
        let newData = res.data
        that.districtHasChanged(newData.district)
        that.communityHasChanged(newData.areaId)
        that.buildingHasChanged(newData.buildingId, newData.areaId)
        that.unitHasChanged(newData.unitId)
        that.queryParams = res.data
        let va = that.queryParams.enginClassification
        that.enginTypeHasChanged(that.queryParams.enginType)
        that.queryParams.enginClassification = va
        that.open = true
        that.title = "修改民用工程";
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateEngineeringCivil(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              debugger
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addEngineeringCivil(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      console.log(row)
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除所选数据项？').then(() => {
        this.loading = true;
        return delEngineeringCivil(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('zdsz/engineeringCivil/export', {
        ...this.queryParams1
      }, `engineeringCivil_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>

::v-deep .addDialog {
  width: 60%;
  // height: 85%;
  max-height: 85%;
  overflow: hidden;
  overflow-y: scroll;
}

::v-deep .appendElDialog {
  overflow: hidden;
  overflow-y: scroll;
  width: 70%;
  height: 80%;


  .el-dialog__body {
    height: 85%;
  }

  .el-form-item {
    margin-bottom: 22px;
    width: 44%;
    display: inline-block;
  }

  .el-form-item:nth-child(2n+2) {
    margin-left: 5%;
  }

  .el-form-item:not(:nth-child(1):nth-child(2)) {
    margin-top: 0.5%;
  }

  .remark_input {
    .el-textarea__inner {
      width: 238%;
      height: 190px;
    }
  }
}

::v-deep .appendElNodeDialog {
  // width: 70%;
  height: 80%;


  .el-dialog__body {
    height: 85%;
  }

  .el-form-item {
    margin-bottom: 22px;
    width: 44%;
    display: inline-block;
  }

  .el-form-item:nth-child(2n+2) {
    margin-left: 5%;
  }

  .el-form-item:not(:nth-child(1):nth-child(2)) {
    margin-top: 0.5%;
  }
}

::v-deep .checkingAll {
  .el-dialog {
    width: 40%;
    height: 70%;
  }

  .el-dialog__body {
    padding-left: 28%;
  }

  .el-form div:not(:nth-child(1)) {
    margin-top: 1%;
  }

  .el-textarea__inner {
    width: 360px;
    height: 115px;
  }
}
</style>