Browse Source

优化组件样式,调整数据展示逻辑

master
parent
commit
ad762988f6
  1. 3
      src/components/RouterSearch/index.vue
  2. 2
      src/layout/components/ToolHeader.vue
  3. 2
      src/store/modules/app.ts
  4. 45
      src/views/Home/Index.vue

3
src/components/RouterSearch/index.vue

@ -24,6 +24,7 @@
filterable filterable
:reserve-keyword="false" :reserve-keyword="false"
remote remote
size="default"
placeholder="请输入菜单内容" placeholder="请输入菜单内容"
:remote-method="remoteMethod" :remote-method="remoteMethod"
class="overflow-hidden transition-all-600" class="overflow-hidden transition-all-600"
@ -66,7 +67,7 @@ const options = computed(() => {
}) })
return list.map((item) => { return list.map((item) => {
return { return {
label: `${item.meta.title}${item.path}`, label: `${item.meta.title}`,
value: item.path value: item.path
} }
}) })

2
src/layout/components/ToolHeader.vue

@ -9,7 +9,7 @@ import RouterSearch from '@/components/RouterSearch/index.vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls, variables } = useDesign() const { variables } = useDesign()
const appStore = useAppStore() const appStore = useAppStore()

2
src/store/modules/app.ts

@ -68,7 +68,7 @@ export const useAppStore = defineStore('app', {
layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局 layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
// isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式 // isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式
isDark: false, // 是否是暗黑模式 isDark: false, // 是否是暗黑模式
currentSize: wsCache.get('default') || 'default', // 组件尺寸 currentSize: wsCache.get('default') || 'large', // 组件尺寸
theme: { theme: {
elColorPrimary: '#409eff', elColorPrimary: '#409eff',
leftMenuBorderColor: '#eee', leftMenuBorderColor: '#eee',

45
src/views/Home/Index.vue

@ -6,7 +6,6 @@
<el-select <el-select
v-model="queryParams.region" v-model="queryParams.region"
placeholder="请选择区域" placeholder="请选择区域"
size="large"
@change="getData" @change="getData"
> >
<el-option <el-option
@ -22,7 +21,6 @@
v-model="queryParams.selectWeek" v-model="queryParams.selectWeek"
placeholder="请选择周期" placeholder="请选择周期"
clearable clearable
size="large"
@select="getData" @select="getData"
@change="getData" @change="getData"
> >
@ -36,7 +34,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<section class="flex gap-20px"> <section class="flex gap-20px items-center mb-20px">
<el-button type="primary" plain @click="getData"> <el-button type="primary" plain @click="getData">
<Icon icon="ep:search" /> <Icon icon="ep:search" />
查询 查询
@ -87,11 +85,15 @@
<div <div
v-for="(item, index) in tasks" v-for="(item, index) in tasks"
:key="`dynamics-${index}`" :key="`dynamics-${index}`"
class="text-15px flex justify-between" class="text-15px flex gap-40px flex-nowrap"
> >
<span class="color-#303133">{{ item.title }}</span> <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
<span class="color-#606266">{{ item.deptName }}</span> {{ item.title }}
<span class="color-#909399">{{ formatDate(item.startDate, 'YYYY年M月D日') }}</span> </div>
<div class="color-#606266 w80px text-right">{{ item.deptName }}</div>
<div class="color-#909399 w140px text-right">
{{ formatDate(item.startDate, 'YYYY年M月D日') }}
</div>
</div> </div>
<el-empty v-if="tasks.length == 0" /> <el-empty v-if="tasks.length == 0" />
</section> </section>
@ -106,10 +108,13 @@
<div <div
v-for="(item, index) in notice1" v-for="(item, index) in notice1"
:key="`dynamics-${index}`" :key="`dynamics-${index}`"
class="text-15px flex justify-between" class="text-15px flex gap-40px flex-nowrap"
> >
<span class="color-#303133">{{ item.name }}</span> <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
<span class="color-#909399">{{ item.count }}</span> {{ item.name }}
</div>
<div class="color-#606266 w80px text-right">{{ item.deptName }}</div>
<div class="color-#909399 w140px text-right">{{ item.count }}</div>
</div> </div>
<el-empty v-if="notice1.length == 0" /> <el-empty v-if="notice1.length == 0" />
</section> </section>
@ -124,10 +129,13 @@
<div <div
v-for="(item, index) in notice2" v-for="(item, index) in notice2"
:key="`dynamics-${index}`" :key="`dynamics-${index}`"
class="text-15px flex justify-between" class="text-15px flex gap-40px flex-nowrap"
> >
<span class="color-#303133">{{ item.name }}</span> <div class="color-#303133 flex-1 whitespace-nowrap text-ellipsis overflow-hidden">
<span class="color-#909399">{{ item.count }}</span> {{ item.name }}
</div>
<div class="color-#606266 w80px text-right">{{ item.realName }}</div>
<div class="color-#909399 w140px text-right">{{ item.count }}</div>
</div> </div>
<el-empty v-if="notice2.length == 0" /> <el-empty v-if="notice2.length == 0" />
</section> </section>
@ -170,7 +178,7 @@ const pieOptionsData = ref({
series: { series: {
name: '任务进度', name: '任务进度',
type: 'pie', type: 'pie',
radius: ['60%', '80%'], radius: ['55%', '80%'],
center: ['50%', '50%'], center: ['50%', '50%'],
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
@ -183,6 +191,7 @@ const pieOptionsData = ref({
} }
return '' return ''
}, },
fontSize: 13,
padding: [0, 0, 15, 0], padding: [0, 0, 15, 0],
distanceToLabelLine: 0, distanceToLabelLine: 0,
rich: { rich: {
@ -323,8 +332,8 @@ const barOptionsData = ref({
type: 'pictorialBar', type: 'pictorialBar',
symbol: 'rect', symbol: 'rect',
symbolPosition: 'end', symbolPosition: 'end',
symbolSize: [20,5], symbolSize: [20, 5],
symbolOffset: [13, -1], symbolOffset: [13, -1],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: 'rgba(103, 194, 58, 1)' color: 'rgba(103, 194, 58, 1)'
@ -399,7 +408,7 @@ const lineOptionsData = ref({
}, },
series: [ series: [
{ {
name: '任务数', name: '任务数',
data: [13253, 34235, 26321, 12340, 24643], data: [13253, 34235, 26321, 12340, 24643],
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -414,7 +423,7 @@ const lineOptionsData = ref({
} }
}, },
{ {
name: '执法数', name: '执法数',
data: [15678, 28943, 31452, 19876, 22345], data: [15678, 28943, 31452, 19876, 22345],
type: 'line', type: 'line',
smooth: true, smooth: true,

Loading…
Cancel
Save