提交 893053c8 authored 作者: coderBryanFu's avatar coderBryanFu

fix:概览页打压遏制时间线模块修改

上级 e811d74d
...@@ -167,3 +167,13 @@ ...@@ -167,3 +167,13 @@
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 12px; font-size: 12px;
} }
.main-color{
color: rgb(5, 95, 194);
}
// 业务主色 高亮背景
.color-bg-active{
background: rgb(246, 250, 255);
}
\ No newline at end of file
...@@ -26,7 +26,6 @@ ...@@ -26,7 +26,6 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
// import HeaderMenu from "@/components/headerMenu.vue";
import RiskToday from './component/riskToday/index.vue' import RiskToday from './component/riskToday/index.vue'
import ScienceNews from './component/scienceNews/index.vue' import ScienceNews from './component/scienceNews/index.vue'
const input = ref('') const input = ref('')
......
<template> <template>
<div style="position: relative;"> <div style="position: relative;">
<div ref="chartRef" style="height: 620px; width: 1640px" @click="handleClick"></div> <div ref="chartRef" style="height: 620px; width: 1640px" @click="handleClick"></div>
<div <!-- <div
v-show="tooltipVisible" v-show="tooltipVisible"
class="custom-tooltip background-as-card" class="custom-tooltip background-as-card"
:style="{ left: mouseX + 'px', top: mouseY + 'px', cursor: dragging ? 'move' : 'default' }" :style="{ left: mouseX + 'px', top: mouseY + 'px', cursor: dragging ? 'move' : 'default' }"
...@@ -36,12 +36,46 @@ ...@@ -36,12 +36,46 @@
<div class="item-footer"></div> <div class="item-footer"></div>
</div> </div>
</div> </div>
</div> </div> -->
<el-dialog v-model="tooltipVisible" width="690px">
<div class="tooltip-header flex-display">
<div class="tooltip-header-left text-title-3-bold">{{ currentDate }}</div>
<div class="tooltip-header-right text-title-3-show">{{ `${currentOrgNum}个部门/${currentDetailList.length}项举措` }}
</div>
</div>
<div class="tooltip-main">
<div class="tooltip-main-item" v-for="item, index in currentDetailList" :key="index">
<div class="item-header flex-display">
<div class="item-header-left flex-display">
<div class="logo">
<img style="width:100%; height: 100%" :src="item.orgLogoUrl" alt="logo">
</div>
<div class="name text-bold">{{ item.orgName }}</div>
<div class="status">
<div class="status-on text-tip-2" v-if="item.stauts === 2">{{ '已落实' }}</div>
<div class="status-off text-tip-2" v-else>{{ '未落实' }}</div>
</div>
</div>
<div class="item-header-right flex-display">
<AreaTag v-for="tag, idx in item.techDomainList.slice(0, 3)" :key="idx" :tagName="tag"></AreaTag>
</div>
</div>
<div class="item-content text-compact">{{ item.name }}</div>
<div class="item-footer color-bg-active flex-display" @click="handleToDetail(item)">
<div class="footer-text text-tip-2 main-color">{{ item.administrativeOrderInfoTitle }}</div>
<div class="footer-arrow">
<img src="./right-arrow.svg" alt="">
</div>
</div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'; import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
import router from "@/router";
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { CustomChart } from 'echarts/charts'; import { CustomChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, CalendarComponent } from 'echarts/components'; import { TitleComponent, TooltipComponent, CalendarComponent } from 'echarts/components';
...@@ -104,6 +138,7 @@ const mouseX = ref(0) ...@@ -104,6 +138,7 @@ const mouseX = ref(0)
const mouseY = ref(0) const mouseY = ref(0)
const currentDate = ref('') const currentDate = ref('')
const currentDetailList = ref([]) const currentDetailList = ref([])
const currentOrgNum = ref(0)
// // 鼠标移动,记录位置 // // 鼠标移动,记录位置
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
...@@ -183,8 +218,8 @@ const { dataMap, monthStats } = buildDataMap(props.timelineData); ...@@ -183,8 +218,8 @@ const { dataMap, monthStats } = buildDataMap(props.timelineData);
function getOption() { function getOption() {
const calendarWidthPercent = 30; const calendarWidthPercent = 33.3;
const gapPercent = (95 - (calendarWidthPercent * 3)) / 4; const gapPercent = (100 - (calendarWidthPercent * 3)) / 4;
// 计算所有天的最大 count // 计算所有天的最大 count
let maxCount = 0; let maxCount = 0;
...@@ -206,6 +241,7 @@ function getOption() { ...@@ -206,6 +241,7 @@ function getOption() {
const calendars = months.map((month, index) => ({ const calendars = months.map((month, index) => ({
top: 40, top: 40,
left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`, left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`,
// left: `${calendarWidthPercent * index - index * 82 / 1640 * 100}%`,
width: `${calendarWidthPercent}%`, width: `${calendarWidthPercent}%`,
range: month.format('YYYY-MM'), range: month.format('YYYY-MM'),
cellSize: ['auto', 82], cellSize: ['auto', 82],
...@@ -284,7 +320,7 @@ function getOption() { ...@@ -284,7 +320,7 @@ function getOption() {
const iconSize = 20; const iconSize = 20;
const iconGap = -5; const iconGap = -5;
const maxIcons = 3; const maxIcons = 3;
const displayLogos = item.logos.slice(0, maxIcons); const displayLogos = Array.from(new Set(item.logos)).slice(0, maxIcons);
const iconsY = y + 8; const iconsY = y + 8;
const iconsX = x + 8; const iconsX = x + 8;
...@@ -359,6 +395,14 @@ function getOption() { ...@@ -359,6 +395,14 @@ function getOption() {
}; };
} }
// 点击政令,跳转详情
const handleToDetail = (item) => {
const path = "/decreeLayout/overview/introduction";
const query = { id: item.orderId };
const route = router.resolve({ path, query });
window.open(route.href, "_blank");
}
onMounted(() => { onMounted(() => {
if (chartRef.value) { if (chartRef.value) {
chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' }); chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' });
...@@ -375,6 +419,9 @@ onMounted(() => { ...@@ -375,6 +419,9 @@ onMounted(() => {
if (list.length > 0) { if (list.length > 0) {
currentDate.value = date currentDate.value = date
currentDetailList.value = list currentDetailList.value = list
// 统计不同 orgName 的个数
const orgNames = new Set(list.map(item => item.orgName));
currentOrgNum.value = orgNames.size
tooltipVisible.value = true tooltipVisible.value = true
} else { } else {
tooltipVisible.value = false tooltipVisible.value = false
...@@ -480,4 +527,21 @@ onBeforeUnmount(() => { ...@@ -480,4 +527,21 @@ onBeforeUnmount(() => {
.item-header-right { .item-header-right {
gap: 8px; gap: 8px;
} }
.item-footer {
width: 622px;
height: 30px;
padding: 0 8px;
margin-top: 4px;
border-radius: 4px;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.footer-arrow {
width: 20px;
height: 20px;
}
</style> </style>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.000000" height="20.000000" fill="none" customFrame="#000000">
<rect id="容器 767" width="20.000000" height="20.000000" x="0.000000" y="0.000000" />
<circle id="椭圆 195" cx="10" cy="10" r="10" fill="rgb(231,243,255)" />
<path id="矩形 350" d="M5 9.5L13.5005 9.50017L13.501 10.4999L5.00042 10.4998L5 9.5Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
<path id="矢量 610" d="M10 6L14 10L10 14" stroke="rgb(5,95,194)" stroke-width="1.000000" />
</svg>
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
<div class="bottom-item"> <div class="bottom-item">
<div class="bottom-item-title"> <div class="bottom-item-title">
<img :src="icon4" alt="" /> <img :src="icon4" alt="" />
<span>美政府部门对我打压遏制时间线</span> <span>美政府部门对华打压遏制历程</span>
</div> </div>
<div class="bottom-item-select"> <div class="bottom-item-select">
<!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'"> <!-- <div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
......
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import router from '@/router' import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction' import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
......
...@@ -52,8 +52,6 @@ ...@@ -52,8 +52,6 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
import comTitle from "./common/comTitle.vue"; import comTitle from "./common/comTitle.vue";
import newData from "./components/dataNew/index.vue"; import newData from "./components/dataNew/index.vue";
import askPage from "./components/askPage/index.vue"; import askPage from "./components/askPage/index.vue";
......
...@@ -410,7 +410,7 @@ ...@@ -410,7 +410,7 @@
</template> </template>
<script setup> <script setup>
// import NewsList from "@/components/NewsList/NewsList.vue"; // import NewsList from "@/components/base/NewsList/index.vue";
import { onMounted, ref, computed, watch, nextTick } from "vue"; import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router"; import router from "@/router";
import { import {
......
...@@ -598,7 +598,7 @@ ...@@ -598,7 +598,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue"; import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
......
...@@ -477,7 +477,7 @@ import CustomContainer from "@/components/Container/index.vue"; ...@@ -477,7 +477,7 @@ import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue"; import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue"; import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue"; import CustomTitle from "./components/title.vue";
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import trumpAvatar from "@/assets/images/icon-trump.png"; import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png"; import elongAvatar from "@/assets/images/icon-elong.png";
......
...@@ -374,8 +374,8 @@ ...@@ -374,8 +374,8 @@
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue"; import RiskSignal from "@/components/base/RiskSignal/index.vue";
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import router from "@/router"; import router from "@/router";
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import { ref, onBeforeMount } from "vue"; import { ref, onBeforeMount } from "vue";
import router from "@/router" import router from "@/router"
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</template> </template>
<script setup> <script setup>
import NewsList from "@/components/NewsList/NewsList.vue"; import NewsList from "@/components/base/NewsList/index.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { import {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论