【update 首页】首页样式及高级搜索
This commit is contained in:
danshihao
@@ -2,12 +2,16 @@
|
||||
<a-card :bordered="false">
|
||||
<a-spin :spinning="loading">
|
||||
<div class="top-wrapper">
|
||||
<span class="left-p"><i class="iconfont icon-link left-icon"></i>友情链接</span>
|
||||
<span class="right-p" @click="moreLink" v-has="'dashboard:friendShipLInk:linkManage'">链接管理<i class="iconfont icon-right"></i></span>
|
||||
<span class="left-p"><i class="iconfont icon-link left-icon"></i>{{$t('dashboard.friendLink.friendLink')}}</span>
|
||||
<span class="right-p" @click="moreLink" v-has="'dashboard:friendShipLInk:linkManage'">{{$t('dashboard.friendLink.more')}}<i class="iconfont icon-right"></i></span>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-div" v-for="item in dataSource" :key="item.id" @click="clickLink(item)">
|
||||
{{ item.name }}
|
||||
<img class="icon-img" :src="dataSource.logo || defaultLogo" :alt="item.name">
|
||||
<a-tooltip placement="top">
|
||||
<template slot="title">{{ item.name }}</template>
|
||||
<p>{{ item.name }}</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
@@ -21,8 +25,16 @@ export default {
|
||||
name: 'FriendLinkCard',
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
dataSource: [],
|
||||
defaultLogo: require('@/assets/image/dashboard/friendship-link.png'),
|
||||
loading: false,
|
||||
dataSource: [
|
||||
{ name: '奇瑞官网' },
|
||||
{ name: '奇瑞官网' },
|
||||
{ name: '奇瑞官网' },
|
||||
{ name: '奇瑞官网' },
|
||||
{ name: '奇瑞官网' },
|
||||
{ name: '奇瑞官网' }
|
||||
],
|
||||
url: {
|
||||
list: '/sys/lawsFriendlyLinks/list'
|
||||
}
|
||||
@@ -64,24 +76,33 @@ export default {
|
||||
|
||||
.content-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
margin-top: 12px;
|
||||
}
|
||||
.content-div {
|
||||
height: 62px;
|
||||
padding: 16px;
|
||||
line-height: 30px;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
background-image: url('../../../assets/image/dashboardLinkBack.png');
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
|
||||
.icon-img {
|
||||
border-radius: 8px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
p {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,9 +103,9 @@ export default {
|
||||
},
|
||||
// 确定
|
||||
handleOk () {
|
||||
// 最多选择9个模块
|
||||
if (this.targetKeys.length > 9) {
|
||||
this.$message.warning(this.$t('dashboard.quickEnter.maxSelectedNine'))
|
||||
// 最多选择14个模块
|
||||
if (this.targetKeys.length > 14) {
|
||||
this.$message.warning(this.$t('dashboard.quickEnter.maxSelected'))
|
||||
return
|
||||
}
|
||||
// 如果进来的值和提交的值一样不提示操作成功
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<a-spin :spinning="loading">
|
||||
<div class="top-wrapper">
|
||||
<p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
|
||||
<p class="right-p" @click="menuManage" v-has="'dashboard:quickEnter:menuManage'"><i class="iconfont icon-settings"></i>{{ this.$t('dashboard.quickEnter.menuManage') }}</p>
|
||||
<p class="right-p" @click="menuManage" v-has="'dashboard:quickEnter:menuManage'"><i class="iconfont icon-settings" style="font-size: 20px;"></i></p>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-div" v-for="item in dataSource" :key="item.id" @click="handleTo(item.url)">
|
||||
@@ -14,8 +14,12 @@
|
||||
<p>{{ item.name }}</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 9" v-has="'dashboard:quickEnter:menuManage'">
|
||||
<a-icon type="plus" class="text-primary-color" />
|
||||
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 14" v-has="'dashboard:quickEnter:menuManage'">
|
||||
<img class="icon-img" :src="require('@assets/image/dashboard/quickEnter/plus.png')" :alt="$t('dashboard.quickEnter.newFunction')">
|
||||
<a-tooltip placement="top">
|
||||
<template slot="title">{{ $t('dashboard.quickEnter.newFunction') }}</template>
|
||||
<p>{{ $t('dashboard.quickEnter.newFunction') }}</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
@@ -84,7 +88,7 @@ export default {
|
||||
// { iconName: 'a-fagui1', name: '国内法规' },
|
||||
// { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
|
||||
// { iconName: 'jiaoseguanli', name: '角色管理' },
|
||||
// { iconName: 'wenda1', name: '我的问答' }
|
||||
{ src: require(`@/assets/image/dashboard/quickEnter/new-process.png`), name: '新建流程' }
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -102,7 +106,7 @@ export default {
|
||||
// 如果能找到菜单名，就用对应图标
|
||||
const findMap = map.find(m => m.id === item.id || m.name === item.name)
|
||||
if (findMap) {
|
||||
item.src = require(`@/assets/image/dashboard/${findMap.srcName}.png`)
|
||||
item.src = require(`@/assets/image/dashboard/quickEnter/${findMap.srcName}.png`)
|
||||
}
|
||||
return item
|
||||
})
|
||||
@@ -135,73 +139,39 @@ export default {
|
||||
|
||||
<style scoped lang="less">
|
||||
.content-wrapper {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
//flex-wrap: wrap;
|
||||
//justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
|
||||
grid-gap: 10px;
|
||||
grid-auto-flow: row;
|
||||
margin-top: 10px;
|
||||
& > div {
|
||||
//width: 100px;
|
||||
//height: 100px;
|
||||
min-height: 50px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
margin-top: 12px;
|
||||
grid-template-columns: repeat(auto-fill, calc(100% / 14));
|
||||
|
||||
& > .content-div,
|
||||
& > .plus-div {
|
||||
padding: 9px 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content-div {
|
||||
// （总高度 - 内边距 - 标题 - 上下边距） / 3
|
||||
height: calc((306px - 48px - 31px - 20px) / 3);
|
||||
cursor: pointer;
|
||||
background: rgba(213,44,38,0.08);
|
||||
|
||||
.icon-img {
|
||||
width: 27px;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 27px;
|
||||
color: @primary-color;
|
||||
border-radius: 8px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 90%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.plus-div {
|
||||
// （总高度 - 内边距 - 标题 - 上下边距） / 3
|
||||
height: calc((306px - 48px - 31px - 20px) / 3);
|
||||
cursor: pointer;
|
||||
border: 1px dashed @primary-color;
|
||||
box-sizing: border-box;
|
||||
.anticon {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-primary-color {
|
||||
color: @primary-color
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
.content-wrapper {
|
||||
.content-div {
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-wrapper">
|
||||
<a-select class="resource-type-select" v-model="resourceType">
|
||||
<a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
|
||||
<a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value" :title="item.title">
|
||||
{{ item.title }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input class="search-input" v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter">
|
||||
<a-icon slot="prefix" type="search" style="color: #0064FA;" />
|
||||
</a-input>
|
||||
<div class="btn-box">
|
||||
<a-button type="primary" icon="search" @click="toSearchWindow('title')">{{ $t('dashboard.retrieval.titleSearch') }}</a-button>
|
||||
<a-button type="primary" icon="search" @click="toSearchWindow('fullText')">{{ $t('dashboard.retrieval.fullSearch') }}</a-button>
|
||||
<a-button type="primary" class="btn-ghost" ghost @click="toAdvancedSearch"><img :src="require('@/assets/image/icon/super-search.png')" alt='' class="btn-icon">{{ $t('dashboard.retrieval.advancedSearch') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems } from '@api/api'
|
||||
|
||||
export default {
|
||||
name: 'RetrievalCard',
|
||||
data () {
|
||||
return {
|
||||
resourceTypeOptions: [], // 资源类型下拉框数据
|
||||
resourceType: 'all', // 资源类型
|
||||
searchValue: '' // 检索内容
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initResourceTypeOptions()
|
||||
},
|
||||
methods: {
|
||||
// 获取资源类型下拉框数据
|
||||
initResourceTypeOptions () {
|
||||
ajaxGetDictItems('resource_type').then(res => {
|
||||
if (res.success) {
|
||||
this.resourceTypeOptions = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击跳转到一般检索页
|
||||
toSearchWindow (type) {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/generalSearch',
|
||||
query: {
|
||||
type: type,
|
||||
resourceType: this.resourceType,
|
||||
searchValue: this.searchValue
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
// 点击跳转到高级检索页
|
||||
toAdvancedSearch () {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/advancedSearch'
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
// 回车跳标题检索
|
||||
searchInputEnter () {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/generalSearch',
|
||||
query: {
|
||||
type: 'title',
|
||||
resourceType: this.resourceType,
|
||||
searchValue: this.searchValue
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@height: 56px;
|
||||
.search-wrapper {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 102px 1fr auto;
|
||||
grid-gap: 10px;
|
||||
|
||||
& > .resource-type-select {
|
||||
flex: 0 0 102px;
|
||||
color: @primary-color;
|
||||
|
||||
/deep/.ant-select-arrow svg {
|
||||
fill: @primary-color;
|
||||
}
|
||||
/deep/.ant-select-selection--single {
|
||||
height: @height;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
/deep/.ant-select-arrow {
|
||||
right: 20px;
|
||||
}
|
||||
/deep/.ant-select-selection__rendered {
|
||||
line-height: @height;
|
||||
margin-left: 20px;
|
||||
margin-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .search-input {
|
||||
flex: auto;
|
||||
//margin-left: 10px;
|
||||
/deep/.ant-input-prefix {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
/deep/.ant-input {
|
||||
padding-left: 40px;
|
||||
height: @height;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box .ant-btn {
|
||||
flex: 138px;
|
||||
height: @height;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
@height: 42px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +1,19 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-wrapper">
|
||||
<a-select class="resource-type-select" v-model="resourceType">
|
||||
<a-select-option value="all">{{ $t('dashboard.generalSearch.all')}}</a-select-option>
|
||||
<a-select-option v-for="item in resourceTypeOptions" :key="item.value" :value="item.value" :title="item.title">
|
||||
{{ item.title }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input v-model="searchValue" :placeholder="$t('pleaseEnter')" @pressEnter="searchInputEnter"></a-input>
|
||||
<a-button type="primary" @click="toSearchWindow('title')">标题检索</a-button>
|
||||
<a-button type="primary" @click="toSearchWindow('fullText')">全文检索</a-button>
|
||||
<a-button type="primary" ghost @click="toAdvancedSearch">高级检索</a-button>
|
||||
</div>
|
||||
<!-- 预警区域 -->
|
||||
<div class="warning-wrapper">
|
||||
<!-- tab切换 -->
|
||||
<div class="tab-wrapper">
|
||||
<div class="tab-div" :class="warningTab === 'newCarType' ? 'curr-tab' : ''" @click="warningTabChange('newCarType')">新车型实施预警</div>
|
||||
<div class="tab-div" :class="warningTab === 'carInProduction' ? 'curr-tab' : ''" @click="warningTabChange('carInProduction')">在产车实施预警</div>
|
||||
<div class="tab-div small-tab-div" :class="warningTab === 'enStandardImplement' ? 'curr-tab small-curr-tab' : ''" @click="warningTabChange('enStandardImplement')">最新发布企标</div>
|
||||
<div class="tab-div small-tab-div" :class="warningTab === 'enStandardPublish' ? 'curr-tab small-curr-tab' : ''" @click="warningTabChange('enStandardPublish')">最新实施企标</div>
|
||||
</div>
|
||||
<!--这里的scroll.y必须有，后面用媒体查询进行样式覆盖-->
|
||||
<!-- 预警区域 -->
|
||||
<div class="warning-wrapper">
|
||||
<!-- tab切换 -->
|
||||
<a-tabs type="card" class="card-tabs" @change="warningTabChange" size="large">
|
||||
<a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name"></a-tab-pane>
|
||||
</a-tabs>
|
||||
<!--这里的scroll.y必须有，后面用媒体查询进行样式覆盖-->
|
||||
<div class="table-warpper">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:rowKey="(_, index) => index"
|
||||
class="table"
|
||||
:scroll="{ x: '100%', y: '40vh' }"
|
||||
:columns="columns"
|
||||
:columns="showColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
@change="handleTableChange"
|
||||
@@ -58,132 +42,221 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ajaxGetDictItems } from '@/api/api'
|
||||
import { getAction } from '@api/manage'
|
||||
import { StandardSource } from '@/enums/commonEnums'
|
||||
|
||||
const warningColumns = [
|
||||
{
|
||||
title: '来源',
|
||||
align: 'left',
|
||||
dataIndex: 'source_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '标准号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '标准名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
},
|
||||
{
|
||||
title: '新车型实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'newModelImplementationDate',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
]
|
||||
|
||||
const enStandardColumns = [
|
||||
{
|
||||
title: '企标编号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'enStandard' }
|
||||
},
|
||||
{
|
||||
title: '企标名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'enStandard' }
|
||||
},
|
||||
{
|
||||
title: '标准状态',
|
||||
align: 'left',
|
||||
dataIndex: 'standardState_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
align: 'left',
|
||||
dataIndex: 'releaseDate',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'implementationDate',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'SearchAndWarningCard',
|
||||
data () {
|
||||
return {
|
||||
resourceTypeOptions: [], // 资源类型下拉框数据
|
||||
resourceType: 'all', // 资源类型
|
||||
searchValue: '', // 检索内容
|
||||
warningTab: 'newCarType', // 预警当前tab
|
||||
tabList: [
|
||||
{ key: 'lastStorageStandards', name: '最新入库标准' },
|
||||
{ key: 'marketUpdates', name: '市场更新情况' },
|
||||
{ key: 'lastStorageEnterpriseStandard', name: '最新入库企标' },
|
||||
{ key: 'latestInterpretationStandards', name: '最新解读标准' },
|
||||
{ key: 'implementStandards', name: '将实施标准' }
|
||||
],
|
||||
warningTab: '', // 预警当前tab
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('serialNumber'),
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '来源',
|
||||
align: 'left',
|
||||
dataIndex: 'source_dictText',
|
||||
width: 60,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key,
|
||||
this.tabList[4].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '标准号',
|
||||
title: '标准编号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
scopedSlots: { customRender: 'standard' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key,
|
||||
this.tabList[2].key,
|
||||
this.tabList[3].key,
|
||||
this.tabList[4].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '标准名称',
|
||||
align: 'left',
|
||||
dataIndex: 'standardName',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'standard' }
|
||||
scopedSlots: { customRender: 'standard' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key,
|
||||
this.tabList[2].key,
|
||||
this.tabList[3].key,
|
||||
this.tabList[4].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '新车型实施日期',
|
||||
title: '解读信息',
|
||||
align: 'left',
|
||||
dataIndex: 'newModelImplementationDate',
|
||||
dataIndex: 'interpretingInformation',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[3].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '新生产车实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'newProduceModelImplementationDate',
|
||||
width: 140,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '新认证车实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'newAuthenticationModelImplementationDate',
|
||||
width: 140,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key,
|
||||
this.tabList[4].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
align: 'left',
|
||||
dataIndex: 'releaseDate',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' }
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[2].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '实施日期',
|
||||
align: 'left',
|
||||
dataIndex: 'implementationDate',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[2].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '标准状态',
|
||||
align: 'left',
|
||||
dataIndex: 'status_dictText',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[0].key,
|
||||
this.tabList[2].key,
|
||||
this.tabList[4].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '代替标准编号',
|
||||
align: 'left',
|
||||
dataIndex: 'standardNumber2',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[2].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
// 市场更新情况start
|
||||
{
|
||||
title: '国家/地区',
|
||||
align: 'left',
|
||||
dataIndex: 'country',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[1].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '清单编号',
|
||||
align: 'left',
|
||||
dataIndex: 'listNumber',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[1].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '清单名称',
|
||||
align: 'left',
|
||||
dataIndex: 'listName',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[1].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '清单版本',
|
||||
align: 'left',
|
||||
dataIndex: 'listVersion',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[1].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '驾驶位置',
|
||||
align: 'left',
|
||||
dataIndex: 'drivingPosition',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'text' },
|
||||
show: () => {
|
||||
return [
|
||||
this.tabList[1].key
|
||||
].includes(this.warningTab)
|
||||
}
|
||||
}
|
||||
// 市场更新情况end
|
||||
],
|
||||
showColumns: [],
|
||||
dataSource: [],
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
@@ -198,26 +271,16 @@ export default {
|
||||
total: 0
|
||||
},
|
||||
url: {
|
||||
newModelWarningList: '/laws/localTool/standardEarlyWarning/newModelImplementation',
|
||||
inProductionWarningList: '/laws/localTool/standardEarlyWarning/onTheProduction',
|
||||
enStandardImplementList: '/laws/localTool/standardEarlyWarning/latestImplementEs',
|
||||
enStandardPublishList: '/laws/localTool/standardEarlyWarning/latestReleaseEs'
|
||||
list: '/laws/localTool/standardEarlyWarning/newModelImplementation'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initResourceTypeOptions()
|
||||
this.loadData(1)
|
||||
// 默认选中第一个
|
||||
this.warningTabChange(this.tabList[0].key)
|
||||
// this.loadData(1)
|
||||
},
|
||||
methods: {
|
||||
// 获取资源类型下拉框数据
|
||||
initResourceTypeOptions () {
|
||||
ajaxGetDictItems('resource_type').then(res => {
|
||||
if (res.success) {
|
||||
this.resourceTypeOptions = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 回车跳标题检索
|
||||
searchInputEnter () {
|
||||
const { href } = this.$router.resolve({
|
||||
@@ -252,19 +315,9 @@ export default {
|
||||
// 预警tab切换
|
||||
warningTabChange (value) {
|
||||
this.warningTab = value
|
||||
this.dataSource = []
|
||||
if (value === 'newCarType') {
|
||||
this.columns.splice(1, this.columns.length - 1, ...warningColumns)
|
||||
this.columns[4].title = '新车型实施日期'
|
||||
this.columns[4].dataIndex = 'newModelImplementationDate'
|
||||
} else if (value === 'carInProduction') {
|
||||
this.columns.splice(1, this.columns.length - 1, ...warningColumns)
|
||||
this.columns[4].title = '在产车实施日期'
|
||||
this.columns[4].dataIndex = 'onTheProductionDate'
|
||||
} else {
|
||||
// 是企标实施预警或企标发布预警
|
||||
this.columns.splice(1, this.columns.length - 1, ...enStandardColumns)
|
||||
}
|
||||
this.showColumns = this.columns.filter(col => col.show ? col.show() : true).map(item => {
|
||||
return Object.assign({}, item, { show: undefined })
|
||||
})
|
||||
this.loadData(1)
|
||||
},
|
||||
// 跳转详情
|
||||
@@ -314,16 +367,8 @@ export default {
|
||||
params.columns = 'createTime'
|
||||
params.order = 'desc'
|
||||
this.loading = true
|
||||
let url = ''
|
||||
if (this.warningTab === 'newCarType') {
|
||||
url = this.url.newModelWarningList
|
||||
} else if (this.warningTab === 'carInProduction') {
|
||||
url = this.url.inProductionWarningList
|
||||
} else if (this.warningTab === 'enStandardImplement') {
|
||||
url = this.url.enStandardImplementList
|
||||
} else {
|
||||
url = this.url.enStandardPublishList
|
||||
}
|
||||
// TODO: 暂时没有对接接口
|
||||
let url = this.url.list
|
||||
getAction(url, params).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records || res.result
|
||||
@@ -344,18 +389,40 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-wrapper {
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: 96px 200px 88px 88px 88px;
|
||||
}
|
||||
.resource-type-select {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
// 预警容器
|
||||
.warning-wrapper {
|
||||
padding: 24px 0;
|
||||
height: calc(100vh - 406px);
|
||||
}
|
||||
|
||||
// tab样式
|
||||
.card-tabs {
|
||||
|
||||
/deep/.ant-tabs-bar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/&.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
position: relative;
|
||||
|
||||
&:not(.ant-tabs-tab-active) {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&.ant-tabs-tab-active::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: @primary-color;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 预警tab切换
|
||||
.tab-wrapper {
|
||||
@@ -364,35 +431,25 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-div {
|
||||
cursor: pointer;
|
||||
width: 176px;
|
||||
height: 32px;
|
||||
background: rgba(245, 245, 245, 0.60);
|
||||
color: #4E5969;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
// 表格样式
|
||||
.table-warpper {
|
||||
// 内容高度 = 该部分整体高度 - tab高度
|
||||
height: calc(100% - 44px);
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
|
||||
/deep/.ant-table-placeholder {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-thead > tr > th {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.small-tab-div {
|
||||
width: 156px;
|
||||
}
|
||||
.curr-tab {
|
||||
width: 176px;
|
||||
height: 44px;
|
||||
line-height: 42px;
|
||||
border-top: 2px solid @primary-color;
|
||||
color: @primary-color;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
//transition-property: width,height,border-top;
|
||||
//transition-duration: 0.1s;
|
||||
//transition-timing-function: ease-in;
|
||||
}
|
||||
.small-curr-tab {
|
||||
width: 156px;
|
||||
@media screen and (max-width: 1366px) {
|
||||
.warning-wrapper {
|
||||
height: calc(100vh - 226px);
|
||||
}
|
||||
}
|
||||
// 通过媒体查询覆盖表格高度
|
||||
.table /deep/ .ant-table-scroll .ant-table-body {
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<div class="content-item" v-for="item in dataSource" :key="item.id" @click="handleToDetail(item)">
|
||||
<a-tooltip placement="top">
|
||||
<template slot="title">{{item.prcName}}</template>
|
||||
<p>{{ item.prcName }}</p>
|
||||
<div class="content-item-img">
|
||||
<img :src="require('@/assets/image/icon/todo.png')" alt="todo">
|
||||
</div>
|
||||
<p class="content-item-text">{{ item.prcName }}</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,7 +34,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getTodoTask()
|
||||
// this.getTodoTask()
|
||||
},
|
||||
methods: {
|
||||
// 获取待办任务
|
||||
@@ -166,49 +169,73 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@size: 48px;
|
||||
.content-wrapper {
|
||||
margin-top: 10px;
|
||||
height: calc(100vh - 346px - 200px);
|
||||
height: calc(100vh - 700px);
|
||||
overflow-y: auto;
|
||||
|
||||
.content-item {
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: PingFang SC, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #1D2129;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
text-indent: 18px;
|
||||
}
|
||||
.content-item::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #86909C;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
line-height: @size;
|
||||
height: @size;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #EAEAEA;
|
||||
margin-bottom: 8px;
|
||||
padding-left: @size;
|
||||
|
||||
.content-item-img {
|
||||
border: 1px solid #EAEAEA;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
width: @size;
|
||||
height: @size;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 0;
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
.content-item-text {
|
||||
margin: 0 12px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.content-wrapper {
|
||||
height: calc(100vh - 306px - 200px);
|
||||
@size: 40px;
|
||||
.content-wrapper {
|
||||
height: calc(100vh - 506px);
|
||||
|
||||
.content-item {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.content-item {
|
||||
font-size: 14px;
|
||||
line-height: @size;
|
||||
height: @size;
|
||||
padding-left: @size;
|
||||
|
||||
.content-item-img {
|
||||
width: @size;
|
||||
height: @size;
|
||||
}
|
||||
|
||||
.content-item-text {
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user