refactor(Charts): 重构有限空间组件并删除旧折线图

- 重构了 AlarmNowList 和 FiniteSpatialDistribution 组件的结构
- 更新了组件样式和布局
- 删除了未使用的 LineDropdownConfined 组件相关文件

src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts

@@ -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 }
 }

src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue

@@ -1,11 +1,10 @@
 <template>
-  <SmallBorder :titleText="styleConfig.titleText" :title-option="styleConfig.titleOption"
+  <PublicSmallBorder :title-text="chartConfig.option.titleText">
-    :headerOption="styleConfig.headerOption">
     <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 {

src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts

@@ -10,7 +10,8 @@ export const includes = ['legend']
 // 其它配置
 const otherConfig = {
     sceneCode: 'T01',
-    componentIndexKey:"",
+    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 }
 }

src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue

@@ -1,8 +1,11 @@
 <template>
     <div class="go-border-box">
-        <img src="./assets/title.svg" class="svg" />
+        <PublicSmallBorder :title-text="props.chartConfig.option.titleText">
-        <div class="header-title">各企业有限空间总数及各等级有限空间的数量        </div>
+            <div class="content">
-        <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
+                <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) {
+.go-border-box {
-    position: relative;
-    border-radius: 5px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     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 {
-        content: '';
+        width: 100%;
-        position: absolute;
+        height: 100%;
-        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>

src/packages/components/Charts/ConfinedSpace/LineDropdownConfined/config.ts

@@ -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)
-}

src/packages/components/Charts/ConfinedSpace/LineDropdownConfined/config.vue

@@ -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>

src/packages/components/Charts/ConfinedSpace/LineDropdownConfined/data.json

@@ -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
-    }
-  ]
-}

src/packages/components/Charts/ConfinedSpace/LineDropdownConfined/index.ts

@@ -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'
-}

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts

@@ -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: {
+  selectStyleOption: {
-  },
+    ...selectStyleOption
-  headerOption: {
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0
-  }, 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)
 }

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="go-border-box">
-    <SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
+    <PublicSmallBorder :title-text="option.titleText" :select-option="option.selectOption"
-      :select-option="option.selectOption" :header-option="option.headerOption" @change="handleBorderSelectChange"
+      :selectStyleConfig="option.selectStyleOption" @change="handleBorderSelectChange">
-      :selectStyleConfig="selectStyleOption
-        ">
       <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,

src/packages/components/Charts/ConfinedSpace/videoCheck/index.vue

@@ -1,8 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div>
-    <SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
+    <PublicSmallBorder :titleText="option.titleText">
-      :headerOption="option.headerOption">
       <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>
-
+    </PublicSmallBorder>
-    </SmallBaorder01>
-
   </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 = []