pms 日报 组织搜索树

src/views/pms/iotrhdailyreport/index.vue

@@ -1,185 +1,195 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="项目" prop="contractName">
-        <el-input
-          v-model="queryParams.contractName"
-          placeholder="请输入项目"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="任务" prop="taskName">
-        <el-input
-          v-model="queryParams.taskName"
-          placeholder="请输入任务"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['pms:iot-rh-daily-report:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['pms:iot-rh-daily-report:export']"
+  <el-row :gutter="20">
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <DeptTree @node-click="handleDeptNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <ContentWrap class="mb-15px">
-    <div class="color-legend">
-      <div class="legend-item">
-        <span class="color-indicator red"></span>
-        <span>运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警</span>
-      </div>
-      <div class="legend-item">
-        <span class="color-indicator orange"></span>
-        <span>当日注气时间+当日注水时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
-      </div>
-    </div>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap ref="tableContainerRef">
-    <div class="table-container">
-      <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
-                style="width: 100%" :cell-style="cellStyle">
-        <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
-          <template #default="scope">
-            {{ scope.$index + 1 }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="日期"
-          align="center"
-          prop="createTime"
-          :formatter="dateFormatter2"
-          :width="columnWidths.createTime"
-        />
-        <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
-        <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"/>
-        <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
-        <!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
-        <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
-          <template #default="scope">
-            <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
-          </template>
-        </el-table-column>
-        <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays"/>
-        <el-table-column label="设计注气量(万方)" align="center" prop="designInjection" :width="columnWidths.designInjection"/>
-        <el-table-column label="运行时效" align="center" prop="transitTime" :width="columnWidths.transitTime" :formatter="percentageFormatter"/>
-        <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection"
-                         :width="columnWidths.dailyGasInjection" :formatter="gasInjectionFormatter"/>
-        <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" :width="columnWidths.dailyWaterInjection"/>
-        <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" :width="columnWidths.dailyInjectGasTime"/>
-        <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" :width="columnWidths.dailyInjectWaterTime"/>
-        <el-table-column label="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.dailyPowerUsage"/>
-        <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" :width="columnWidths.nonProductionTime"/>
-        <el-table-column :label="t('project.nptReason')" align="center" prop="nptReason" :width="columnWidths.nptReason">
-          <template #default="scope">
-            <dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="施工开始日期"
-          align="center"
-          prop="constructionStartDate"
-          :formatter="dateFormatter"
-          :width="columnWidths.constructionStartDate"
-        />
-        <el-table-column
-          label="施工结束日期"
-          align="center"
-          prop="constructionEndDate"
-          :formatter="dateFormatter"
-          :width="columnWidths.constructionEndDate"
-        />
-        <el-table-column label="生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
-          <template #default="scope">
-            <el-tooltip
-              effect="light"
-              :content="scope.row.productionStatus"
-              placement="top"
-              popper-class="design-well-struct-tooltip"
-              :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
-            >
-              <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection"
-                         :width="columnWidths.totalGasInjection" :formatter="gasInjectionFormatter"/>
-        <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" :width="columnWidths.totalWaterInjection"/>
-        <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" :width="columnWidths.cumulativeCompletion"/>
-        <el-table-column label="产能(万方)" align="center" prop="capacity" :width="columnWidths.capacity" :formatter="gasInjectionFormatter"/>
-        <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
-          <template #default="scope">
+          <el-form-item label="项目" prop="contractName">
+            <el-input
+              v-model="queryParams.contractName"
+              placeholder="请输入项目"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="任务" prop="taskName">
+            <el-input
+              v-model="queryParams.taskName"
+              placeholder="请输入任务"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
             <el-button
-              link
               type="primary"
-              @click="openForm('update', scope.row.id, scope.row)"
-              v-hasPermi="['pms:iot-rh-daily-report:update']"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['pms:iot-rh-daily-report:create']"
             >
-              编辑
+              <Icon icon="ep:plus" class="mr-5px" /> 新增
             </el-button>
             <el-button
-              link
-              type="danger"
-              @click="handleDelete(scope.row.id)"
-              v-hasPermi="['pms:iot-rh-daily-report:delete']"
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['pms:iot-rh-daily-report:export']"
             >
-              删除
+              <Icon icon="ep:download" class="mr-5px" /> 导出
             </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <ContentWrap class="mb-15px">
+        <div class="color-legend">
+          <div class="legend-item">
+            <span class="color-indicator red"></span>
+            <span>运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警</span>
+          </div>
+          <div class="legend-item">
+            <span class="color-indicator orange"></span>
+            <span>当日注气时间+当日注水时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
+          </div>
+        </div>
+      </ContentWrap>
+
+      <!-- 列表 -->
+      <ContentWrap ref="tableContainerRef">
+        <div class="table-container">
+          <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
+                    style="width: 100%" :cell-style="cellStyle">
+            <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+              <template #default="scope">
+                {{ scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="日期"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter2"
+              :width="columnWidths.createTime"
+            />
+            <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
+            <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"/>
+            <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
+            <!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
+            <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
+              </template>
+            </el-table-column>
+            <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays"/>
+            <el-table-column label="设计注气量(万方)" align="center" prop="designInjection" :width="columnWidths.designInjection"/>
+            <el-table-column label="运行时效" align="center" prop="transitTime" :width="columnWidths.transitTime" :formatter="percentageFormatter"/>
+            <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection"
+                             :width="columnWidths.dailyGasInjection" :formatter="gasInjectionFormatter"/>
+            <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" :width="columnWidths.dailyWaterInjection"/>
+            <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" :width="columnWidths.dailyInjectGasTime"/>
+            <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" :width="columnWidths.dailyInjectWaterTime"/>
+            <el-table-column label="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.dailyPowerUsage"/>
+            <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" :width="columnWidths.nonProductionTime"/>
+            <el-table-column :label="t('project.nptReason')" align="center" prop="nptReason" :width="columnWidths.nptReason">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="施工开始日期"
+              align="center"
+              prop="constructionStartDate"
+              :formatter="dateFormatter"
+              :width="columnWidths.constructionStartDate"
+            />
+            <el-table-column
+              label="施工结束日期"
+              align="center"
+              prop="constructionEndDate"
+              :formatter="dateFormatter"
+              :width="columnWidths.constructionEndDate"
+            />
+            <el-table-column label="生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
+              <template #default="scope">
+                <el-tooltip
+                  effect="light"
+                  :content="scope.row.productionStatus"
+                  placement="top"
+                  popper-class="design-well-struct-tooltip"
+                  :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
+                >
+                  <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection"
+                             :width="columnWidths.totalGasInjection" :formatter="gasInjectionFormatter"/>
+            <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" :width="columnWidths.totalWaterInjection"/>
+            <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" :width="columnWidths.cumulativeCompletion"/>
+            <el-table-column label="产能(万方)" align="center" prop="capacity" :width="columnWidths.capacity" :formatter="gasInjectionFormatter"/>
+            <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
+              <template #default="scope">
+                <el-button
+                  link
+                  type="primary"
+                  @click="openForm('update', scope.row.id, scope.row)"
+                  v-hasPermi="['pms:iot-rh-daily-report:update']"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  link
+                  type="danger"
+                  @click="handleDelete(scope.row.id)"
+                  v-hasPermi="['pms:iot-rh-daily-report:delete']"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+
+      <!-- 表单弹窗：添加/修改 -->
+      <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
+    </el-col>
+  </el-row>
+
 </template>
 
 <script setup lang="ts">
@@ -189,6 +199,7 @@ import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyrep
 import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
 import {DICT_TYPE, getDictLabel} from "@/utils/dict";
 import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
+import DeptTree from "@/views/system/user/DeptTree.vue";
 
 /** 瑞恒日报 列表 */
 defineOptions({ name: 'IotRhDailyReport' })
@@ -537,6 +548,16 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+// 响应式变量存储选中的部门
+const selectedDept = ref<{ id: number; name: string }>()
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  // 记录选中的部门信息
+  selectedDept.value = { id: row.id, name: row.name }
+  queryParams.deptId = row.id
+  await getList()
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {