refactor(Charts): 重构有限空间组件并删除旧折线图
- 重构了 AlarmNowList 和 FiniteSpatialDistribution 组件的结构 - 更新了组件样式和布局 - 删除了未使用的 LineDropdownConfined 组件相关文件
This commit is contained in:
parent
67950643db
commit
4635366147
@ -6,16 +6,9 @@ import dataJson from './data.json'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
export const styleConfig = {
|
||||
titleText: '实时报警',
|
||||
titleOption: {
|
||||
},
|
||||
headerOption: {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
...styleConfig,
|
||||
sceneCode: 'T01',
|
||||
dataset: dataJson,
|
||||
rowNum: 4,
|
||||
@ -27,5 +20,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key = AlarmNowListConfig.key
|
||||
public chartConfig = cloneDeep(AlarmNowListConfig)
|
||||
public option = cloneDeep(option)
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 430, h: 300, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<SmallBorder :titleText="styleConfig.titleText" :title-option="styleConfig.titleOption"
|
||||
:headerOption="styleConfig.headerOption">
|
||||
<PublicSmallBorder :title-text="chartConfig.option.titleText">
|
||||
<div class="content_box">
|
||||
<vue3-seamless-scroll v-if="option.dataset && option.dataset.length > 0" class="seamless" :list="option.dataset"
|
||||
:limitScrollNum="rowNum" :hover="true" :step="waitTime" :wheel="true" :isWatch="true">
|
||||
<div v-for="(item, index) in option.dataset" class="detail flex_column" :key="index">
|
||||
<div class="flex_v cursor" :style="!showRankNum ? { paddingLeft: 0 } : { paddingLeft: '24px' }"
|
||||
<div class="flex_v cursor" :style="!showRankNum ? { paddingLeft: 0 } : { paddingLeft: '12px' }"
|
||||
@click="handleOpenDialog(item)">
|
||||
<div v-if="index === 0 && showRankNum" class="levelOneIcon flex_c">{{ index + 1 }}</div>
|
||||
<div v-else-if="index === 1 && showRankNum" class="levelTwoIcon flex_c">{{ index + 1 }}</div>
|
||||
@ -121,7 +120,8 @@
|
||||
</n-grid>
|
||||
</n-modal>
|
||||
</div>
|
||||
</SmallBorder>
|
||||
</PublicSmallBorder>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -137,9 +137,10 @@ import PlayBack from '@/components/Pages/yushiVideo/playback.vue'
|
||||
import PlayLive from '@/components/Pages/yushiVideo/playLive.vue'
|
||||
import axiosInstance from '@/api/axios'
|
||||
import VChart from 'vue-echarts'
|
||||
import SmallBorder from '../SmallBorder01Co/index.vue'
|
||||
// import SmallBorder from '../SmallBorder01Co/index.vue'
|
||||
import { height } from 'dom-helpers'
|
||||
import axios from 'axios'
|
||||
import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType & typeof option>,
|
||||
@ -315,7 +316,9 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content_box {
|
||||
z-index: -1;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
@ -353,7 +356,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
// background-color: #0a0c1260;
|
||||
border-bottom: 1.5px solid #123E54;
|
||||
margin: 3px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.item_level_text {
|
||||
|
||||
@ -11,6 +11,7 @@ export const includes = ['legend']
|
||||
const otherConfig = {
|
||||
sceneCode: 'T01',
|
||||
componentIndexKey: "",
|
||||
titleText: '各企业有限空间总数及各等级有限空间的数量',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
@ -126,5 +127,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key: string = FiniteSpatialDistributionConfig.key
|
||||
public chartConfig = cloneDeep(FiniteSpatialDistributionConfig)
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
}
|
||||
@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="go-border-box">
|
||||
<img src="./assets/title.svg" class="svg" />
|
||||
<div class="header-title">各企业有限空间总数及各等级有限空间的数量 </div>
|
||||
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
|
||||
<PublicSmallBorder :title-text="props.chartConfig.option.titleText">
|
||||
<div class="content">
|
||||
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor"
|
||||
:option="option"></v-chart>
|
||||
</div>
|
||||
</PublicSmallBorder>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -24,7 +27,7 @@ import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, Tit
|
||||
import dataJson from './data.json'
|
||||
import { getPie3D } from './3dPie'
|
||||
import axiosInstance from '@/api/axios';
|
||||
|
||||
import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
@ -113,63 +116,15 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(border-box) {
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.go-border-box {
|
||||
width: 100%;
|
||||
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
// 不渐变
|
||||
// background-color: #0E121B;
|
||||
// 渐变
|
||||
background: linear-gradient(to top,
|
||||
rgba(14, 18, 27, 1) 0%,
|
||||
rgba(14, 18, 27, 0.6) 100%);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
/* 边框宽度 */
|
||||
background: linear-gradient(to top,
|
||||
rgba(128, 128, 128, 0.3),
|
||||
rgba(128, 128, 128, 0));
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff, #fff) content-box,
|
||||
linear-gradient(#fff, #fff);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
left: 70px;
|
||||
white-space: nowrap;
|
||||
font-family: 'CustomFont';
|
||||
font-style: italic;
|
||||
letter-spacing: 0.5px;
|
||||
color: #eee;
|
||||
text-shadow: 1px 3px 10px #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.svg {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
}
|
||||
</style>
|
||||
@ -1,114 +0,0 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineDropdownConfinedConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['xAxis', 'yAxis', 'grid']
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'rgba(13, 16, 22, 1)',
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
top: '15%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 12
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'rgba(58, 160, 255, 1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none', // 默认不显示点
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(58, 160, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(127, 216, 255, 1)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
symbol: 'circle', // 鼠标悬停时显示圆点
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: 'rgba(58, 160, 255, 1)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(58, 160, 255, 0.5)' },
|
||||
{ offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineDropdownConfinedConfig.key
|
||||
public chartConfig = cloneDeep(LineDropdownConfinedConfig)
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { NSpace, NCard, NFormItem, NInput } from 'naive-ui'
|
||||
import config from './config'
|
||||
|
||||
defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,81 +0,0 @@
|
||||
{
|
||||
"dimensions": ["time", "value"],
|
||||
"source": [
|
||||
{
|
||||
"time": "13:00",
|
||||
"value": 50
|
||||
},
|
||||
{
|
||||
"time": "13:05",
|
||||
"value": 45
|
||||
},
|
||||
{
|
||||
"time": "13:10",
|
||||
"value": 55
|
||||
},
|
||||
{
|
||||
"time": "13:15",
|
||||
"value": 48
|
||||
},
|
||||
{
|
||||
"time": "13:20",
|
||||
"value": 42
|
||||
},
|
||||
{
|
||||
"time": "13:25",
|
||||
"value": 38
|
||||
},
|
||||
{
|
||||
"time": "13:30",
|
||||
"value": 35
|
||||
},
|
||||
{
|
||||
"time": "13:35",
|
||||
"value": 40
|
||||
},
|
||||
{
|
||||
"time": "13:40",
|
||||
"value": 50
|
||||
},
|
||||
{
|
||||
"time": "13:45",
|
||||
"value": 65
|
||||
},
|
||||
{
|
||||
"time": "13:50",
|
||||
"value": 78
|
||||
},
|
||||
{
|
||||
"time": "13:55",
|
||||
"value": 80
|
||||
},
|
||||
{
|
||||
"time": "14:00",
|
||||
"value": 75
|
||||
},
|
||||
{
|
||||
"time": "14:05",
|
||||
"value": 68
|
||||
},
|
||||
{
|
||||
"time": "14:10",
|
||||
"value": 60
|
||||
},
|
||||
{
|
||||
"time": "14:15",
|
||||
"value": 55
|
||||
},
|
||||
{
|
||||
"time": "14:20",
|
||||
"value": 52
|
||||
},
|
||||
{
|
||||
"time": "14:25",
|
||||
"value": 58
|
||||
},
|
||||
{
|
||||
"time": "14:30",
|
||||
"value": 62
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
// import { ChatCategoryEnum, ChatCategoryEnumName } from '../..'
|
||||
|
||||
export const LineDropdownConfinedConfig: ConfigType = {
|
||||
key: 'LineDropdownConfined',
|
||||
chartKey: 'VLineDropdownConfined',
|
||||
conKey: 'VCLineDropdownConfined',
|
||||
title: '下拉折线图',
|
||||
category: 'ConfinedSpace',
|
||||
categoryName: '有限空间组件',
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line_warn.png'
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -19,7 +19,6 @@ const otherConfig = {
|
||||
isCarousel: false,
|
||||
color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
|
||||
selectOption: {
|
||||
show: true,
|
||||
selectValue: 'month',
|
||||
dataset: [
|
||||
{
|
||||
@ -45,15 +44,8 @@ const otherConfig = {
|
||||
]
|
||||
},
|
||||
titleText: '报警统计',
|
||||
titleOption: {
|
||||
},
|
||||
headerOption: {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0
|
||||
}, selectStyleOption: {
|
||||
|
||||
selectStyleOption: {
|
||||
...selectStyleOption
|
||||
}
|
||||
}
|
||||
// ECharts配置
|
||||
@ -139,7 +131,7 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key: string = PieCircleCommenConfig.key
|
||||
|
||||
public chartConfig = cloneDeep(PieCircleCommenConfig)
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 430, h: 300, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div class="go-border-box">
|
||||
<SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
|
||||
:select-option="option.selectOption" :header-option="option.headerOption" @change="handleBorderSelectChange"
|
||||
:selectStyleConfig="selectStyleOption
|
||||
">
|
||||
<PublicSmallBorder :title-text="option.titleText" :select-option="option.selectOption"
|
||||
:selectStyleConfig="option.selectStyleOption" @change="handleBorderSelectChange">
|
||||
<v-chart class=" chart" ref="vChartRef" :theme="themeColor" :init-options="initOptions" :option="option"
|
||||
autoresize> </v-chart>
|
||||
</SmallBaorder01>
|
||||
</PublicSmallBorder>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -21,7 +19,8 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import config, { includes, selectStyleOption } from './config'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import SmallBaorder01 from '../SmallBorder01Co/index.vue'
|
||||
// import SmallBaorder01 from '../SmallBorder01Co/index.vue'
|
||||
import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div>
|
||||
<SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
|
||||
:headerOption="option.headerOption">
|
||||
<PublicSmallBorder :titleText="option.titleText">
|
||||
<div :class="option.isOldStyle ? 'video_title' : 'video_title video_title_new'" v-if="option.showBtn">
|
||||
<div class="title_text" v-if="option.showTree && option.showBtn">{{ option.videoTitle }}</div>
|
||||
<n-select v-if="!option.showTree" class="video_select" placement="top-end"
|
||||
@ -25,9 +24,7 @@
|
||||
</n-modal>
|
||||
</div>
|
||||
<div ref="vYushiVideoRef" class="go-video" :id="uuid"></div>
|
||||
|
||||
</SmallBaorder01>
|
||||
|
||||
</PublicSmallBorder>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -44,9 +41,9 @@ import { PageEnum } from '@/enums/pageEnum'
|
||||
import axios from 'axios'
|
||||
import { getUUID, isPreview } from '@/utils'
|
||||
import { useYushiVideoStore } from '@/store/modules/yushiVideoStore/yushiVideoStore'
|
||||
import SmallBaorder01 from '../SmallBorder01Co/index.vue'
|
||||
// import SmallBaorder01 from '../SmallBorder01Co/index.vue'
|
||||
import axiosInstance from '@/api/axios'
|
||||
|
||||
import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
|
||||
const yushiStore = useYushiVideoStore()
|
||||
let selectedList = []
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user