Skip to content

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

智库样式修改、删除智库首页悬浮显示、企业主页接口对接

上级 bea204f6
隐藏空白字符变更
内嵌 并排
正在显示 包含 539 行增加 和 130 行删除
src/api/companyPages/index.js
浏览文件 @ df5fccbc
...@@ -91,4 +91,35 @@ export function getSanctionList(params) { ...@@ -91,4 +91,35 @@ export function getSanctionList(params) {
}) })
} }
//被制裁情况:数据对比
export function getStudyList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getStudyList/${params}`,
})
}
//供应链:领域
export function getSupplyAreaList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getSupplyAreaList/${params}`,
})
}
//供应链:国家地区
export function getSupplyCountryList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getSupplyCountryList/${params}`,
})
}
//供应链:关系
export function getSupplyList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getSupplyList/${params.id}`,
params,
})
}
src/views/companyPages/component/SupplyChain.vue
浏览文件 @ df5fccbc
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
<!-- 右侧操作图标 --> <!-- 右侧操作图标 -->
<div class="action-icons"> <div class="action-icons">
<label class="checkbox-item" style="display: flex;align-items: center;"> <!-- <label class="checkbox-item" style="display: flex;align-items: center;">
<input type="checkbox" v-model="rule" /> <input type="checkbox" v-model="rule" />
<div style="width: 145px;"> 50%穿透规则影响</div> <div style="width: 145px;"> 50%穿透规则影响</div>
</label> </label> -->
<!-- 搜索框容器 --> <!-- 搜索框容器 -->
<el-input v-model="searchKeyword" style="height: 28px;width: 200px;" placeholder="搜索内容"> <el-input v-model="searchKeyword" style="height: 28px;width: 200px;" placeholder="搜索内容">
<template #suffix> <template #suffix>
...@@ -55,10 +55,14 @@ ...@@ -55,10 +55,14 @@
<div class="filter-section"> <div class="filter-section">
<h4 class="filter-title">领域</h4> <h4 class="filter-title">领域</h4>
<div class="checkbox-group"> <div class="checkbox-group">
<label v-for="(item, index) in domainFilters" :key="'domain-' + index" class="checkbox-item"> <el-checkbox-group v-model="selectedDomain" @change="handleAreaChange">
<el-checkbox :label="item.name + '(' + item.num + ')'" v-for="(item, index) in domainFilters"
:value="item.id" />
</el-checkbox-group>
<!-- <label v-for="(item, index) in domainFilters" :key="'domain-' + index" class="checkbox-item">
<input type="checkbox" v-model="item.checked" /> <input type="checkbox" v-model="item.checked" />
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</label> </label> -->
</div> </div>
</div> </div>
...@@ -66,10 +70,14 @@ ...@@ -66,10 +70,14 @@
<div class="filter-section country-filter"> <div class="filter-section country-filter">
<h4 class="filter-title">国家/地区</h4> <h4 class="filter-title">国家/地区</h4>
<div class="checkbox-group two-columns"> <div class="checkbox-group two-columns">
<label v-for="(item, index) in countryFilters" :key="'country-' + index" class="checkbox-item"> <el-checkbox-group v-model="selectedcountry" @change="handleCountryChange">
<el-checkbox :label="item.name + '(' + item.num + ')'" v-for="(item, index) in countryFilters"
:value="item.id" />
</el-checkbox-group>
<!-- <label v-for="(item, index) in countryFilters" :key="'country-' + index" class="checkbox-item">
<input type="checkbox" v-model="item.checked" /> <input type="checkbox" v-model="item.checked" />
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</label> </label> -->
</div> </div>
</div> </div>
...@@ -77,10 +85,10 @@ ...@@ -77,10 +85,10 @@
<div class="filter-section"> <div class="filter-section">
<h4 class="filter-title">上下游</h4> <h4 class="filter-title">上下游</h4>
<div class="checkbox-group"> <div class="checkbox-group">
<label v-for="(item, index) in upstreamFilters" :key="'upstream-' + index" class="checkbox-item"> <el-checkbox-group v-model="selectType" @change="handleTypeChange">
<input type="checkbox" v-model="item.checked" /> <el-checkbox label="上游" value="supply" />
<span>{{ item.label }}</span> <el-checkbox label="下游" value="customer" /> </el-checkbox-group>
</label>
</div> </div>
</div> </div>
</div> </div>
...@@ -93,28 +101,62 @@ ...@@ -93,28 +101,62 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import getGraphChart from '../js/graphChart.js' import getGraphChart from '../js/graphChart.js'
import { getSupplyAreaList, getSupplyCountryList, getSupplyList } from "@/api/companyPages/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
const rule = ref('true')// const rule = ref('true')//
const searchKeyword = ref('') const searchKeyword = ref('')
const domainFilters = ref([ const domainFilters = ref([
{ label: '工业软件领域 (36)', checked: true }, // { label: '工业软件领域 (36)', checked: true },
{ label: '供应链与物流服务领域 (36)', checked: false }, // { label: '供应链与物流服务领域 (36)', checked: false },
{ label: '人工智能领域 (56)', checked: false }, // { label: '人工智能领域 (56)', checked: false },
{ label: '半导体与集成电路领域 (19)', checked: false }, // { label: '半导体与集成电路领域 (19)', checked: false },
{ label: '航天遥感与量子技术领域 (51)', checked: false } // { label: '航天遥感与量子技术领域 (51)', checked: false }
]) ])
const selectedDomain = ref([])
const handleGetSupplyAreaList = async () => {
try {
const res = await getSupplyAreaList(router.currentRoute._value.params.id);
console.log("领域", res);
if (res.code === 200 && res.data) {
domainFilters.value = res.data
}
} catch (error) {
console.error("获取领域error", error);
}
};
const handleAreaChange = val => {
handleGetSupplyList()
};
const countryFilters = ref([ const countryFilters = ref([
{ label: '中国 (36)', checked: false }, // { label: '中国 (36)', checked: false },
{ label: '美国 (36)', checked: false }, // { label: '美国 (36)', checked: false },
{ label: '韩国 (56)', checked: false }, // { label: '韩国 (56)', checked: false },
{ label: '日本 (19)', checked: false }, // { label: '日本 (19)', checked: false },
{ label: '中国台湾 (51)', checked: false }, // { label: '中国台湾 (51)', checked: false },
{ label: '德国 (51)', checked: false }, // { label: '德国 (51)', checked: false },
{ label: '荷兰 (12)', checked: false }, // { label: '荷兰 (12)', checked: false },
{ label: '澳大利亚 (4)', checked: false } // { label: '澳大利亚 (4)', checked: false }
]) ])
const selectedcountry = ref([])
const handleGetSupplyCountryList = async () => {
try {
const res = await getSupplyCountryList(router.currentRoute._value.params.id);
console.log("领域", res);
if (res.code === 200 && res.data) {
countryFilters.value = res.data
}
} catch (error) {
console.error("获取领域error", error);
}
};
const handleCountryChange = val => {
handleGetSupplyList()
};
const upstreamFilters = ref([ const upstreamFilters = ref([
{ label: '核心企业 (36)', checked: false }, { label: '核心企业 (36)', checked: false },
{ label: '控股子公司 (36)', checked: false }, { label: '控股子公司 (36)', checked: false },
...@@ -279,11 +321,61 @@ const setChart = (option, chartId) => { ...@@ -279,11 +321,61 @@ const setChart = (option, chartId) => {
chart.setOption(option) chart.setOption(option)
return chart return chart
} }
const selectType = ref([])
const handleTypeChange = val => {
handleGetSupplyList()
};
const handleGetSupplyList = async () => {
try {
let params = {
arealist: selectedDomain.value ? selectedDomain.value.join(",") : null,
countrylist: selectedcountry.value ? selectedcountry.value.join(",") : null,
type: selectType.value.length === 2 ? 'all' : selectType.value ? selectType.value : null,
id: router.currentRoute._value.params.id
}
const res = await getSupplyList(params);
console.log("关系", res);
if (res.code === 200 && res.data) {
// 提取所有公司名称
const allCompanies = new Set(res.data.flatMap(item => [item.orgName, item.otherOrgName]));
const companyMap = {};
let id = 0;
// 创建公司名称到ID的映射
allCompanies.forEach(company => {
companyMap[company] = id++;
});
// 创建nodes数组
const nodes = Array.from(allCompanies, (company, index) => ({
id: index,
name: company,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}` // 假设CompanyImg是一个图片路径变量
}));
// 创建links数组
const links = res.data.map(item => ({
source: companyMap[item.orgName],
target: companyMap[item.otherOrgName]
}));
nodes.value = nodes
links.value = links
const graphOption = getGraphChart(nodes.value, links.value)
setChart(graphOption, "graphChart")
}
} catch (error) {
console.error("获取关系error", error);
}
};
onMounted(() => { onMounted(() => {
// 假设你有 getGraphChart 函数 handleGetSupplyAreaList()
const graphOption = getGraphChart(nodes.value, links.value) handleGetSupplyCountryList()
setChart(graphOption, "graphChart") handleGetSupplyList()
// 临时占位：防止报错 // 临时占位：防止报错
// const placeholderOption = { // const placeholderOption = {
......
src/views/companyPages/component/process.vue
浏览文件 @ df5fccbc
<template> <template>
<div class="chart-container"> <div class="chart-container">
<div v-for="(item, index) in chartData" :key="index" class="chart-card"> <div v-for="(item, index) in rawData" :key="index" class="chart-card">
<!-- 研发投入 --> <!-- 研发投入 -->
<div class="metric-section"> <div class="metric-section">
<div class="metric-header"> <div class="metric-header">
<span class="title">研发投入</span> <span class="title">研发投入</span>
<span class="growth-badge">+13.2%</span> <span class="growth-badge">{{ item.investmentGrowthRate + ' % ' }}</span>
</div> </div>
<!-- 制裁后 --> <!-- 制裁后 -->
<div class="bar-row"> <div class="bar-row">
<div class="year-label">{{ item.year }}</div> <div class="year-label">{{ item.year }}</div>
<div style="width: calc(100% - 66px);"> <div style="width: calc(100% - 66px);">
<div class="bar after" :style="{ width: getInvestmentWidth(item.investmentAfter) + '%' }"> <div class="bar after" :style="{ width: getInvestmentWidth(item.investmentAfter) + '%' }">
<div class="value-label">{{ formatInvestment(item.investmentAfter) }}</div> <div class="value-label">{{ item.investmentAfter + item.investmentUnit }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 制裁前 --> <!-- 制裁前 -->
<div class="bar-row"> <div class="bar-row">
<div class="year-label">{{ item.year }}</div> <div class="year-label">{{ item.previousYear }}</div>
<div style="width: calc(100% - 66px);"> <div style="width: calc(100% - 66px);">
<div class="bar before" :style="{ width: getInvestmentWidth(item.investmentBefore) + '%' }"> <div class="bar before" :style="{ width: getInvestmentWidth(item.investmentBefore) + '%' }">
<div class="value-label">{{ formatInvestment(item.investmentBefore) }}</div> <div class="value-label">{{ item.investmentBefore + item.investmentUnit }}</div>
</div> </div>
</div> </div>
...@@ -33,23 +33,23 @@ ...@@ -33,23 +33,23 @@
<div class="metric-section"> <div class="metric-section">
<div class="metric-header"> <div class="metric-header">
<span class="title">研发人员</span> <span class="title">研发人员</span>
<span class="growth-badge">+13.2%</span> <span class="growth-badge">{{ item.staffGrowthRate + '% ' }}</span>
</div> </div>
<!-- 制裁后 --> <!-- 制裁后 -->
<div class="bar-row"> <div class="bar-row">
<div class="year-label">{{ item.year }}</div> <div class="year-label">{{ item.year }}</div>
<div style="width: calc(100% - 66px);"> <div style="width: calc(100% - 66px);">
<div class="bar after" :style="{ width: getStaffWidth(item.staffAfter) + '%' }"> <div class="bar after" :style="{ width: getStaffWidth(item.staffAfter) + '%' }">
<div class="value-label">{{ formatStaff(item.staffAfter) }}</div> <div class="value-label">{{ item.staffAfter + item.staffmentUnit }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 制裁前 --> <!-- 制裁前 -->
<div class="bar-row"> <div class="bar-row">
<div class="year-label">{{ item.year }}</div> <div class="year-label">{{ item.previousYear }}</div>
<div style="width: calc(100% - 66px);"> <div style="width: calc(100% - 66px);">
<div class="bar before" :style="{ width: getStaffWidth(item.staffBefore) + '%' }"> <div class="bar before" :style="{ width: getStaffWidth(item.staffBefore) + '%' }">
<div class="value-label">{{ formatStaff(item.staffBefore) }}</div> <div class="value-label">{{ item.staffBefore + item.staffmentUnit }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -71,22 +71,71 @@ ...@@ -71,22 +71,71 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { useRouter } from "vue-router";
import { getStudyList } from "@/api/companyPages/index.js";
const router = useRouter();
// 模拟从 JSON 导入（实际可替换为 import data from './rdData.json'） // 模拟从 JSON 导入（实际可替换为 import data from './rdData.json'）
const rawData = [ const rawData = ref([
{ year: "2019", investmentBefore: 1.01, investmentAfter: 1.37, staffBefore: 80000, staffAfter: 96000 }, // { year: "2019", investmentBefore: 1.01, investmentAfter: 1.37, staffBefore: 80000, staffAfter: 96000 },
{ year: "2020", investmentBefore: 1.15, investmentAfter: 1.52, staffBefore: 85000, staffAfter: 102000 }, // { year: "2020", investmentBefore: 1.15, investmentAfter: 1.52, staffBefore: 85000, staffAfter: 102000 },
{ year: "2021", investmentBefore: 1.20, investmentAfter: 1.68, staffBefore: 90000, staffAfter: 110000 }, // { year: "2021", investmentBefore: 1.20, investmentAfter: 1.68, staffBefore: 90000, staffAfter: 110000 },
{ year: "2022", investmentBefore: 1.25, investmentAfter: 1.75, staffBefore: 92000, staffAfter: 115000 }, // { year: "2022", investmentBefore: 1.25, investmentAfter: 1.75, staffBefore: 92000, staffAfter: 115000 },
{ year: "2023", investmentBefore: 1.30, investmentAfter: 1.85, staffBefore: 95000, staffAfter: 120000 } // { year: "2023", investmentBefore: 1.30, investmentAfter: 1.85, staffBefore: 95000, staffAfter: 120000 }
]; ])
const handleGetStudyList = async () => {
try {
const res = await getStudyList(router.currentRoute._value.params.id);
console.log("被制裁情况:数据对比", res);
if (res.code === 200 && res.data) {
// 创建一个映射对象，用于存储分组后的数据
const groupedData = {};
res.data.forEach(item => {
const key = `${item.year}-${item.previousYear}`;
if (!groupedData[key]) {
groupedData[key] = {
year: item.year,
previousYear: item.previousYear,
investmentAfter: 0,
investmentBefore: 0,
investmentGrowthRate: 0,
staffAfter: 0,
staffBefore: 0,
staffGrowthRate: 0
};
}
if (item.type === "研发投入") {
groupedData[key].investmentAfter = item.currentValue;
groupedData[key].investmentBefore = item.previousValue;
groupedData[key].investmentGrowthRate = item.growthRate;
groupedData[key].investmentUnit = item.unit;
} else if (item.type === "研发人员") {
groupedData[key].staffAfter = item.currentValue;
groupedData[key].staffBefore = item.previousValue;
groupedData[key].staffGrowthRate = item.growthRate;
groupedData[key].staffmentUnit = item.unit;
}
});
// 将结果转换为数组
const result = Object.values(groupedData);
rawData.value = result
// rawData.value = result
console.log(rawData.value, 'rawData.valuerawData.value')
}
} catch (error) {
console.error("获取被制裁情况:数据对比error", error);
}
};
const chartData = ref(rawData);
// === 投入相关计算 === // === 投入相关计算 ===
const maxInvestment = computed(() => { const maxInvestment = computed(() => {
return Math.max(...chartData.value.flatMap(d => [d.investmentBefore, d.investmentAfter])); return Math.max(...rawData.value.flatMap(d => [d.investmentBefore, d.investmentAfter]));
}); });
function getInvestmentWidth(value) { function getInvestmentWidth(value) {
...@@ -99,7 +148,7 @@ function formatInvestment(value) { ...@@ -99,7 +148,7 @@ function formatInvestment(value) {
// === 人员相关计算 === // === 人员相关计算 ===
const maxStaff = computed(() => { const maxStaff = computed(() => {
return Math.max(...chartData.value.flatMap(d => [d.staffBefore, d.staffAfter])); return Math.max(...rawData.value.flatMap(d => [d.staffBefore, d.staffAfter]));
}); });
function getStaffWidth(value) { function getStaffWidth(value) {
...@@ -109,12 +158,17 @@ function getStaffWidth(value) { ...@@ -109,12 +158,17 @@ function getStaffWidth(value) {
function formatStaff(value) { function formatStaff(value) {
return Math.round(value / 1000) + 'k+'; return Math.round(value / 1000) + 'k+';
} }
onMounted(() => {
handleGetStudyList()
});
</script> </script>
<style scoped> <style scoped>
.chart-container { .chart-container {
display: flex; display: flex;
flex-wrap: wrap; /* flex-wrap: wrap; */
overflow: auto;
gap: 24px; gap: 24px;
padding: 24px; padding: 24px;
} }
......
src/views/thinkTank/ReportDetail/index.vue
浏览文件 @ df5fccbc
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="header"> <div class="header">
<div class="header-top"> <div class="header-top">
<div class="header-top-left"> <div class="header-top-left">
<img :src="thinkInfo.contentUrl" alt="" /> <img :src="thinkInfo.imageUrl" alt="" />
<div> <div>
<div class="title">{{ thinkInfo.name }}</div> <div class="title">{{ thinkInfo.name }}</div>
<div class="en-title"> <div class="en-title">
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ df5fccbc
...@@ -88,13 +88,13 @@ ...@@ -88,13 +88,13 @@
{{ val }} {{ val }}
</div> </div>
</div> </div>
<div class="more"> <!-- <div class="more">
<img src="@/assets/icons/open.png" alt="" /> <img src="@/assets/icons/open.png" alt="" />
</div> </div> -->
</div> </div>
</div> </div>
<div class="box3-main-footer"> <div class="box3-main-footer">
<div class="info">共{{ total }}条建议</div> <div class="info">共{{ total }}项</div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total" <el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" /> @current-change="handleCurrentChange" :current-page="currentPage" />
......
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ df5fccbc
...@@ -73,14 +73,26 @@ ...@@ -73,14 +73,26 @@
<img src="./images/search-icon.png" alt="" /> <img src="./images/search-icon.png" alt="" />
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()"> <el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px"> <div class="paixu-btn" @click="handleSwithSort()">
<div class="icon1">
<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div>
<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" /> <el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" /> <el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
</el-select> </el-select> -->
</div> </div>
</div> </div>
<div class="bottom-main"> <div class="bottom-main">
...@@ -145,7 +157,7 @@ ...@@ -145,7 +157,7 @@
</div> </div>
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="info">共{{ total }}篇政策建议</div> <div class="info">共{{ total }}项</div>
<div class="page-box"> <div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total" <el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" /> @current-change="handleCurrentChange" :current-page="currentPage" />
...@@ -547,7 +559,12 @@ const toDetaile = (id) => { ...@@ -547,7 +559,12 @@ const toDetaile = (id) => {
} }
const total = ref(0); const total = ref(0);
const sort = ref(true); const sort = ref(false);
const handleSwithSort = () => {
sort.value = !sort.value;
handleGetThinkPolicy()()
};
const currentPage = ref(1); const currentPage = ref(1);
// 处理页码改变事件 // 处理页码改变事件
const handleCurrentChange = page => { const handleCurrentChange = page => {
...@@ -738,6 +755,59 @@ onMounted(() => { ...@@ -738,6 +755,59 @@ onMounted(() => {
right: 33px; right: 33px;
width: 100px; width: 100px;
height: 28px; height: 28px;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
} }
} }
} }
...@@ -775,6 +845,60 @@ onMounted(() => { ...@@ -775,6 +845,60 @@ onMounted(() => {
.select-box { .select-box {
margin-right: 5px; margin-right: 5px;
display: flex;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
} }
} }
...@@ -794,37 +918,57 @@ onMounted(() => { ...@@ -794,37 +918,57 @@ onMounted(() => {
.select-box { .select-box {
margin-top: 21px; margin-top: 21px;
.select-box-header { .paixu-btn {
display: flex; display: flex;
gap: 17px; width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.icon { &:hover {
margin-top: 4px; background: var(--color-bg-hover);
width: 8px; }
height: 16px;
background: var(--color-main-active); cursor: pointer;
border-radius: 0 4px 4px 0;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
} }
.title { .text {
height: 26px; height: 19px;
color: var(--color-main-active); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 14px;
font-weight: 700; font-weight: 400;
line-height: 26px; line-height: 18px;
letter-spacing: 1px; letter-spacing: 0px;
text-align: left; text-align: left;
margin-top: 7px;
margin-left: 9px;
} }
}
.select-main { .icon2 {
margin-left: 25px; width: 10px;
width: 160px; height: 5px;
} margin-top: 5px;
margin-left: 13px;
.select-main1 { img {
width: 100px; width: 100%;
height: 100%;
}
}
} }
} }
} }
......
src/views/thinkTank/index.vue
浏览文件 @ df5fccbc
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="header-item">科技智库</div> <div class="header-item">科技智库</div>
</div> </div>
<div class="home-main-header-center"> <div class="home-main-header-center">
<el-input v-model="searchThinktankText" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" /> <el-input v-model="searchThinktankText" style="width: 838px; height: 100%" placeholder="搜索智库报告" />
<div class="search"> <div class="search">
<div class="search-icon"> <div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" /> <img src="./assets/images/search-icon.png" alt="" />
...@@ -78,12 +78,12 @@ ...@@ -78,12 +78,12 @@
<div class="title-right">{{ item.country }}</div> <div class="title-right">{{ item.country }}</div>
</div> </div>
<el-popover effect="dark" :content="item.desc" placement="top-start"> <!-- <el-popover effect="dark" :content="item.desc" placement="top-start">
<template #reference> <template #reference>
<div class="content">{{ item.desc }}</div> <div class="content">{{ item.desc }}</div>
</template> </template>
</el-popover> </el-popover> -->
<div class="content">{{ item.desc }}</div>
<div class="tag-box"> <div class="tag-box">
<div class="tag" :class="{ <div class="tag" :class="{
tag1: val.status === 1, tag1: val.status === 1,
...@@ -177,14 +177,16 @@ ...@@ -177,14 +177,16 @@
{{ item.status || "一般风险" }} {{ item.status || "一般风险" }}
</div> </div>
<div class="item-right"> <div class="item-right">
<el-popover effect="dark" :width="500" :content="item.title" placement="top-start"> <!-- <el-popover effect="dark" :width="500" :content="item.title" placement="top-start">
<template #reference> <template #reference>
<div class="text"> <div class="text">
{{ item.title }} {{ item.title }}
</div> </div>
</template> </template>
</el-popover> </el-popover> -->
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div> <div class="time">{{ item.time }}</div>
</div> </div>
</div> </div>
...@@ -220,11 +222,12 @@ ...@@ -220,11 +222,12 @@
<div class="time">{{ news.newsOrg }}</div> <div class="time">{{ news.newsOrg }}</div>
</div> </div>
<el-popover effect="dark" :width="700" :content="news.newsContent" placement="top-start"> <!-- <el-popover effect="dark" :width="700" :content="news.newsContent" placement="top-start">
<template #reference> <template #reference>
<div class="right-footer">{{ news.newsContent }}</div> <div class="right-footer">{{ news.newsContent }}</div>
</template> </template>
</el-popover> </el-popover> -->
<div class="right-footer">{{ news.newsContent }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -350,6 +353,8 @@ ...@@ -350,6 +353,8 @@
<div class="home-main-footer"> <div class="home-main-footer">
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList" <div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
...@@ -357,10 +362,23 @@ ...@@ -357,10 +362,23 @@
{{ cate }} {{ cate }}
</div> </div>
</div> </div>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px"> <div class="select-box">
<div class="paixu-btn" @click="handleSwithSort()">
<div class="icon1">
<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div>
</div>
<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
<el-option @click="handleGetetThinkTankReport()" :key="true" label="正序" :value="true" /> <el-option @click="handleGetetThinkTankReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetetThinkTankReport()" :key="false" label="倒序" :value="false" /> <el-option @click="handleGetetThinkTankReport()" :key="false" label="倒序" :value="false" />
</el-select> </el-select> -->
</div> </div>
<div class="home-main-footer-main"> <div class="home-main-footer-main">
<div class="left"> <div class="left">
...@@ -411,14 +429,16 @@ ...@@ -411,14 +429,16 @@
<div class="footer-card-top"> <div class="footer-card-top">
<img :src="item.imageUrl" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
<el-popover effect="dark" :content="item.name" placement="top-start"> <!-- <el-popover effect="dark" :content="item.name" placement="top-start">
<template #reference> <template #reference>
<div class="footer-card-title"> <div class="footer-card-title">
{{ item.name }} {{ item.name }}
</div> </div>
</template> </template>
</el-popover> </el-popover> -->
<div class="footer-card-title">
{{ item.name }}
</div>
<div class="footer-card-footer"> <div class="footer-card-footer">
<div class="time">{{ item.times }}</div> <div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div> <div class="from">{{ item.thinkTankName }}</div>
...@@ -1283,6 +1303,11 @@ const selectedPubTimeList = ref([""]); ...@@ -1283,6 +1303,11 @@ const selectedPubTimeList = ref([""]);
const checkAllTime = ref(false); const checkAllTime = ref(false);
const isIndeterminateTime = ref(true); const isIndeterminateTime = ref(true);
const sort = ref(false); const sort = ref(false);
const handleSwithSort = () => {
sort.value = !sort.value;
handleGetetThinkTankReport()()
};
const handleCheckAllChangeTime = val => { const handleCheckAllChangeTime = val => {
// console.log(val, "handleCheckAllChange"); // console.log(val, "handleCheckAllChange");
if (val) { if (val) {
...@@ -2808,6 +2833,7 @@ onMounted(async () => { ...@@ -2808,6 +2833,7 @@ onMounted(async () => {
} }
.box6-main { .box6-main {
margin: 15px;
height: 360px; height: 360px;
} }
} }
...@@ -3034,6 +3060,8 @@ onMounted(async () => { ...@@ -3034,6 +3060,8 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
background: rgba(247, 248, 249, 1); background: rgba(247, 248, 249, 1);
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 42px; height: 42px;
...@@ -3081,6 +3109,59 @@ onMounted(async () => { ...@@ -3081,6 +3109,59 @@ onMounted(async () => {
height: 42px; height: 42px;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 0; padding: 5px 0;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
} }
} }
......
src/views/thinkTank/utils/piechart.js
浏览文件 @ df5fccbc
...@@ -2,23 +2,30 @@ const getPieChart = (data) => { ...@@ -2,23 +2,30 @@ const getPieChart = (data) => {
let option = { let option = {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: [70, 100], // grid: {
height: '100%', // top: '15%',
left: 'center', // right: '15%',
width: '100%', // bottom: '5%',
itemStyle: { // left: '15%',
borderColor: '#fff', // containLabel: true
borderWidth: 1 // },
}, radius: [70, 100],
label: { height: '100%',
alignTo: 'edge', left: 'center',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}', width: '100%',
minMargin: 5, itemStyle: {
edgeDistance: 10, borderColor: '#fff',
lineHeight: 24, borderWidth: 1
rich: { },
name: { label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 24,
rich: {
name: {
fontSize: 16, fontSize: 16,
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
...@@ -29,26 +36,26 @@ const getPieChart = (data) => { ...@@ -29,26 +36,26 @@ const getPieChart = (data) => {
color: 'rgba(95, 101, 108, 1)', color: 'rgba(95, 101, 108, 1)',
fontFamily: 'Microsoft YaHei', fontFamily: 'Microsoft YaHei',
} }
} }
}, },
labelLine: { labelLine: {
length: 15, length: 15,
length2: 0, length2: 0,
maxSurfaceAngle: 80 maxSurfaceAngle: 80
}, },
labelLayout: function (params) { labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2; const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints; const points = params.labelLinePoints;
// Update the end point. // Update the end point.
points[2][0] = isLeft points[2][0] = isLeft
? params.labelRect.x ? params.labelRect.x
: params.labelRect.x + params.labelRect.width; : params.labelRect.x + params.labelRect.width;
return { return {
labelLinePoints: points labelLinePoints: points
}; };
}, },
data: data data: data
}] }]
} }
return option return option
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论