修改多个组件的展示样式

riku

2025-04-21 30748ea70f14c675743c7ea54e5c162d4a5e2839

修改多个组件的展示样式

 src/api/clue/clueApi.js

@@ -14,9 +14,8 @@
    if (eTime) {
      url += `eTime=${eTime}&`;
    }
    return $clue.get(
      `${url}pageNum=${pageNum}&pageSize=${pageSize}`
    );
    return $clue.get(`${url}pageNum=${pageNum}&pageSize=${pageSize}`);
    // .then((res) => res.data);
  },

  /**
@@ -25,7 +24,9 @@
   * @returns
   */
  fetchRemoteClue(updateTime) {
    return $clue.get(`clue/fetch/remote?updateTime=${updateTime}`);
    return $clue
      .get(`clue/fetch/remote?updateTime=${updateTime}`)
      .then((res) => res.data);
  },

  fetchRemoteClueFileUrl(clueId) {
@@ -34,10 +35,12 @@

  /**
   * æŽ¨é€çº¿ç´¢çš„结论与问题
   * @param {string} clueId 
   * @returns 
   * @param {string} clueId
   * @returns
   */
  pushClue(clueId) {
    return $clue.post(`clue/push?clueId=${clueId}`);
    return $clue
      .post(`clue/push?clueId=${clueId}`)
      .then((res) => res.data);
  }
};

 src/api/clue/clueConclusionApi.js

@@ -6,7 +6,7 @@
   * @param {string} clueId çº¿ç´¢id
   */
  getConclusion(clueId) {
    return $clue.get(`clue/conclusion/fetch?clueId=${clueId}`);
    return $clue.get(`clue/conclusion/fetch?clueId=${clueId}`).then((res) => res.data);
  },

  /**
@@ -15,7 +15,7 @@
   * @returns 
   */
  uploadConclusion(conclusion) {
    return $clue.post(`clue/conclusion/upload`, conclusion);
    return $clue.post(`clue/conclusion/upload`, conclusion).then((res) => res.data);
  },

  /**
@@ -24,6 +24,6 @@
   * @returns 
   */
  pushConclusion(conclusionIdList) {
    return $clue.post(`clue/conclusion/push`, conclusionIdList);
    return $clue.post(`clue/conclusion/push`, conclusionIdList).then((res) => res.data);
  }
};

 src/api/clue/clueQuestionApi.js

@@ -10,7 +10,7 @@
    return $clue
      .get(`clue/question/fetch?clueId=${clueId}`)
      .then((res) => {
        return getClueQuestionList(res);
        return getClueQuestionList(res.data);
      });
  },

@@ -26,7 +26,11 @@
    files.forEach((e) => {
      formData.append('images', e);
    });
    return $clue.post(`clue/question/upload`, formData);
    return $clue.post(`clue/question/upload`, formData).then((res) => res.data);
  },

  deleteQuestion(questionId) {
    return $clue.delete(`clue/question`, { params: { questionId } }).then((res) => res.data);
  },

  uploadQuestionUrl() {
@@ -39,6 +43,6 @@
   * @returns
   */
  pushQuestion(questionIdList) {
    return $clue.post(`clue/question/push`, questionIdList);
    return $clue.post(`clue/question/push`, questionIdList).then((res) => res.data);
  }
};

 src/api/config.js

@@ -47,9 +47,9 @@
              //   ElMessage({
              //     message: response.data.message,
              //     type: 'success'
              //   }); 
              //   });
              // }
              return response.data.data;
              return response.data;
            } else {
              ElMessage({
                message: response.data.message,
@@ -58,7 +58,7 @@
              return Promise.reject(response.data.message);
            }
          } else {
            return response.data;
            return response;
          }
        } else {
          return Promise.reject(response);

 src/api/grid/gridInfoApi.js

@@ -7,7 +7,7 @@
   */
  fetchGridList(schemeId) {
    return $clue.get(`grid/info/fetch?id=${schemeId}`).then((res) => {
      return getGridRecordList(res);
      return getGridRecordList(res.data);
    });
  },

@@ -17,15 +17,17 @@
   */
  createGrid(gridInfo) {
    return $clue.post(`grid/info/create`, gridInfo).then((res) => {
      return getGridRecord(res);
      return getGridRecord(res.data);
    });
  },

  /**
   * æ›´æ–°ç½‘æ ¼
   * @param {Object} gridInfo 
   * @param {Object} gridInfo
   */
  updateGrid(gridInfo) {
    return $clue.post(`grid/info/update`, gridInfo)
    return $clue
      .post(`grid/info/update`, gridInfo)
      .then((res) => res.data);
  }
};

 src/api/grid/gridSchemeApi.js

@@ -5,7 +5,7 @@
   * èŽ·å–全部网格化规划方案
   */
  fetchAllSchemes() {
    return $clue.get(`grid/scheme/fetch`);
    return $clue.get(`grid/scheme/fetch`).then((res) => res.data);
  },

  /**
@@ -13,6 +13,6 @@
   * @param {Object} scheme
   */
  createScheme(scheme) {
    return $clue.post(`grid/scheme/create`, scheme);
    return $clue.post(`grid/scheme/create`, scheme).then((res) => res.data);
  }
};

 src/api/index.js

@@ -1,9 +1,10 @@
import axios from 'axios';
import { setInterceptors } from "./config";

const url = 'http://47.100.191.150:9031/';
// const url = 'http://192.168.0.138:8083/';
const imgUrl = 'http://47.100.191.150:9031/images/';
// const url = 'http://47.100.191.150:9031/';
const url = 'http://192.168.0.110:8084/';
// const imgUrl = 'http://47.100.191.150:9031/images/';
const imgUrl = 'http://192.168.0.110:8084/images/';

//飞羽监管
const $clue = axios.create({

 src/components.d.ts

@@ -13,7 +13,6 @@
    DescriptionsList: typeof import('./components/list/DescriptionsList.vue')['default']
    DescriptionsListItem: typeof import('./components/list/DescriptionsListItem.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@@ -26,6 +25,7 @@
    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']

 src/components/map/MapSearch.vue

@@ -45,11 +45,11 @@
          <span>{{ searchResult.address }}</span>
          <div>
            <span>{{
              searchResult.lon + ', ' + searchResult.lat
              '高德' + searchResult.lon + ', ' + searchResult.lat
            }}</span>
            <el-divider direction="vertical" />
            <span>{{
              searchResult.gpsLon + ', ' + searchResult.gpsLat
              'GPS' + searchResult.gpsLon + ', ' + searchResult.gpsLat
            }}</span>
          </div>
        </div>

 src/composables/messageBox.js

@@ -34,10 +34,10 @@
            if (err != 'cancel') {
              errStr = `${confirmTitle}失败, ${err}`;
            }
            ElMessage({
              message: errStr,
              type: 'warning'
            });
            // ElMessage({
            //   message: errStr,
            //   type: 'warning'
            // });
          });
      }
    })

 src/styles/base.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
/************************************** font size **************************************/
$fontsize: (
  s: var(--el-font-size-small),
  b: var(--el-font-size-base),
  m: var(--el-font-size-medium),
  l: var(--el-font-size-large)
);

@each $dName, $dValue in $fontsize {
  .f-#{$dName} {
    font-size: #{$dValue};
  }
}

/************************************** color **************************************/
$colors: (
  p: var(--el-color-primary),
  s: var(--el-color-success),
  w: var(--el-color-warning),
  d: var(--el-color-danger),
  e: var(--el-color-error),
  i: var(--el-color-info)
);

@each $dName, $dValue in $colors {
  .color-#{$dName} {
    color: #{$dValue};
  }
  .b-color-#{$dName} {
    background-color: #{$dValue};
  }
}

/************************************** å†…外边距 **************************************/
$direction: (
  l: 'left',
  t: 'top',
  r: 'right',
  b: 'bottom'
);
$size: (2, 4, 8, 10, 16);
@each $dName, $dValue in $direction {
  @each $i in $size {
    .p-#{$dName}-#{$i} {
      padding-#{$dValue}: #{$i}px;
    }
    .m-#{$dName}-#{$i} {
      margin-#{$dValue}: #{$i}px;
    }
  }
}

@each $i in $size {
  .p-#{$i} {
    padding: #{$i}px;
  }
  .p-v-#{$i} {
    padding: #{$i}px 0;
  }
  .p-h-#{$i} {
    padding: 0 #{$i}px;
  }
  .m-#{$i} {
    margin: #{$i}px;
  }
  .m-v-#{$i} {
    margin: #{$i}px 0;
  }
  .m-h-#{$i} {
    margin: 0 #{$i}px;
  }
}

/************************************** å®½é«˜ **************************************/
$csize: (
  small: var(--el-component-size-small),
  default: var(--el-component-size-default),
  large: var(--el-component-size-large)
);
$ws: (20, 40, 50, 60, 80, 100, 120, 150, 200, 250, 300);
@each $name, $value in $csize {
  .w-#{$name} {
    width: #{$value};
  }
  .h-#{$name} {
    height: #{$value};
  }
}
@each $i in $ws {
  .w-#{$i} {
    width: #{$i}px;
  }
  .h-#{$i} {
    height: #{$i}px;
  }
}

//
.cursor-p {
  cursor: pointer;
}

 src/styles/index.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2 @@
@use './base.scss';
// @use './elementUI.scss';

 src/views/overlay-clue/list/ClueManage.vue

@@ -14,11 +14,25 @@
      >
    </div>
    <el-scrollbar height="70vh" class="p-h-1">
      <ClueList
        :dataList="clueList"
        @itemSelected="selectClue"
      ></ClueList>
      <ClueList :dataList="clueList" @itemSelected="selectClue">
        <!-- <template #extra>
          <el-button size="small" type="primary" @click="getClues">
            å‘布任务
          </el-button>
        </template> -->
      </ClueList>
    </el-scrollbar>
    <el-row justify="space-between" class="p-8">
      <el-pagination
        size="small"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, pager"
        :total="total"
      />
    </el-row>
  </div>
</template>

@@ -36,6 +50,9 @@
const updateTime = ref();
// çº¿ç´¢æ¸…单
const clueList = ref([]);
const currentPage = ref(1);
const pageSize = ref(100);
const total = ref(0);

/**
 * æŸ¥è¯¢å·²ä¸‹å‘的线索清单
@@ -49,9 +66,17 @@
    eTime = now.add(1, 'month').format('YYYY-MM-DD HH:mm:ss');
  }
  onMapMounted(() => {
    clueApi.getClue({ sTime, eTime }).then((res) => {
      clueList.value = res;
    });
    clueApi
      .getClue({
        sTime,
        eTime,
        pageNum: currentPage.value,
        pageSize: pageSize.value
      })
      .then((res) => {
        total.value = res.head.totalCount;
        clueList.value = res.data;
      });
  });
};

@@ -75,6 +100,4 @@
  getClues();
});
</script>
<style scoped>

</style>
<style scoped></style>

 src/views/overlay-clue/list/components/ClueList.vue

@@ -9,25 +9,30 @@
        v-if="!item.delete"
      >
        <div class="clue-item">
          <div class="flex gap-1">
            <div class="clue-num">{{ $nf(item.cid) }}</div>
            <el-text class="fy-h1" truncated>{{
              item.cclueName
            }}</el-text>
          </div>
          <el-row justify="space-between">
            <el-col span="20">
              <div class="flex gap-1">
                <div class="clue-num">{{ $nf(item.cid) }}</div>
                <el-text class="fy-h1" truncated>{{
                  item.cclueName
                }}</el-text>
              </div>
            </el-col>
            <!-- <el-col :span="4">
              <el-row justify="end">
                <slot name="extra"></slot>
              </el-row>
            </el-col> -->
          </el-row>
          <el-space>
            <el-row align="middle">
              <el-text type="info" size="small">结论：</el-text>
              <!-- <el-text size="small"> -->
              <el-tag
                :type="
                  item.conclusionCount == 1 ? 'success' : 'danger'
                "
                :type="item.cuploaded ? 'success' : 'danger'"
                effect="dark"
              >
                {{ item.conclusionCount == 1 ? '已推送' : '未推送' }}
                {{ item.cuploaded ? '已推送' : '未推送' }}
              </el-tag>
              <!-- </el-text> -->
            </el-row>
            <el-divider direction="vertical" />
            <el-row align="middle">

 src/views/overlay-clue/report/ClueReport.vue

@@ -6,7 +6,8 @@
      :type="clueData.cuploaded ? 'success' : 'danger'"
      @click="pushCheck"
      :disabled="clueData.cuploaded"
      ><div class="flex-col">
    >
      <div class="flex-col">
        <template v-if="clueData.cuploaded">
          <el-icon><Check /></el-icon>
          <div>å·²</div>
@@ -20,8 +21,30 @@
          <div>反</div>
          <div>馈</div>
        </template>
      </div></el-button
      </div>
    </el-button>
    <el-button
      class="task-btn"
      :type="clueTask ? 'success' : 'danger'"
      @click="publishTask"
    >
      <div class="flex-col">
        <template v-if="clueTask">
          <el-icon><Check /></el-icon>
          <div>查</div>
          <div>看</div>
          <div>ä»»</div>
          <div>务</div>
        </template>
        <template v-else>
          <el-icon><Upload /></el-icon>
          <div>发</div>
          <div>布</div>
          <div>ä»»</div>
          <div>务</div>
        </template>
      </div>
    </el-button>
    <div class="fy-card">
      <div class="fy-h1">线索反馈</div>
      <el-scrollbar height="80vh" class="p-h-1">
@@ -29,9 +52,7 @@
        <ClueReportConclusion
          :clueId="clueData.cid"
        ></ClueReportConclusion>
        <ClueReportQuestion
          :clueId="clueData.cid"
        ></ClueReportQuestion>
        <ClueReportQuestion :clueData="clueData"></ClueReportQuestion>
      </el-scrollbar>
    </div>
  </CloseButton>
@@ -61,7 +82,9 @@
  },
  emits: ['update:show', 'pushed'],
  data() {
    return {};
    return {
      clueTask: undefined
    };
  },
  methods: {
    closeEdit() {
@@ -80,6 +103,9 @@
      return clueApi.pushClue(this.clueData.cid).then((res) => {
        this.$emit('pushed', res);
      });
    },
    publishTask() {

    }
  }
};
@@ -106,4 +132,25 @@
  border-bottom-right-radius: 0px;
  /* box-shadow: var(--el-box-shadow-light); */
}

.task-btn {
  position: absolute;
  z-index: 1;
  bottom: 2rem;
  left: -2.5rem;
  width: 2.5rem;
  height: initial;
  margin: initial;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: white; */
  /* border-color: white; */
  /* border-top: 1px solid;
  border-left: 1px solid;
  border-bottom: 1px solid; */
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  /* box-shadow: var(--el-box-shadow-light); */
}
</style>

 src/views/overlay-clue/report/components/ClueReportQuestion.vue

@@ -4,29 +4,23 @@
    <template v-for="(item, index) in questionList" :key="index">
      <DescriptionsList :title="item.cqUid">
        <template #extra>
          <el-button-group>
            <!-- <el-button
            type="warning"
            size="small"
            plain
            icon="Upload"
            @click="pushQuestion(item)"
            :disabled="item.pushing ? true : item.cqUploaded"
            >{{
              item.cqUploaded
                ? '已推送'
                : item.pushing
                ? '推送中'
                : '推送问题'
            }}</el-button
          > -->
          <div>
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              :disabled="clueData.cuploaded"
              @click="deleteQuestion(item)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              @click="checkQuestion(item)"
              >问题详情</el-button
              >{{
                clueData.cuploaded ? '问题详情' : '修改问题'
              }}</el-button
            >
          </el-button-group>
          </div>
        </template>
        <DescriptionsListItem
          label="问题名称"
@@ -44,7 +38,10 @@
      <!-- <el-divider /> -->
    </template>
    <div class="btn-wrap">
      <el-button type="primary" @click="openDialog"
      <el-button
        v-if="!clueData.cuploaded"
        type="primary"
        @click="openDialog"
        >添加问题</el-button
      >
    </div>
@@ -57,7 +54,7 @@
    </el-empty>
  </div>
  <QuestionDetail
    :clueId="clueId"
    :clueData="clueData"
    v-model:show="dialogShow"
    :question="selectedQuestion"
    @on-submit="getQuestion"
@@ -68,9 +65,19 @@
import { ref, watch, computed } from 'vue';
import clueQuestionApi from '@/api/clue/clueQuestionApi';
import QuestionDetail from './QuestionDetail.vue';
import {
  useMessageBoxTip,
  useMessageBox
} from '@/composables/messageBox';

const props = defineProps({
  clueId: Number
  // clueId: Number,
  clueData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

// çº¿ç´¢ç»“论
@@ -78,9 +85,10 @@
// ä¸ŠæŠ¥å¼¹å‡ºæ¡†
const dialogShow = ref(false);
const selectedQuestion = ref();
const deleteLoading = ref(false);

watch(
  () => props.clueId,
  () => props.clueData,
  () => {
    getQuestion();
  }
@@ -97,11 +105,31 @@
  selectedQuestion.value = item;
  dialogShow.value = true;
}

// åˆ é™¤é—®é¢˜
function deleteQuestion(item) {
  useMessageBoxTip({
    confirmMsg: '确认是否删除问题',
    confirmTitle: '删除问题',
    onConfirm: () => {
      return clueQuestionApi
        .deleteQuestion(item.cqId)
        .then((res) => {
          if (res) {
            const index = questionList.value.indexOf(item);
            questionList.value.splice(index, 1);
          }
        })
        .finally(() => (deleteLoading.value = true));
    }
  });
}

/**
 * èŽ·å–线索结论
 */
function getQuestion() {
  clueQuestionApi.getQuestion(props.clueId).then((res) => {
  clueQuestionApi.getQuestion(props.clueData.cid).then((res) => {
    questionList.value = res;
  });
}

 src/views/overlay-clue/report/components/QuestionDetail.vue

@@ -112,8 +112,18 @@

const props = defineProps({
  clueId: Number,
  clueData: {
    type: Object,
    default: () => {
      return {};
    }
  },
  show: Boolean,
  question: Object
  question: Object,
  create: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['update:show', 'onSubmit', 'onClose']);
@@ -222,7 +232,7 @@
function submit() {
  const coor = formObj.value.coordinate.split(',');
  const q = {
    cId: parseInt(props.clueId),
    cid: parseInt(props.clueData.cid),
    cqName: formObj.value.cqName,
    cqDescription: formObj.value.cqDescription,
    cqStreet: formObj.value.cqStreet,
@@ -236,7 +246,7 @@
      files.push(f.raw);
    });
  }
  return uploadQuestion(q, files);
  return props.create ? uploadQuestion(q, files) : updateQuestion(q, );
}

function cancel() {
@@ -272,6 +282,10 @@
    });
}

function updateQuestion(question, newFiles, deleteFiles) {
  
}

function parseFormObj(question) {
  question.coordinate =
    question.cqLongitude + ',' + question.cqLatitude;
@@ -299,17 +313,7 @@
    }
  }
);
// watch(
//   () => props.question,
//   (val) => {
//     fileList.value = [];
//     if (val) {
//       formObj.value = parseFormObj(val);
//     } else {
//       formObj.value = {};
//     }
//   }
// );

watch(dialogShow, (val) => {
  emit('update:show', val);
});

 src/views/overlay-clue/task/ClueTaskEdit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
<template>
  
</template>

 vite.config.js

@@ -27,6 +27,13 @@
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/index.scss" as *;`
      }
    }
  },
  server: {
    host: '0.0.0.0'
  }