480 lines
9.8 KiB
Vue
480 lines
9.8 KiB
Vue
<template>
|
|
<div class="all" v-loading="loading">
|
|
<div class="bk">
|
|
<text class="title">企业舆情</text>
|
|
<div class="r_input">
|
|
<el-dropdown trigger="click" @command="handleCommand" style="margin-left: 15px">
|
|
<div class="el-dropdown-link" style="cursor: pointer">
|
|
<span class="select_text">{{ form.pageType == 0 ? '企业' : '资讯' }}</span>
|
|
<el-icon size="12" color="#1A1A1A">
|
|
<ArrowDown />
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item :command="1"> 资讯</el-dropdown-item>
|
|
<el-dropdown-item :command="0"> 企业</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
|
|
<div class="line"></div>
|
|
|
|
<input
|
|
v-model="form.companyName"
|
|
:placeholder="form.pageType == 0 ? '请输入企业名称 / 简称 / 证券编码' : '请输入关键词搜索'"
|
|
@keyup.enter="doSreach"
|
|
class="input"
|
|
/>
|
|
|
|
<!-- <el-autocomplete
|
|
v-else
|
|
class="autocomplete"
|
|
style="flex: 1; box-shadow: 0 0 0"
|
|
:trigger-on-focus="false"
|
|
v-model="companyNameYuqing"
|
|
:fetch-suggestions="fetchSuggestions"
|
|
placeholder="输入企业名称/企业简称/证券编码进行搜索"
|
|
@select="companyChange"
|
|
>
|
|
<template #default="{ item }">
|
|
<div class="value">{{ item.companyName }}</div>
|
|
</template>
|
|
</el-autocomplete> -->
|
|
|
|
<div class="input_button" @click="doSreach">
|
|
<el-icon color="white" size="18">
|
|
<Search />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 企业列表 start -->
|
|
<div style="min-height: 50vh" v-if="form.pageType == 0">
|
|
<div class="list">
|
|
<div
|
|
v-if="list && list.length > 0"
|
|
class="list_item"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@mouseenter="mouseEnter(index)"
|
|
@mouseleave="mouseLeave(index)"
|
|
@click="goDetail(item)"
|
|
:class="{ hover: item.isHovered }"
|
|
>
|
|
<div>
|
|
<div class="r_list_title" style="height: 25px">
|
|
<div
|
|
class="list_title"
|
|
:style="{ marginTop: !item.secCode && !item.companySimpleName && item.companyName.length > 12 ? '15px' : '0px' }"
|
|
>
|
|
{{ !item.secCode && !item.companySimpleName ? item.companyName : item.companySimpleName }}
|
|
</div>
|
|
<div class="list_code" v-if="item.secCode">{{ item.secCode }}</div>
|
|
</div>
|
|
<div class="company_name" v-if="item.secCode || item.companySimpleName">{{ item.companyName }}</div>
|
|
</div>
|
|
<div class="btn_detail">
|
|
<text :style="{ color: item.isHovered ? '#007AFF' : '#1A1A1A' }">查看详情</text>
|
|
<div style="width: 10px; display: flex; justify-content: flex-start">
|
|
<el-icon size="14" color="#007AFF" v-if="item.isHovered">
|
|
<ArrowRight />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else style="width: 100%; height: 100%; display: flex; text-align: center; justify-content: center; align-items: center">
|
|
<div class="r_empty">
|
|
<el-image :src="emptyImg" class="empty"></el-image>
|
|
<text class="empty_text">暂无内容</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-pagination
|
|
v-if="form.pageType == 0"
|
|
background
|
|
style="margin-top: 24px"
|
|
class="page"
|
|
layout="slot, ->,prev, pager, next, jumper"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
v-model:page-size="form.size"
|
|
:total="total"
|
|
@current-change="currentChange"
|
|
@size-change="sizeChange"
|
|
>
|
|
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ total }} 项数据</div>
|
|
</el-pagination>
|
|
<!-- 企业列表 end -->
|
|
|
|
<div v-if="form.pageType == 1">
|
|
<ZxList ref="zxListRef"></ZxList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { getYqcompanyList, getYqCheck } from '/@/api/api';
|
|
import { ElMessage } from 'element-plus';
|
|
import emptyImg from '/@/assets/images/empty.png';
|
|
import ZxList from './zxList.vue';
|
|
|
|
const router = useRouter();
|
|
|
|
const isHovered = ref(false);
|
|
const list = ref([
|
|
{
|
|
id: 1,
|
|
companySimpleName: '',
|
|
secCode: '',
|
|
companyName: '浙江荣亿精密机械股份有限公司',
|
|
},
|
|
{
|
|
id: 2,
|
|
companySimpleName: '荣亿精密',
|
|
secCode: '873223',
|
|
companyName: '浙江荣亿精密机械股份有限公司',
|
|
},
|
|
]);
|
|
|
|
const isSreaching = ref(false);
|
|
const mouseEnter = (index) => {
|
|
list.value[index].isHovered = true;
|
|
};
|
|
const mouseLeave = (index) => {
|
|
list.value[index].isHovered = false;
|
|
};
|
|
const form = reactive({
|
|
keyword: '',
|
|
type: 0,
|
|
page: 1,
|
|
size: 12,
|
|
pageType: 0,
|
|
});
|
|
|
|
function sizeChange(size) {
|
|
form.size = size;
|
|
getData();
|
|
}
|
|
|
|
function currentChange(page) {
|
|
form.page = page;
|
|
getData();
|
|
}
|
|
|
|
const loading = ref(false);
|
|
const total = ref();
|
|
async function getData() {
|
|
loading.value = true;
|
|
let { code, data } = await getYqcompanyList({
|
|
page: form.page,
|
|
keyword: form.keyword,
|
|
size: form.size,
|
|
companyName: form.companyName,
|
|
});
|
|
loading.value = false;
|
|
if (code == 200) {
|
|
list.value = data.list;
|
|
total.value = data.total;
|
|
if (form.keyword) {
|
|
lastKeyWord.value = form.keyword;
|
|
isSreaching.value = true;
|
|
} else {
|
|
isSreaching.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
const zxListRef = ref(null);
|
|
async function doSreach() {
|
|
if (form.pageType == 0) {
|
|
// 企业
|
|
getData();
|
|
} else {
|
|
// 资讯
|
|
zxListRef.value.getData(form);
|
|
}
|
|
}
|
|
|
|
async function getYqCheckFn(item) {
|
|
let { code, data } = await getYqCheck({
|
|
companyName: item.companyName,
|
|
});
|
|
if (code == 200) {
|
|
return data;
|
|
}
|
|
}
|
|
|
|
async function goDetail(item) {
|
|
let isCheck = await getYqCheckFn(item);
|
|
if (isCheck == 0) {
|
|
ElMessage.error('该企业未开通舆情');
|
|
return;
|
|
}
|
|
router.push({
|
|
path: '/yuqingCommon',
|
|
query: {
|
|
id: item.id,
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param value 0 企业 1 资讯
|
|
*/
|
|
function handleCommand(value) {
|
|
form.pageType = value;
|
|
if (value == 1) {
|
|
list.value = [];
|
|
} else {
|
|
form.page = 1;
|
|
getData();
|
|
}
|
|
}
|
|
|
|
// 页面加载时
|
|
onMounted(() => {
|
|
// NextLoading.done();
|
|
getData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import url('/@/theme/page/page.scss');
|
|
|
|
.all {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #f2f3f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.bk {
|
|
width: 100%;
|
|
background: url('/@/assets/images/bk_charts.png') no-repeat center 0;
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.r_input {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
border: 1px solid #e3e3e3;
|
|
width: 40vw;
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
// padding: 16px;
|
|
|
|
:deep(.el-input__inner::placeholder) {
|
|
color: #ccced3;
|
|
font-family: 'PingFang SC';
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
box-shadow: 0 0 0 #fff;
|
|
}
|
|
}
|
|
|
|
.autocomplete input {
|
|
border: none !important;
|
|
}
|
|
|
|
.select_text {
|
|
color: #1a1a1a;
|
|
font-family: 'PingFang SC';
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.line_text {
|
|
width: 1px;
|
|
height: 15px;
|
|
background: #333333;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.input {
|
|
border: none;
|
|
flex: 1;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.input_button {
|
|
display: flex;
|
|
width: 56px;
|
|
height: 44px;
|
|
padding: 8px 15px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
border-radius: 8px;
|
|
background: #0062d9;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #ccced3;
|
|
font-family: 'PingFang SC';
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.title {
|
|
color: #1a1a1a;
|
|
text-align: center;
|
|
font-family: 'PingFang SC';
|
|
font-size: 32px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.page {
|
|
max-width: calc(285px * 4 + 20px * 3);
|
|
width: calc(285px * 4 + 20px * 3);
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
max-width: calc(285px * 4 + 20px * 3);
|
|
width: calc(285px * 4 + 20px * 3);
|
|
}
|
|
|
|
.list_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: url('/@/assets/yuqingNew/card_bg.png') no-repeat center 0;
|
|
background-size: 100% 100%;
|
|
width: 285px;
|
|
height: 162px;
|
|
padding: 20px 30px;
|
|
gap: 15px;
|
|
box-shadow: 0 0 10px rgba($color: #515151, $alpha: 0.2);
|
|
border-radius: 10px;
|
|
border: 1px solid white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease-in-out;
|
|
justify-content: space-between;
|
|
|
|
.r_list_title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.list_title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #1a1a1a;
|
|
line-height: 25px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
// height: 10px;
|
|
}
|
|
|
|
.list_code {
|
|
border-radius: 2px;
|
|
border: 1px solid #007aff;
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #007aff;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.company_name {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #5f6063;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn_detail {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
width: 237px;
|
|
height: 32px;
|
|
color: #5f6063;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.hover {
|
|
box-shadow: 0 0 10px rgba($color: #515151, $alpha: 0.4);
|
|
}
|
|
|
|
.r_empty {
|
|
height: 400px;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.empty {
|
|
width: 120px;
|
|
height: 100px;
|
|
}
|
|
|
|
.empty_text {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 14px;
|
|
color: #919191;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|