2025.9.20 完成现场巡查基础数据产品和月度巡查简报的中间数据产品

Riku

2025-09-20 32eedf2857255cf29985ffc0cc73e75eccda39bf

 src/components/SideList.vue

@@ -1,147 +1,153 @@
<template>
  <div class="state-label">
    <el-input
      v-model="filterText"
      icon="Search"
      style="width: 200px"
      placeholder="关键字筛选"
      clearable
    />
    <el-tooltip v-if="legend" placement="bottom-start" effect="dark">
      <template #content>
        <el-space>
          <el-space v-for="(item, index) in stateLabels" :key="index" :size="1">
            <el-icon :color="item.color">
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.name }}
            <!-- <el-text size="small">{{ item.name }}</el-text> -->
  <div style="padding-right: 10px;">
    <div v-if="legend" class="state-label">
      <el-input
        v-model="filterText"
        icon="Search"
        style="width: 180px"
        placeholder="关键字筛选"
        clearable
      />
      <el-tooltip placement="bottom-start" effect="dark">
        <template #content>
          <el-space>
            <el-space
              v-for="(item, index) in stateLabels"
              :key="index"
              :size="1"
            >
              <el-icon :color="item.color">
                <component :is="item.icon"></component>
              </el-icon>
              {{ item.name }}
              <!-- <el-text size="small">{{ item.name }}</el-text> -->
            </el-space>
          </el-space>
        </el-space>
        <br />
          <br />
          <el-space>
            <el-space :size="1">
              <el-icon :size="16" color="var(--el-color-success)">
                <Avatar />
              </el-icon>
              正在执行巡查
            </el-space>
            <el-space :size="1">
              <el-icon :size="16" color="var(--el-color-info)">
                <Avatar />
              </el-icon>
              未执行
            </el-space>
          </el-space>
        </template>
        <el-space>
          <el-space :size="1">
            <el-icon :size="16" color="var(--el-color-success)">
          <el-icon class="cursor-p" :size="16" color="var(--el-color-primary)"
            ><QuestionFilled
          /></el-icon>
          <el-text size="small" class="cursor-p">审核状态图例</el-text>
        </el-space>
      </el-tooltip>
    </div>
    <el-tree
      ref="treeRef"
      class="el-tree"
      v-loading="isLoading"
      :data="dataList"
      :props="defaultProps"
      @node-click="handleNodeClick"
      :filter-node-method="filterNode"
      default-expand-all
      highlight-current
      check-on-click-node
      empty-text="暂无记录"
    >
      <template #default="{ node, data }">
        <slot :node="node" :data="data">
          <div
            :class="
              data.selected
                ? 'selected-tree-node custom-tree-node'
                : 'custom-tree-node'
            "
          >
            <el-icon
              v-if="data.status == '正在执行'"
              :size="16"
              color="var(--el-color-success)"
              style="margin-left: -16px"
            >
              <Avatar />
            </el-icon>
            正在执行巡查
          </el-space>
          <el-space :size="1">
            <el-icon :size="16" color="var(--el-color-info)">
            <el-icon
              v-if="data.status == '未执行'"
              :size="16"
              color="var(--el-color-info)"
              style="margin-left: -16px"
            >
              <Avatar />
            </el-icon>
            未执行
          </el-space>
        </el-space>
      </template>
      <el-space>
        <el-icon class="cursor-p" :size="16" color="var(--el-color-primary)"
          ><QuestionFilled
        /></el-icon>
        <el-text size="small" class="cursor-p">审核状态图例</el-text>
      </el-space>
    </el-tooltip>
  </div>
  <el-tree
    ref="treeRef"
    class="el-tree"
    v-loading="isLoading"
    :data="dataList"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :filter-node-method="filterNode"
    default-expand-all
    highlight-current
    check-on-click-node
    empty-text="暂无记录"
  >
    <template #default="{ node, data }">
      <slot :node="node" :data="data">
        <div
          :class="
            data.selected
              ? 'selected-tree-node custom-tree-node'
              : 'custom-tree-node'
          "
        >
          <el-icon
            v-if="data.status == '正在执行'"
            :size="16"
            color="var(--el-color-success)"
            style="margin-left: -16px"
          >
            <Avatar />
          </el-icon>
          <el-icon
            v-if="data.status == '未执行'"
            :size="16"
            color="var(--el-color-info)"
            style="margin-left: -16px"
          >
            <Avatar />
          </el-icon>
          <!-- <el-icon :color="stateLabels[data.type].color">
            <!-- <el-icon :color="stateLabels[data.type].color">
            <component :is="stateLabels[data.type].icon"></component>
          </el-icon> -->
          <el-icon
            v-if="data.type == 0"
            :size="16"
            color="var(--el-color-info)"
          >
            <SuccessFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 1"
            :size="16"
            color="var(--el-color-danger)"
          >
            <QuestionFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 2"
            :size="16"
            color="var(--el-color-warning)"
          >
            <QuestionFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 3"
            :size="16"
            color="var(--el-color-danger)"
          >
            <WarnTriangleFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 4"
            :size="16"
            color="var(--el-color-danger)"
          >
            <WarningFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 5"
            :size="16"
            color="var(--el-color-warning)"
          >
            <WarningFilled />
          </el-icon>
          <el-icon
            v-else-if="data.type == 6"
            :size="16"
            color="var(--el-color-success)"
          >
            <SuccessFilled />
          </el-icon>
          <!-- <el-text>{{ node.label }}</el-text> -->
          {{ node.label }}
          <span v-if="data.count">
            {{ '_(' + data.count + ')' }}
            <!-- <el-text size="small">点次</el-text>) -->
          </span>
        </div>
      </slot>
    </template>
  </el-tree>
            <el-icon
              v-if="data.type == 0"
              :size="16"
              color="var(--el-color-info)"
            >
              <SuccessFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 1"
              :size="16"
              color="var(--el-color-danger)"
            >
              <QuestionFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 2"
              :size="16"
              color="var(--el-color-warning)"
            >
              <QuestionFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 3"
              :size="16"
              color="var(--el-color-danger)"
            >
              <WarnTriangleFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 4"
              :size="16"
              color="var(--el-color-danger)"
            >
              <WarningFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 5"
              :size="16"
              color="var(--el-color-warning)"
            >
              <WarningFilled />
            </el-icon>
            <el-icon
              v-else-if="data.type == 6"
              :size="16"
              color="var(--el-color-success)"
            >
              <SuccessFilled />
            </el-icon>
            <!-- <el-text>{{ node.label }}</el-text> -->
            {{ node.label }}
            <span v-if="data.count">
              {{ '_(' + data.count + ')' }}
              <!-- <el-text size="small">点次</el-text>) -->
            </span>
          </div>
        </slot>
      </template>
    </el-tree>
  </div>
</template>

<script>