Skip to content

R
risk-monitor
提交 a7445bfb authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:新增组件SearchBox

上级 2e069ef9
隐藏空白字符变更
内嵌 并排
正在显示 包含 356 行增加 和 211 行删除
src/components/base/SearchBox/index.vue 0 → 100644
浏览文件 @ a7445bfb
<template>
<div class="search-wrapper">
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="inputValue" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt />
搜索
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
searchText: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
})
const emit = defineEmits(['search', 'update:searchText'])
const inputValue = computed({
get: () => props.searchText,
set: (value) => emit('update:searchText', value)
})
const handleSearch = () => {
emit('search')
}
</script>
<style lang="scss" scoped>
.search-wrapper {
width: 960px;
height: 48px;
.search-main {
display: flex;
padding-right: 3px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
width: 960px;
height: 48px;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
width: 838px;
height: 48px;
background-color: transparent;
font-size: 14px;
padding: 12px 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgba(59, 65, 75, 1);
&::placeholder {
color: #a8abb2;
}
}
.search-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 46px;
margin-right: -3px;
border-radius: 8px;
background-color: rgb(5, 95, 194);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: #fff;
img {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
}
}
</style>
\ No newline at end of file
src/views/companyPages2/component/DetailsPages/BaseInfo.vue
浏览文件 @ a7445bfb
......@@ -35,7 +35,7 @@
<script setup>
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import { ref, watch } from 'vue';
import { getEnterpriseBranch, getEnterpriseKeyPerson } from '@/api/companyPages';
import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
......
src/views/companyPages2/component/DetailsPages/NewsPane.vue
浏览文件 @ a7445bfb
......@@ -23,7 +23,7 @@
// 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API
......
src/views/companyPages2/component/OperatingPages/SanctionsSituation.vue
浏览文件 @ a7445bfb
......@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElRadioGroup, ElRadioButton, ElSpace } from 'element-plus';
import * as echarts from 'echarts';
import { getSanctionList } from '@/api/companyPages';
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue'
export interface LineDataItem {
......
src/views/exportControl/v2.0SingleSanction/components/deepMining/index.vue
浏览文件 @ a7445bfb
......@@ -133,7 +133,7 @@ import {
getSingleSanctionEntityEquity
} from "@/api/exportControlV2.0";
import RelationGraph from "./components/RelationGraph.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue";
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue";
const sanRecordId = ref("");
const activeTab = ref(["实体穿透分析"]);
......
src/views/marketAccessRestrictions/marketAccessHome/assets/icons/icon6.svg
浏览文件 @ a7445bfb
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
<rect id="大学,学府,法院" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="矢量 573" d="M21.9922 6.66992L21.9922 8.00391L21.5996 8.00391C21.1699 8.00391 20.7598 8.17383 20.4473 8.4707L20.4434 8.47461C20.3008 8.60742 20.1328 8.67188 19.9375 8.67188L4.05078 8.67188C3.85352 8.67188 3.6875 8.60742 3.54688 8.47461C3.54492 8.47266 3.54297 8.47266 3.54102 8.4707C3.22852 8.17578 2.81836 8.00586 2.38867 8.00586L2 8.00586L2 6.66992L11.9961 2.67188L21.9922 6.66992ZM21.2715 19.3301L2.71875 19.3301C2.52344 19.3301 2.35547 19.3945 2.21484 19.5273C2.07031 19.6602 2 19.8164 2 19.998L2 21.332L21.9922 21.332L21.9922 19.998C21.9922 19.8164 21.9199 19.6602 21.7773 19.5273C21.6348 19.3945 21.4688 19.3301 21.2715 19.3301L21.2715 19.3301ZM20.6621 17.998L20.6621 18.6621L3.33398 18.6621L3.33398 17.998C3.33398 17.8184 3.4043 17.6602 3.54883 17.5273C3.69141 17.3945 3.85938 17.3301 4.05273 17.3301L4.66797 17.3301L4.66602 9.33399L7.33203 9.33399L7.33203 17.3301L8.66602 17.3301L8.66602 9.33398L11.3301 9.33398L11.3301 17.3301L12.6699 17.3301L12.6699 9.33398L15.334 9.33398L15.334 17.3301L16.6641 17.3301L16.6641 9.33398L19.3281 9.33398L19.3281 17.3301L19.9434 17.3301C20.1406 17.3301 20.3047 17.3945 20.4473 17.5273C20.5898 17.6602 20.6621 17.8184 20.6621 17.998L20.6621 17.998Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<rect id="容器 1929" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="合并" d="M4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7ZM3 9.73244C2.4022 9.38663 2 8.74028 2 8C2 7.25972 2.4022 6.61337 3 6.26756L3 5C3 4.44772 3.44772 4 4 4C4.55228 4 5 4.44772 5 5L5 6.26756C5.5978 6.61337 6 7.25972 6 8C6 8.74028 5.5978 9.38663 5 9.73244L5 14.2676C5.5978 14.6134 6 15.2597 6 16C6 16.7403 5.5978 17.3866 5 17.7324L5 19C5 19.5523 4.55228 20 4 20C3.44772 20 3 19.5523 3 19L3 17.7324C2.4022 17.3866 2 16.7403 2 16C2 15.2597 2.4022 14.6134 3 14.2676L3 9.73244ZM4 17C4.55228 17 5 16.5523 5 16C5 15.4477 4.55228 15 4 15C3.44772 15 3 15.4477 3 16C3 16.5523 3.44772 17 4 17ZM22 6C22 5.44772 21.5523 5 21 5L9 5C8.44772 5 8 5.44772 8 6L8 10C8 10.5523 8.44772 11 9 11L21 11C21.5523 11 22 10.5523 22 10L22 6ZM22 14C22 13.4477 21.5523 13 21 13L9 13C8.44772 13 8 13.4477 8 14L8 18C8 18.5523 8.44772 19 9 19L21 19C21.5523 19 22 18.5523 22 18L22 14Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ a7445bfb
......@@ -483,6 +483,8 @@ const handleClickToDetail = () => {
};
const handleClickCardToDetail = (id, name) => {
// console.log('id',id);
window.sessionStorage.setItem("curTabName", name);
const route = router.resolve({
path: "/marketAccessLayout",
......@@ -2379,6 +2381,7 @@ onMounted(async () => {
.box8 {
width: 521px;
height: 460px;
.box-header-right {
height: 48px;
display: flex;
......@@ -2461,6 +2464,7 @@ onMounted(async () => {
margin: 0 auto;
margin-top: 34px;
display: flex;
gap: 16px;
.left {
width: 360px;
......@@ -2536,9 +2540,7 @@ onMounted(async () => {
}
.right {
margin-left: 16px;
width: 1224px;
// min-height: 700px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
......@@ -2547,12 +2549,12 @@ onMounted(async () => {
.right-header {
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 22px;
height: 18px;
width: 24px;
height: 24px;
margin-top: 13px;
margin-left: 19px;
img {
......@@ -2563,6 +2565,7 @@ onMounted(async () => {
.title {
height: 26px;
margin-top: 11px;
margin-left: 19px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
......@@ -2576,24 +2579,17 @@ onMounted(async () => {
}
.right-main {
padding-top: 18px;
// min-height: 586px;
box-sizing: border-box;
padding: 18px 27px 0 24px;
height: calc(100% - 108px);
// max-height: 1540px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
// height: 780px;
.right-main-item {
height: 154px;
// min-height: 94px;
display: flex;
cursor: pointer;
height: max-content;
// &:hover {
// background: var(--color-bg-hover) !important;
// }
.item-left {
width: 100px;
height: 48px;
......@@ -2615,7 +2611,6 @@ onMounted(async () => {
.item-center {
width: 30px;
// height: 154px;
.icon {
width: 30px;
height: 30px;
......@@ -2641,6 +2636,13 @@ onMounted(async () => {
.item-right {
padding-left: 20px;
&:hover {
.item-right-header>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.item-right-header {
height: 26px;
display: flex;
......@@ -2694,11 +2696,6 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: var(--color-main-active);
text-decoration: underline;
}
}
.status {
......
src/views/marketAccessRestrictions/marketAccessLayout/case/337/index.vue
浏览文件 @ a7445bfb
......@@ -3,14 +3,12 @@
<div class="wrapper-header">
<div class="header-filters">
<div class="search-box">
<el-input
v-model="searchText"
style="width: 300px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<el-input v-model="searchText" style="width: 360px; height: 32px" placeholder="搜索调查案件"
@keyup.enter="handleSearch">
<template #prefix>
<el-icon><Search /></el-icon>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
</div>
......@@ -29,14 +27,14 @@
</div>
</div>
<div class="select-box">
<el-select v-model="isSort" placeholder="发布时间" style="width: 166px">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img src="@/assets/icons/jiangxu1.png" style="width: 14px; height: 14px" />
</div>
</template>
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="isSort" placeholder="发布时间" style="width: 166px">
<template #prefix>
<div style="display: flex; align-items: center; height: 100%">
<img src="@/assets/icons/jiangxu1.png" style="width: 14px; height: 14px" />
</div>
</template>
<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="wrapper-main">
......@@ -48,28 +46,13 @@
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="left-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAllAreas"
:indeterminate="isIndeterminateAreas"
@change="handleCheckAllAreasChange"
class="filter-checkbox"
>
全部领域
<el-checkbox-group class="checkbox-group" v-model="checkedAreaList" @change="handleCheckedAreasChange">
<el-checkbox class="filter-checkbox" label="全部领域"> 全部领域 </el-checkbox>
<el-checkbox v-for="area in surveyAreaList" :key="area.id" :label="area.id" class="filter-checkbox">
{{ area.name }}
</el-checkbox>
<div class="area-grid">
<el-checkbox
v-for="area in surveyAreaList"
:key="area.id"
v-model="checkedAreaList"
:label="area.id"
class="filter-checkbox"
@change="handleCheckedAreasChange"
>
{{ area.name }}
</el-checkbox>
</div>
</div>
</el-checkbox-group>
</div>
</div>
<!-- 发布时间 -->
......@@ -79,27 +62,11 @@
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="left-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAllYears"
:indeterminate="isIndeterminateYears"
@change="handleCheckAllYearsChange"
class="filter-checkbox"
>
全部时间
<el-checkbox-group class="checkbox-group" v-model="checkedSurveyYears" @change="handleCheckedYearsChange">
<el-checkbox class="filter-checkbox" label="全部时间"> 全部时间 </el-checkbox>
<el-checkbox v-for="year in displayedYearList" :key="year.id" :label="year.id" class="filter-checkbox">
{{ year.name }}
</el-checkbox>
<div class="year-grid">
<el-checkbox
v-for="year in displayedYearList"
:key="year.id"
v-model="checkedSurveyYears"
:label="year.id"
class="filter-checkbox"
@change="handleCheckedYearsChange"
>
{{ year.name }}
</el-checkbox>
</div>
<div v-if="surveyYearList.length > 6" class="expand-btn" @click="isYearExpanded = !isYearExpanded">
{{ isYearExpanded ? "收起" : "更早" }}
<el-icon>
......@@ -107,7 +74,7 @@
<ArrowDown v-else />
</el-icon>
</div>
</div>
</el-checkbox-group>
</div>
</div>
<!-- 受调查国家/地区 -->
......@@ -117,47 +84,29 @@
<div class="title">{{ "受调查国家/地区" }}</div>
</div>
<div class="left-main">
<div class="checkbox-group">
<el-checkbox
v-model="checkAllCountries"
:indeterminate="isIndeterminateCountries"
@change="handleCheckAllCountriesChange"
class="filter-checkbox"
>
全部
<el-checkbox-group class="checkbox-group" v-model="checkedCountryList"
@change="handleCheckedCountriesChange">
<el-checkbox class="filter-checkbox" label="全部"> 全部 </el-checkbox>
<el-checkbox v-for="area in surveyCountryList" :key="area.id" :label="area.id" class="filter-checkbox">
{{ area.name }}
</el-checkbox>
<div class="country-grid">
<el-checkbox
v-for="country in surveyCountryList"
:key="country.id"
v-model="checkedCountryList"
:label="country.id"
class="filter-checkbox"
@change="handleCheckedCountriesChange"
>
{{ country.name }}
</el-checkbox>
</div>
</div>
</el-checkbox-group>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<!-- <div class="right-header">
<div class="icon">
<img src="./assets/images/right-header-icon.png" alt="" />
</div>
<div class="title">{{ "337调查历程" }}</div>
</div>
<div class="right-main" v-loading="listLoading">
<div
class="timeline-item"
v-for="(item, index) in surveyInfoList"
:key="index"
@click="handleToSingleCase(item)"
>
<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
@click="handleToSingleCase(item)">
<div class="timeline-date">
<div class="date-text">{{ item.timeZH || item.time }}</div>
<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
<div class="date-text">{{ item.timeZH.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
......@@ -181,9 +130,6 @@
</div>
<div class="card-footer">
<div class="footer-left-tags">
<!-- <div class="area-tag" v-for="(area, idx) in item.areaList" :key="idx">
{{ area }}
</div> -->
<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
</div>
<div class="footer-right-flags">
......@@ -200,18 +146,64 @@
{{ `共${totalDiscussNum}项调查` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDiscussNum"
/>
<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
background layout="prev, pager, next" :total="totalDiscussNum" />
</div>
</div> -->
<AnalysisBox title="337调查历程" width="1224px">
<div class="right-main" v-loading="listLoading">
<div class="timeline-item" v-for="(item, index) in surveyInfoList" :key="index"
@click="handleToSingleCase(item)">
<div class="timeline-date">
<div class="date-text">{{ item.timeZH.slice(0,4) }}</div>
<div class="date-text">{{ item.timeZH.slice(5) }}</div>
</div>
<div class="timeline-line-box">
<div class="timeline-icon">
<img v-if="item.sortImageUrl" :src="item.sortImageUrl" alt="" />
<div v-else class="default-dot"></div>
</div>
<div class="timeline-line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="timeline-content-card">
<div class="card-header">
<div class="tag-box">
<div class="tag-337">{{ item.tag }}</div>
<div class="title">{{ item.title }}</div>
</div>
<div class="status" :class="{ 'status-active': true }">
<span class="dot">•</span> {{ item.status }}
</div>
</div>
<div class="card-body">
{{ item.content }}
</div>
<div class="card-footer">
<div class="footer-left-tags">
<AreaTag v-for="(area, idx) in item.areaList" :key="idx" :tagName="area"></AreaTag>
</div>
<div class="footer-right-flags">
<div class="flag-icon" v-for="(flag, fidx) in item.countryList" :key="fidx">
<img :src="flag" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ `共${totalDiscussNum}项调查` }}
</div>
<div class="footer-right">
<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
background layout="prev, pager, next" :total="totalDiscussNum" />
</div>
</div>
</AnalysisBox>
</div>
</div>
<SearchBox placeholder="请输入搜索条件" v-model:search-text="searchData" @search="handleSearch" />
</div>
</template>
......@@ -222,6 +214,15 @@ import { useRoute } from "vue-router";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getSearchAllArea, getSearchAllYear, getSurveyList, getSearchAllCountry } from "@/api/marketAccessRestrictions";
import AnalysisBox from "@/components/base/BoxBackground/AnalysisBox.vue"
import SearchBox from "@/components/base/SearchBox/index.vue"
const searchData = ref('你好啊')
const handleSearch1 = () => {
console.log(searchData.value)
}
const route = useRoute();
// 顶部过滤项
......@@ -245,26 +246,24 @@ const releaseTimeList = ref([
// 科技领域过滤
const surveyAreaList = ref([]);
const checkedAreaList = ref([]);
const checkAllAreas = ref(true);
const isIndeterminateAreas = ref(false);
const handleCheckAllAreasChange = val => {
checkedAreaList.value = val ? surveyAreaList.value.map(a => a.id) : [];
isIndeterminateAreas.value = false;
};
const handleCheckedAreasChange = value => {
const checkedCount = value.length;
checkAllAreas.value = checkedCount === surveyAreaList.value.length;
isIndeterminateAreas.value = checkedCount > 0 && checkedCount < surveyAreaList.value.length;
const checkedAreaList = ref(['全部领域']);
const handleCheckedAreasChange = val => {
if (val.includes("全部领域") && val.length > 1) {
if (val[val.length - 1] === "全部领域") {
checkedAreaList.value = ["全部领域"];
} else {
checkedAreaList.value = val.filter(item => item !== "全部领域");
}
} else if (val.length === 0) {
checkedAreaList.value = ["全部领域"];
}
};
// 发布时间过滤
const surveyYearList = ref([]);
const checkedSurveyYears = ref([]);
const checkAllYears = ref(true);
const isIndeterminateYears = ref(false);
const checkedSurveyYears = ref(['全部时间']);
const isYearExpanded = ref(false);
const displayedYearList = computed(() => {
......@@ -272,32 +271,36 @@ const displayedYearList = computed(() => {
return surveyYearList.value.slice(0, 6);
});
const handleCheckAllYearsChange = val => {
checkedSurveyYears.value = val ? surveyYearList.value.map(y => y.id) : [];
isIndeterminateYears.value = false;
};
const handleCheckedYearsChange = value => {
const checkedCount = value.length;
checkAllYears.value = checkedCount === surveyYearList.value.length;
isIndeterminateYears.value = checkedCount > 0 && checkedCount < surveyYearList.value.length;
// const checkedCount = value.length;
// checkAllYears.value = checkedCount === surveyYearList.value.length;
// isIndeterminateYears.value = checkedCount > 0 && checkedCount < surveyYearList.value.length;
if (val.includes("全部时间") && val.length > 1) {
if (val[val.length - 1] === "全部时间") {
checkedSurveyYears.value = ["全部时间"];
} else {
checkedSurveyYears.value = val.filter(item => item !== "全部时间");
}
} else if (val.length === 0) {
checkedSurveyYears.value = ["全部时间"];
}
};
// 受调查国家/地区过滤
const surveyCountryList = ref([]);
const checkedCountryList = ref([]);
const checkAllCountries = ref(true);
const isIndeterminateCountries = ref(false);
const checkedCountryList = ref(['全部']);
const handleCheckAllCountriesChange = val => {
checkedCountryList.value = val ? surveyCountryList.value.map(c => c.id) : [];
isIndeterminateCountries.value = false;
};
const handleCheckedCountriesChange = value => {
const checkedCount = value.length;
checkAllCountries.value = checkedCount === surveyCountryList.value.length;
isIndeterminateCountries.value = checkedCount > 0 && checkedCount < surveyCountryList.value.length;
const handleCheckedCountriesChange = val => {
if (val.includes("全部") && val.length > 1) {
if (val[val.length - 1] === "全部") {
checkedCountryList.value = ["全部"];
} else {
checkedCountryList.value = val.filter(item => item !== "全部");
}
} else if (val.length === 0) {
checkedCountryList.value = ["全部"];
}
};
// 数据列表
......@@ -315,11 +318,11 @@ const handleFetchSurveyList = async () => {
currentPage: currentPage.value - 1,
pageSize: pageSize.value,
sortCode: "337",
publishYear: checkAllYears.value ? "" : checkedSurveyYears.value.toString(),
Area: checkAllAreas.value ? "" : checkedAreaList.value.toString(),
searchCountry: checkAllCountries.value ? "" : checkedCountryList.value.toString(),
caseStatus: filterStage.value,
keywords: searchText.value,
publishYear: checkedSurveyYears.value[0] === '全部时间' ? null : checkedSurveyYears.value.toString(),
Area: checkedAreaList.value[0] === '全部领域' ? null : checkedAreaList.value.toString(),
searchCountry: checkedCountryList.value[0] === '全部' ? null : checkedCountryList.value.toString(),
caseStatus: filterStage.value ? filterStage.value : null,
keywords: searchText.value ? searchText.value : null,
sortField: "date",
sortOrder: isSort.value ? "asc" : "desc"
};
......@@ -327,16 +330,16 @@ const handleFetchSurveyList = async () => {
if (res.code === 200 && res.data) {
surveyInfoList.value = res.data.content.map(item => {
return {
time: item.SEARCHDATE,
timeZH: item.SEARCHDATEZH,
title: item.SEARCHNAME,
content: item.SEARCHDESC || item.SEARCHNAME,
status: item.CASESTATUS || "调查中",
time: item.searchdate,
timeZH: item.searchdatezh,
title: item.searchname,
content: item.content,
status: item.casestatus,
areaList: item.searchArea || [],
countryList: item.countryImage || [],
tag: item.SORTCODE || "337",
id: item.SEARCHID,
sortImageUrl: item.SORTIMAGEURL
tag: item.sortcode || "337",
id: item.searchid,
sortImageUrl: item.sortimageurl
};
});
totalDiscussNum.value = res.data.totalElements || 0;
......@@ -389,7 +392,7 @@ const handleGetSearchAllArea = async () => {
}));
handleCheckAllAreasChange(true);
}
} catch (error) {}
} catch (error) { }
};
const handleGetSearchAllYear = async () => {
......@@ -401,9 +404,8 @@ const handleGetSearchAllYear = async () => {
name: item + "年",
id: item
}));
handleCheckAllYearsChange(true);
}
} catch (error) {}
} catch (error) { }
};
const handleGetSearchAllCountry = async () => {
......@@ -414,9 +416,8 @@ const handleGetSearchAllCountry = async () => {
name: item.COUNTRYNAME,
id: item.COUNTRYID
}));
handleCheckAllCountriesChange(true);
}
} catch (error) {}
} catch (error) { }
};
onMounted(async () => {
......@@ -444,19 +445,22 @@ onMounted(async () => {
display: flex;
gap: 16px;
align-items: center;
.search-box{
:deep(.el-input__wrapper) {
background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
}
.search-box {
:deep(.el-input__wrapper) {
background-color: #fff;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
}
}
.dropdown-filters {
display: flex;
gap: 12px;
.filter-select {
width: 140px;
:deep(.el-input__wrapper) {
background-color: #fff;
}
......@@ -475,12 +479,15 @@ onMounted(async () => {
background: #fff;
cursor: pointer;
padding: 0 12px;
.text {
font-size: 14px;
color: #5f656c;
}
.icon2 {
width: 10px;
img {
width: 100%;
}
......@@ -494,7 +501,7 @@ onMounted(async () => {
justify-content: space-between;
.left {
width: 300px;
width: 360px;
min-height: 560px;
height: fit-content;
padding-bottom: 20px;
......@@ -504,15 +511,18 @@ onMounted(async () => {
.left-box {
margin-top: 17px;
.left-header {
display: flex;
align-items: center;
.icon {
width: 8px;
height: 16px;
background: var(--color-main-active);
border-radius: 0 2px 2px 0;
}
.title {
margin-left: 17px;
color: var(--color-main-active);
......@@ -524,25 +534,27 @@ onMounted(async () => {
.checkbox-group {
padding: 10px 0 0 25px;
display: flex;
flex-direction: column;
.area-grid,
.year-grid,
.country-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
// display: flex;
// flex-direction: column;
// .area-grid,
// .year-grid,
// .country-grid {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: 4px;
// }
.filter-checkbox {
margin-bottom: 8px;
height: 32px;
:deep(.el-checkbox__label) {
font-size: 16px;
color: #5f656c;
}
}
.expand-btn {
color: var(--color-main-active);
font-size: 14px;
......@@ -550,6 +562,7 @@ onMounted(async () => {
display: flex;
align-items: center;
margin-top: 4px;
.el-icon {
margin-left: 4px;
}
......@@ -558,25 +571,27 @@ onMounted(async () => {
}
.right {
width: 1284px;
min-height: 700px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: #fff;
padding-bottom: 20px;
width: 1224px;
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: #fff;
// padding-bottom: 20px;
.right-header {
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid #eaeeef;
// border-bottom: 1px solid #eaeeef;
padding: 0 20px;
.icon {
width: 22px;
img {
width: 100%;
}
}
.title {
margin-left: 12px;
font-size: 20px;
......@@ -586,26 +601,24 @@ onMounted(async () => {
}
.right-main {
padding: 30px 40px;
padding: 18px 27px 0 24px;
border-top: 1px solid var(--bg-black-5);
.timeline-item {
display: flex;
cursor: pointer;
&:hover {
.timeline-content-card {
background-color: #f5f7fa;
}
}
.timeline-date {
width: 100px;
text-align: right;
padding-right: 20px;
.date-text {
height: 24px;
font-size: 16px;
font-weight: 700;
color: var(--color-main-active);
line-height: 24px;
letter-spacing: 1px;
}
}
......@@ -615,6 +628,7 @@ onMounted(async () => {
flex-direction: column;
align-items: center;
position: relative;
.timeline-icon {
width: 32px;
height: 32px;
......@@ -623,10 +637,12 @@ onMounted(async () => {
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
.default-dot {
width: 12px;
height: 12px;
......@@ -634,6 +650,7 @@ onMounted(async () => {
background: orange;
}
}
.timeline-line {
width: 2px;
flex: 1;
......@@ -645,20 +662,33 @@ onMounted(async () => {
.timeline-content-card {
flex: 1;
border-radius: 8px;
padding: 16px 20px;
padding: 0 20px;
margin-left: 10px;
margin-bottom: 24px;
transition: all 0.3s;
&:hover {
.card-header>.tag-box>.title {
color: var(--color-main-active);
text-decoration: underline;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.tag-box {
display: flex;
align-items: center;
gap: 12px;
.tag-337 {
padding: 2px 10px;
border: 1px solid #91caff;
......@@ -668,19 +698,25 @@ onMounted(async () => {
font-weight: 700;
font-size: 16px;
}
.title {
font-size: 18px;
font-weight: 700;
color: #3b414b;
}
}
.status {
font-size: 16px;
color: #84888e;
.dot {
margin-right: 4px;
}
}
.status-active {
color: var(--color-main-active);
}
......@@ -700,12 +736,13 @@ onMounted(async () => {
.card-footer {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
.footer-left-tags {
display: flex;
gap: 8px;
.area-tag {
padding: 2px 12px;
background: #e6f7ff;
......@@ -719,12 +756,14 @@ onMounted(async () => {
.footer-right-flags {
display: flex;
gap: 4px;
.flag-icon {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #eee;
img {
width: 100%;
height: 100%;
......@@ -743,8 +782,8 @@ onMounted(async () => {
justify-content: space-between;
align-items: center;
padding: 0 40px;
margin-top: 20px;
border-top: 1px solid rgba(234, 236, 238, 1);
.footer-left {
font-size: 14px;
color: #5f656c;
......@@ -753,4 +792,8 @@ onMounted(async () => {
}
}
}
.filter-checkbox {
width: 130px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论