feat:界面优化

张含笑

2025-08-30 833fadee976f732099ea27f69c7c079cfdfe2f5e

feat:界面优化

 src/assets/images/dataCenter/qrCode.svg

@@ -1,16 +1,16 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315688">
<g id="Frame" clip-path="url(#clip0_1238_1817)">
<g id="Frame_2" clip-path="url(#clip1_1238_1817)">
<path id="Vector" d="M4.83697 10.163H3.10692V8.43298H1.37593V11.029H3.10692V11.894H4.83697V11.029H6.56795V8.43298H4.83697V10.163ZM12.625 8.43298H7.43298V13.625H12.625V8.43298ZM10.894 10.164V11.8949H9.16303V10.163L10.894 10.164ZM12.625 2.375H7.43298V7.56982H12.625V2.375ZM10.894 4.10598V5.83697H9.16303V4.10598H10.894ZM6.56702 2.375H1.375V7.56982H6.56795L6.56702 2.375ZM4.83604 4.10598V5.83697H3.10692V4.10598H4.83604ZM3.10692 11.894H1.37593V13.625H3.10692V11.894ZM6.56795 11.894H4.83697V13.625H6.56795V11.894Z" fill="#212121"/>
<g id="Group 1321316147">
<g id="Frame" clip-path="url(#clip0_1360_1927)">
<g id="Frame_2" clip-path="url(#clip1_1360_1927)">
<path id="Vector" d="M4.83697 10.163H3.10692V8.43298H1.37593V11.029H3.10692V11.894H4.83697V11.029H6.56795V8.43298H4.83697V10.163ZM12.625 8.43298H7.43298V13.625H12.625V8.43298ZM10.894 10.164V11.8949H9.16303V10.163L10.894 10.164ZM12.625 2.375H7.43298V7.56982H12.625V2.375ZM10.894 4.10598V5.83697H9.16303V4.10598H10.894ZM6.56702 2.375H1.375V7.56982H6.56795L6.56702 2.375ZM4.83604 4.10598V5.83697H3.10692V4.10598H4.83604ZM3.10692 11.894H1.37593V13.625H3.10692V11.894ZM6.56795 11.894H4.83697V13.625H6.56795V11.894Z" fill="#1B94FF"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_1238_1817">
<clipPath id="clip0_1360_1927">
<rect width="11" height="11" fill="white" transform="translate(1.5 2.13086)"/>
</clipPath>
<clipPath id="clip1_1238_1817">
<clipPath id="clip1_1360_1927">
<rect width="12" height="12" fill="white" transform="matrix(-1 0 0 1 13 2)"/>
</clipPath>
</defs>

 src/assets/images/dataCenter/qrCode1.svg

New file
@@ -0,0 +1,17 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1321315688">
<g id="Frame" clip-path="url(#clip0_1238_1817)">
<g id="Frame_2" clip-path="url(#clip1_1238_1817)">
<path id="Vector" d="M4.83697 10.163H3.10692V8.43298H1.37593V11.029H3.10692V11.894H4.83697V11.029H6.56795V8.43298H4.83697V10.163ZM12.625 8.43298H7.43298V13.625H12.625V8.43298ZM10.894 10.164V11.8949H9.16303V10.163L10.894 10.164ZM12.625 2.375H7.43298V7.56982H12.625V2.375ZM10.894 4.10598V5.83697H9.16303V4.10598H10.894ZM6.56702 2.375H1.375V7.56982H6.56795L6.56702 2.375ZM4.83604 4.10598V5.83697H3.10692V4.10598H4.83604ZM3.10692 11.894H1.37593V13.625H3.10692V11.894ZM6.56795 11.894H4.83697V13.625H6.56795V11.894Z" fill="#212121"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_1238_1817">
<rect width="11" height="11" fill="white" transform="translate(1.5 2.13086)"/>
</clipPath>
<clipPath id="clip1_1238_1817">
<rect width="12" height="12" fill="white" transform="matrix(-1 0 0 1 13 2)"/>
</clipPath>
</defs>
</svg>

 src/views/tickets/orderLog.vue

@@ -566,7 +566,7 @@

        align: 'center',
        border: true,
        stripe: true,
        stripe: false,
        searchShow: true,
        searchBtnText: '搜索',
        searchMenuSpan: 6,

 src/views/tickets/ticket.vue

@@ -137,10 +137,21 @@
          </div>

          <!-- 表格部分 -->
          <avue-crud class="ztzf-public-general-avue-crud" ref="avueCrud" v-model="tableData" :option="option"
            :data="tableData" v-model:page="page" @size-change="sizeChange" @current-change="handleCurrentChange"
            @refresh-change="refreshChange" :table-loading="loading" @selection-change="handleSelectionChange"
            :permission="permissionList" v-if="activeTab === tab.name">
          <avue-crud
            class="ztzf-public-general-avue-crud"
            ref="avueCrud"
            v-model="tableData"
            :option="option"
            :data="tableData"
            v-model:page="page"
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
            @refresh-change="refreshChange"
            :table-loading="loading"
            @selection-change="handleSelectionChange"
            :permission="permissionList"
            v-if="activeTab === tab.name"
          >
            <template #orderNumber="{ row }">
              <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">
                {{ row.orderNumber }}
@@ -247,8 +258,12 @@
            </el-col>
            <el-col :span="12">
              <el-form-item label="工单类型" prop="type">

                <el-select  @change="handleTypeChange" v-model="form.type" placeholder="请选择工单类型" class="full-width" >
                <el-select
                  @change="handleTypeChange"
                  v-model="form.type"
                  placeholder="请选择工单类型"
                  class="full-width"
                >
                  <el-option
                    v-for="item in types"
                    :key="item.value"
@@ -400,12 +415,10 @@
      </el-form>
      <template #footer>
        <div class="dialog-footer">

          <el-button type="danger" :loading="submitLoading" @click="submitForm">发布</el-button>
          <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft"
            >存草稿</el-button
          >


          <el-button  @click="handleCancel">取 消</el-button>
        </div>
@@ -413,7 +426,14 @@
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog   class="custom-dialog" align-center v-model="detailVisible" title="工单详情" width="80%"  append-to-body>
    <el-dialog
      class="custom-dialog"
      align-center
      v-model="detailVisible"
      title="工单详情"
      width="80%"
      append-to-body
    >
      <div class="detail-container">
        <div class="detail-top-title">
          <div class="event-title-center event-orderNumber">
@@ -463,7 +483,10 @@
            <template #default="{ row }">
              <!-- 添加必填星号的标签 -->
              <span
                v-if="currentDetail.status === 0 &&(row.label1 === '关联算法' ||  row.label1 === '工单名称')"
                  v-if="
                    currentDetail.status === 0 &&
                    (row.label1 === '关联算法' || row.label1 === '工单名称')
                  "
                class="required-label"
              >
                <span class="required-star">*</span>{{ row.label1 }}
@@ -514,10 +537,7 @@
              <!-- 添加必填星号的标签 -->

              <span
                v-if="
                  currentDetail.status === 0 &&
                   row.label2 === '工单内容'
                "
                  v-if="currentDetail.status === 0 && row.label2 === '工单内容'"
                class="required-label"
              >
                <span class="required-star">*</span>{{ row.label2 }}
@@ -528,7 +548,6 @@
          <el-table-column>
            <template #default="{ row }">
              <!-- 修改工单类型和工单内容的显示 -->


              <template
                v-if="
@@ -554,7 +573,9 @@
          <div class="section-title">
            <!-- 处理中状态显示必填星号 -->
            <template v-if="currentDetail.status === 3">
              <span class="required-label"> <span class="required-star">*</span>事件处理详情 </span>
                <span class="required-label">
                  <span class="required-star">*</span>事件处理详情
                </span>
            </template>
            <template v-else> 事件处理详情 </template>
          </div>
@@ -614,7 +635,6 @@
        <!-- 图片和地图部分 -->
        <div class="media-section">
          <el-row :gutter="20">

            <el-col :span="12">
              <div class="media-box">
                <div class="media-title">事件图片</div>
@@ -673,21 +693,32 @@
                  </div>
                </template>
                <template v-else>
                  <div class="media-title">地图标记事件点
                    <el-popover   v-if="currentDetail.status === 3 || currentDetail.status === 0"
                    <div class="media-title">
                      地图标记事件点
                      <el-popover
                        v-if="currentDetail.status === 3 || currentDetail.status === 0"
                                popper-class="custom-qrcode-popover"
                                :width="120"
                                :visible="currentDetail.showQR && detailVisible"
                                placement="top"
                                title=""
                                trigger="click"

                        trigger="hover"
                            >
                                <template #reference>
                                    <img @click.stop="handleQRCode(currentDetail)"  class="QRCodeImg" src="@/assets/images/dataCenter/qrCode.svg" alt="" title="事件导航" />
                          <img
                           @mouseenter="currentDetail.showQR = true"
                           @mouseleave="currentDetail.showQR = false"
                            class="QRCodeImg"
                            src="@/assets/images/dataCenter/qrCode.svg"
                            alt=""
                            title="事件导航"
                          />
                                </template>
                                <div class="qrcode-content">
                                    <CreateQRcode v-if="currentDetail.showQR && detailVisible" :latAndLon="currentDetail.location"></CreateQRcode>
                          <CreateQRcode
                            v-if="currentDetail.showQR && detailVisible"
                            :latAndLon="currentDetail.location"
                          ></CreateQRcode>
                                </div>
                            </el-popover>
                  </div>
@@ -697,19 +728,13 @@
                </template>
              </div>
            </el-col>


          </el-row>
        </div>
      </div>

        <!-- 操作按钮 -->
        <div class="dialog-footer1">
            <div
                class="leftBtn"
                :class="currentIndex === 0 ? 'disableds' : ''"
                @click="leftClick"
              >
          <div class="leftBtn" :class="currentIndex === 0 ? 'disableds' : ''" @click="leftClick">
               上一页
              </div>
       <div class="btngroups">
@@ -787,7 +812,6 @@
      <el-form :model="dispatchForm" :rules="dispatchRules" ref="dispatchForm" label-width="100px">
        <el-form-item label="选择部门" prop="department">
          <el-select

            v-model="dispatchForm.department"
            placeholder="请选择部门"
            @change="handleDispatchDepartmentChange"
@@ -933,19 +957,19 @@
  getStepInfo,
  getReviewById,
  getCreateEventJob,
} from '@/api/tickets/ticket'
} from '@/api/tickets/ticket';
import { getSFDictionaryTree  } from '@/api/job/task';
import { export_json_to_excel } from '@/utils/exportExcel'
import geoJson from '@/assets/geoJson.json'
import { mapGetters } from 'vuex'
import { getAdcodeObj } from '@/utils/disposeData'
import elTooltipCopy from '@/components/ElTooltipCopy.vue'
import getBaseConfig from '@/buildConfig/config'
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'
const { envName } = getBaseConfig()
import { export_json_to_excel } from '@/utils/exportExcel';
import geoJson from '@/assets/geoJson.json';
import { mapGetters } from 'vuex';
import { getAdcodeObj } from '@/utils/disposeData';
import elTooltipCopy from '@/components/ElTooltipCopy.vue';
import getBaseConfig from '@/buildConfig/config';
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue';
const { envName } = getBaseConfig();
function regExp (label, name) {
  var reg = new RegExp(label + '=([^&]*)(&|$)', 'g')
  return name.match(reg)[0].split('=')[1]
  var reg = new RegExp(label + '=([^&]*)(&|$)', 'g');
  return name.match(reg)[0].split('=')[1];
}

export default {
@@ -1005,7 +1029,7 @@
      tableData: [],
      option: {
        border: true,
        stripe: true,
        stripe: false,
        selection: true, // 添加多选功能
        index: true, // 保留序号功能
        indexLabel: '序号',
@@ -1167,8 +1191,7 @@
  },

  mounted() {

    this.getAlgorithmList()
    this.getAlgorithmList();

    const href = this.$route.href;
    if (this.$route?.query?.status !== undefined && this.$route?.query?.status !== null) {
@@ -1215,10 +1238,9 @@
        this.filters.keyword = orderNumber;
        this.$nextTick(() => {
          this.isShowInfo = true;
          const find = this.$store.state.tags.bsTagList.find(i => i.path === '/tickets/ticket')
          find && (find.query = {})
          const find = this.$store.state.tags.bsTagList.find(i => i.path === '/tickets/ticket');
          find && (find.query = {});
        });

      }
    }

@@ -1340,12 +1362,12 @@
        { label: '任务发起人', value: this.currentDetail.creator },
        { label: '当前状态', value: this.mapStatus(this.currentDetail.status) },
        { label: '事件地址', value: this.currentDetail.address || this.currentDetail.latAndLon }, // 包含经纬度信息
        { label: '关联算法',
        {
          label: '关联算法',
         value:
            this.algorithms.find(t => t.value === this.currentDetail.aiType)?.label ||
            this.currentDetail.aiType ||
            '/',

        },
        { label: '发起单位', value: this.currentDetail.department },
        { label: '发起任务时间', value: this.currentDetail.startTime },
@@ -1366,7 +1388,6 @@
      }

      return formattedFields;

    },
    dynamicFixedStatuses() {
      // 直接使用接口返回的 stepInfos
@@ -1439,46 +1460,46 @@

  methods: {
    handleCheck(data, { checkedKeys, checkedNodes }) {
      this.checkedKeys = checkedKeys
      this.checkedKeys = checkedKeys;
      // 获取所有选中节点的 dictKey
      const selectedDictKeys = checkedNodes.map(node => node.dictKey).filter(Boolean)
      this.filters.type = selectedDictKeys
      const selectedDictKeys = checkedNodes.map(node => node.dictKey).filter(Boolean);
      this.filters.type = selectedDictKeys;
      this.fetchTableData();
    },
    // 算法
    getAlgorithmList() {
      getSFDictionaryTree({code:'SF'}).then((res) => {
      getSFDictionaryTree({ code: 'SF' }).then(res => {
          if (res.data.code === 200) {
              const result = res.data.data[0].children
          const result = res.data.data[0].children;
              // 过滤第一层数据
              const filteredData = result.map(item => {
                  // 过滤第二层数据
                  const children = item.children?.map(child => ({
                      ...child,
                      children: [] // 清空第三层数据
                  }))
              children: [], // 清空第三层数据
            }));
                  return {
                      ...item,
                      children: children || []
              children: children || [],
            };
          });
          this.dataList = filteredData;
                  }
              })
              this.dataList = filteredData
          }
      })
      });
    },

    handleSFNodeClick(data) {
      console.log(data.dictKey, '666666666')
      this.filters.type = ''
      this.filters.algorithm = ''
      this.filters.type = data.dictKey
      console.log(data.dictKey, '666666666');
      this.filters.type = '';
      this.filters.algorithm = '';
      this.filters.type = data.dictKey;
      // 更新列表请求
      this.fetchTableData();
    },
    handleClear() {
        this.dictKey = ''
        this.filters.algorithm = ''
         this.filters.type = ''
      this.dictKey = '';
      this.filters.algorithm = '';
      this.filters.type = '';
        this.fetchTableData();
    },
    handleCellClick(row, column) {
@@ -1517,7 +1538,6 @@
      this.currentDetail.processingDetail = this.currentDetail.content;
      this.handleViewDetail(this.currentDetail);


      // 如果使用地图组件，需要更新地图标记
      this.$nextTick(() => {
        if (this.$refs.MapContainer && this.currentDetail.location) {
@@ -1526,7 +1546,7 @@
      });
    },
    async handleQRCode (val){
    val.showQR = !val.showQR
      val.showQR = !val.showQR;
    },
    async loadAMapScripts() {
      try {
@@ -1640,7 +1660,7 @@

        const columnType = this.findObject(this.option.column, 'type');
        columnType.dicData = this.types;
        this.allAlgorithms  = info
        this.allAlgorithms = info;

        console.log('工单类型',this.types);
        console.log('关联算法',this.allAlgorithms );
@@ -1654,7 +1674,7 @@
            value: item.dict_key,
          })) || [];

        this.algorithms2 = _.cloneDeep(this.algorithms)
        this.algorithms2 = _.cloneDeep(this.algorithms);

        // 构建用户ID和名称的映射关系
        this.userNameToIdMap = {};
@@ -1669,18 +1689,20 @@
    },
    // 工单类型变化时触发
    handleTypeChange(typeValue) {
      this.form.algorithm = []
      this.form.algorithm = [];
      if (!typeValue) {
        // 未选择类型时清空算法列表
        this.algorithms2 = [];
        return;
      }

      const matchedCategory = this.allAlgorithms.find(
        category => category.dict_key === typeValue
      );
      const matchedCategory = this.allAlgorithms.find(category => category.dict_key === typeValue);

      if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
      if (
        !matchedCategory ||
        !matchedCategory.algorithms ||
        matchedCategory.algorithms.length === 0
      ) {
        // 无匹配的算法时清空
        this.algorithms2 = [];
        this.$message.info('该工单类型暂无关联算法');
@@ -1690,9 +1712,8 @@
        label: algo.dict_value,
        value: algo.dict_key,
        dict_key: algo.dict_key,
        dict_value: algo.dict_value
        dict_value: algo.dict_value,
      }));

    },

    async fetchTableData() {
@@ -2176,7 +2197,7 @@

      console.log('this.currentDetail', this.currentDetail);
      this.detailVisible = true;
      this.handleTypeChange(this.currentDetail.type)
      this.handleTypeChange(this.currentDetail.type);
      console.log('this.currentDetail.location',this.currentDetail.location);

      this.$nextTick(() => {
@@ -2483,7 +2504,6 @@
      this.dispatchDialogVisible = true;

      console.log('受理',this.currentDetail);

    },
    hasProcessingBtnPermission() {
      // undefined 或 false 都返回 false，只有 true 返回 true
@@ -2538,7 +2558,7 @@
              content: this.currentDetail.content, // 使用 content 替代原来的 remark
              createDept: this.dispatchForm.department, // 派发部门 ID
              updateUser: this.dispatchForm.handler, // 处理人 ID
              aiType:this.currentDetail.aiType
              aiType: this.currentDetail.aiType,
            };
           console.log('派发',data);

@@ -3080,17 +3100,17 @@
  activated() {
    this.handleReset();
  },

};
</script>
<style lang="scss">
.custom-dialog {  max-height: 96vh; }
.custom-dialog {
  max-height: 96vh;
}
.custom-qrcode-popover {
min-width: 120px !important;
}
</style>
<style lang="scss" scoped>

::v-deep(.el-tabs) {
  height: 100%;
  display: flex;
@@ -3508,7 +3528,6 @@
  color: #fff;
  cursor: pointer;
  opacity: 0.8;

}

.disableds {