名称修改

package-lock.json

@@ -13,7 +13,7 @@
         "countup.js": "^2.8.0",
         "dayjs": "^1.11.10",
         "echarts": "^5.4.3",
-        "element-plus": "^2.3.14",
+        "element-plus": "^2.4.0",
         "mockjs": "^1.1.0",
         "pinia": "^2.1.6",
         "vue": "^3.3.4",
@@ -80,9 +80,9 @@
       }
     },
     "node_modules/@element-plus/icons-vue": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
-      "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "peerDependencies": {
         "vue": "^3.2.0"
       }
@@ -1346,12 +1346,12 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "2.3.14",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.3.14.tgz",
-      "integrity": "sha512-9yvxUaU4jXf2ZNPdmIxoj/f8BG8CDcGM6oHa9JIqxLjQlfY4bpzR1E5CjNimnOX3rxO93w1TQ0jTVt0RSxh9kA==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
+      "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
-        "@element-plus/icons-vue": "^2.0.6",
+        "@element-plus/icons-vue": "^2.3.1",
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
         "@types/lodash": "^4.14.182",

package.json

@@ -3,11 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build:old": "run-p type-check build-only",
     "build": "vite build",
-    "preview": "vite preview --port 4173",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
+    "preview": "vite preview --port 4173"
   },
   "dependencies": {
     "@microsoft/signalr": "^8.0.0",
@@ -15,7 +12,7 @@
     "countup.js": "^2.8.0",
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
-    "element-plus": "^2.3.14",
+    "element-plus": "^2.4.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",

src/App.vue

@@ -1,13 +1,51 @@
+<template>
+  <el-config-provider
+    :size="getGlobalComponentSize"
+    :locale="zhCn"
+    :message="messageConfig"
+    :button="buttonConfig"
+  >
+    <el-watermark class="h100"  :font="config.font" :content="config.content"
+      :z-index="config.zIndex"
+      :rotate="config.rotate"
+      :gap="config.gap"
+      :offset="config.offset">
+      <RouterView />
+    </el-watermark>
+  </el-config-provider>
+</template>
 <script setup lang="ts">
-import {nextTick} from 'vue';
+import { computed,reactive } from "vue";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 import signalR from "@/utils/signalR";
 import { RouterView } from "vue-router";
 //  signalR 初始化signalr
 signalR.init();
-</script>
 
-<template>
-  <RouterView />
-</template>
+// 获取全局组件大小
+const getGlobalComponentSize = computed(() => {
+  return 'default';
+});
+// 可同时显示的消息最大数量
+const messageConfig = reactive<any>({
+	max: 3,
+});
+// 自动在两个中文字符之间插入空格
+const buttonConfig = reactive<any>({
+	autoInsertSpace: false,
+});
+// 水印配置
+const config = reactive({
+  content: [''],
+  font: {
+    fontSize: 16,
+    color: 'rgba(0,0,0,.15)',
+  },
+  zIndex: 999999,
+  rotate: -22,
+  gap: [100, 100] as [number, number],
+  offset: [] as unknown as [number, number],
+})
+</script>
 
 <style scoped></style>

src/assets/css/main.scss → src/assets/css/app.scss

@@ -95,4 +95,93 @@ html .el-message {
     display: flex;
     min-height: calc(100% - 60px);
     justify-content: space-between;
-  }
+  }
+
+  /* 文字超过几行显示省略号
+------------------------------- */
+@for $i from 1 through 10 {
+	.text-ellipsis#{$i} {
+		overflow: hidden;
+		word-break: break-all;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: $i;
+		-webkit-box-orient: vertical;
+	}
+}
+/* 公共样式
+------------------------------- */
+// 超过一行
+.text-no-wrap {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* 颜色值
+------------------------------- */
+.color-primary {
+	color: var(--el-color-primary);
+}
+.color-success {
+	color: var(--el-color-success);
+}
+.color-warning {
+	color: var(--el-color-warning);
+}
+.color-danger {
+	color: var(--el-color-danger);
+}
+.color-info {
+	color: var(--el-color-info);
+}
+
+/* 字体大小全局样式
+------------------------------- */
+@for $i from 10 through 32 {
+	.font#{$i} {
+		font-size: #{$i}px !important;
+	}
+}
+/* 行高
+------------------------------- */
+@for $i from 10 through 50 {
+	.lineHeight#{$i} {
+		line-height: #{$i}px !important;
+	}
+}
+
+/* 外边距、内边距全局样式
+------------------------------- */
+@for $i from 0 through 35 {
+	.mt#{$i} {
+		margin-top: #{$i}px !important;
+	}
+	.mr#{$i} {
+		margin-right: #{$i}px !important;
+	}
+	.mb#{$i} {
+		margin-bottom: #{$i}px !important;
+	}
+	.ml#{$i} {
+		margin-left: #{$i}px !important;
+	}
+	.pt#{$i} {
+		padding-top: #{$i}px !important;
+	}
+	.pr#{$i} {
+		padding-right: #{$i}px !important;
+	}
+	.pb#{$i} {
+		padding-bottom: #{$i}px !important;
+	}
+	.pl#{$i} {
+		padding-left: #{$i}px !important;
+	}
+	.pd#{$i} {
+		padding: #{$i}px !important;
+	}
+	.mg#{$i} {
+		margin: #{$i}px !important;
+	}
+}

src/assets/css/element.scss

@@ -0,0 +1,333 @@
+@import './mixins/index.scss';
+
+/* Button 按钮
+------------------------------- */
+// 第三方字体图标大小
+// 第三方字体图标大小
+// .el-button i.el-icon,
+// .el-button i.iconfont,
+// .el-button i.fa,
+// .el-button--default i.iconfont,
+// .el-button--default i.fa {
+// 	font-size: 14px !important;
+// 	margin-right: 5px;
+// }
+// .el-button--small i.iconfont,
+// .el-button--small i.fa {
+// 	font-size: 12px !important;
+// 	margin-right: 5px;
+// }
+
+/* Input 输入框、InputNumber 计数器
+------------------------------- */
+// .el-input {
+// 	height: 100%;
+// }
+// 菜单搜索
+.el-autocomplete-suggestion__wrap {
+	max-height: 280px !important;
+}
+
+/* Alert 警告
+------------------------------- */
+.el-alert {
+	border: 1px solid;
+}
+.el-alert__title {
+	word-break: break-all;
+}
+
+/* Message 消息提示
+------------------------------- */
+.el-message {
+	min-width: unset !important;
+	padding: 15px !important;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
+}
+
+/* NavMenu 导航菜单
+------------------------------- */
+// 鼠标 hover 时颜色
+.el-menu-hover-bg-color {
+	//background-color: var(--hotline-color-menu-hover) !important;
+}
+// 默认样式修改
+.el-menu {
+	border-right: none !important;
+	width: 220px;
+}
+.el-menu-item {
+	height: 56px !important;
+	line-height: 56px !important;
+}
+.el-menu-item,
+.el-sub-menu__title {
+	color: var(--hotline-bg-menuBarColor);
+}
+// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
+.el-menu--collapse {
+	width: 64px !important;
+}
+// 外部链接时
+.el-menu-item a,
+.el-menu-item a:hover,
+.el-menu-item i,
+.el-sub-menu__title i {
+	color: inherit;
+	text-decoration: none;
+}
+// 第三方图标字体间距/大小设置
+.el-menu-item .iconfont,
+.el-sub-menu .iconfont,
+.el-menu-item .fa,
+.el-sub-menu .fa {
+	@include generalIcon;
+	flex-shrink: 0;
+}
+// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
+.el-menu-item.is-active,
+.el-sub-menu.is-active .el-sub-menu__title,
+.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
+	@extend .el-menu-hover-bg-color;
+}
+.el-menu-item.is-active{
+	//color: var(--hotline-color-white);
+	color: var(--el-menu-active-color);
+}
+.el-sub-menu.is-active.is-opened .el-sub-menu__title {
+	background-color: unset !important;
+}
+// 子级菜单背景颜色
+// .el-menu--inline {
+// 	background: var(--hotline-bg-menuBar-light-1);
+// }
+// 水平菜单、横向菜单折叠 a 标签
+.el-popper.is-dark a {
+	color: var(--el-color-white) !important;
+	text-decoration: none;
+}
+// 水平菜单、横向菜单折叠背景色
+.el-popper.is-pure.is-light {
+	// 水平菜单
+	.el-menu--vertical {
+		background: var(--hotline-bg-menuBar);
+		.el-sub-menu.is-active .el-sub-menu__title {
+			color: var(--el-menu-active-color);
+		}
+		.el-popper.is-pure.is-light {
+			.el-menu--vertical {
+				.el-sub-menu .el-sub-menu__title {
+					background-color: unset !important;
+					color: var(--hotline-bg-menuBarColor);
+				}
+				.el-sub-menu.is-active .el-sub-menu__title {
+					color: var(--el-menu-active-color);
+				}
+			}
+		}
+	}
+	// 横向菜单
+	.el-menu--horizontal {
+		background: var(--hotline-bg-topBar);
+		.el-menu-item,
+		.el-sub-menu {
+			height: 50px !important;
+			line-height: 50px !important;
+			color: var(--hotline-bg-topBarColor);
+			.el-sub-menu__title {
+				height: 50px !important;
+				line-height: 50px !important;
+				color: var(--hotline-bg-topBarColor);
+			}
+			.el-popper.is-pure.is-light {
+				.el-menu--horizontal {
+					.el-sub-menu .el-sub-menu__title {
+						background-color: unset !important;
+						color: var(--hotline-bg-topBarColor);
+					}
+					.el-sub-menu.is-active .el-sub-menu__title {
+						color: var(--hotline-color-white);
+					}
+				}
+			}
+		}
+		.el-menu-item.is-active,
+		.el-sub-menu.is-active .el-sub-menu__title {
+			//color: var(--hotline-color-white);
+			color: var(--el-menu-active-color);
+		}
+	}
+}
+// 横向菜单（经典、横向）布局
+.el-menu.el-menu--horizontal {
+	border-bottom: none !important;
+	width: 100% !important;
+	.el-menu-item,
+	.el-sub-menu__title {
+		height: 50px !important;
+		color: var(--hotline-bg-topBarColor);
+	}
+	.el-menu-item:not(.is-active):hover,
+	.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
+		color: var(--hotline-bg-topBarColor);
+	}
+}
+
+/* Tabs 标签页
+------------------------------- */
+.el-tabs__nav-wrap::after {
+	height: 1px !important;
+}
+
+/* Dropdown 下拉菜单
+------------------------------- */
+.el-dropdown-menu {
+	list-style: none !important; /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
+}
+.el-dropdown-menu .el-dropdown-menu__item {
+	white-space: nowrap;
+	&:not(.is-disabled):hover {
+		background-color: var(--el-dropdown-menuItem-hover-fill);
+		color: var(--el-dropdown-menuItem-hover-color);
+	}
+}
+
+/* Steps 步骤条
+------------------------------- */
+.el-step__title {
+	font-size: 14px;
+}
+
+/* Dialog 对话框
+------------------------------- */
+.el-overlay {
+	overflow: hidden;
+	background-color: var(--hotline-overlay-color-lighter-4);
+	.el-overlay-dialog {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: unset !important;
+		width: 100%;
+		height: 100%;
+	}
+}
+.el-dialog {
+	margin: 0 auto !important;
+	position: absolute;
+	border-radius: var(--el-border-radius-base);
+	.el-dialog__title{
+		font-size: 18px;
+		font-weight: bold;
+	}
+	.el-dialog__header{
+		border-bottom: 1px solid var(--el-border-color);
+		margin-right:0 !important;
+		padding: var(--el-dialog-padding-primary);
+	}
+	.el-dialog__body {
+		max-height: calc(90vh - 111px) !important;
+		padding: 20px 30px !important;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+}
+/* el-drawer 抽屉
+------------------------------- */
+.el-drawer{
+	.el-drawer__title{
+		font-size: 18px;
+		font-weight: bold;
+	}
+}
+
+/* Card 卡片
+------------------------------- */
+.el-card{
+	margin-bottom: 10px;
+	--el-card-border-radius: 8px;
+	border: 0;
+	&:last-child{
+		margin: 0;
+	}
+}
+.el-card__header {
+	padding: 15px 20px;
+}
+
+/* Table 表格 element plus 2.2.0 版本
+------------------------------- */
+.el-table {
+	.el-button.is-text {
+		padding: 0;
+	}
+	thead{
+		height: 50px !important;
+		color: var(--hotline-color-text-main);
+	}
+	th.el-table__cell{
+		background-color: var(--hotline-bg-main-color) !important;
+	}
+}
+.el-table-v2__header-row{
+	background-color: var(--hotline-bg-main-color) !important;
+}
+.el-table-v2__header-cell{
+	background-color: var(--hotline-bg-main-color) !important;
+	color: var(--hotline-color-text-main);
+}
+/* scrollbar
+------------------------------- */
+/*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
+.el-scrollbar__wrap {
+	max-height: 100%;
+}
+.el-select-dropdown .el-scrollbar__wrap {
+	overflow-x: scroll !important;
+}
+/*修复Select 选择器高度问题*/
+.el-select-dropdown__wrap {
+	max-height: 274px !important;
+}
+/*修复Cascader 级联选择器高度问题*/
+.el-cascader-menu__wrap.el-scrollbar__wrap {
+	height: 204px !important;
+}
+/*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
+.layout-container-view .el-scrollbar__view {
+	height: 100%;
+}
+
+/* Drawer 抽屉
+------------------------------- */
+.el-drawer {
+	// --el-drawer-padding-primary: unset !important;
+	.el-drawer__header {
+		padding: 0 15px !important;
+		height: 50px;
+		display: flex;
+		align-items: center;
+		margin-bottom: 0 !important;
+		border-bottom: 1px solid var(--el-border-color);
+		color: var(--el-text-color-primary);
+	}
+	.el-drawer__body {
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+	}
+}
+/* 穿梭框宽度
+------------------------------- */
+.el-transfer-panel{
+	width: auto;
+}
+
+// 下拉框的字体大小
+.el-select-dropdown__option-item{
+	font-size: var(--el-font-size-base);
+}
+// 分割线的margin
+.el-divider--horizontal{
+	margin: 15px 0;
+}

src/assets/css/index.scss

@@ -0,0 +1,3 @@
+@import './app.scss';
+@import './element.scss';
+@import './tailwind.scss';

src/assets/css/mixins/index.scss

@@ -0,0 +1,56 @@
+/* 第三方图标字体间距/大小设置
+------------------------------- */
+@mixin generalIcon {
+	font-size: 14px !important;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 5px;
+	width: 24px;
+	text-align: center;
+	justify-content: center;
+}
+
+/* 文本不换行
+------------------------------- */
+@mixin text-no-wrap() {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* 多行文本溢出
+  ------------------------------- */
+@mixin text-ellipsis($line: 2) {
+	overflow: hidden;
+	word-break: break-all;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: $line;
+	-webkit-box-orient: vertical;
+}
+
+/* 滚动条(页面未使用) div 中使用：
+  ------------------------------- */
+// .test {
+//   @include scrollBar;
+// }
+@mixin scrollBar {
+	// 滚动条凹槽的颜色，还可以设置边框属性
+	&::-webkit-scrollbar-track-piece {
+		background-color: #f8f8f8;
+	}
+	// 滚动条的宽度
+	&::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	// 滚动条的设置
+	&::-webkit-scrollbar-thumb {
+		background-color: #dddddd;
+		background-clip: padding-box;
+		min-height: 28px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: #bbb;
+	}
+}

src/assets/css/variable.scss

@@ -1 +0,0 @@
-$primary-color: #1890ff;

src/components/item-wrap/item-wrap.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" name="item_wrap">
 import BorderBox13 from "@/components/datav/border-box-13";
 const props = withDefaults(
   defineProps<{

src/main.ts

@@ -1,20 +1,17 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 
 import App from './App.vue'
-import router from './router'
+import router from './router';
 
-import '@/assets/css/main.scss'
-import '@/assets/css/tailwind.css'
+import pinia from '@/stores/index';
 
-import {registerEcharts} from "@/plugins/echarts"
+import '@/assets/css/index.scss'
+
+import { registerEcharts } from "@/plugins/echarts"
 //不使用mock 请注释掉
 import { mockXHR } from "@/mock/index";
 mockXHR()
 
 const app = createApp(App)
 registerEcharts(app)
-app.use(createPinia())
-app.use(router)
-
-app.mount('#app')
+app.use(router).use(pinia).mount('#app');

src/router/index.ts

@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
   },
 ]
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
 

src/stores/index.ts

@@ -1 +1,11 @@
-export * from "./setting/setting"
+// https://pinia.vuejs.org/
+import { createPinia } from 'pinia';
+/* @description pinia持久化
+* @example https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
+* */
+
+// 创建
+const pinia = createPinia();
+
+// 导出
+export default pinia;

src/views/HomeView.vue

@@ -1,18 +1,3 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { RouterView } from "vue-router";
-import ScaleScreen from "@/components/scale-screen";
-import Headers from "./header.vue";
-import Setting from "./setting.vue";
-import { useSettingStore } from "@/stores/index";
-import { storeToRefs } from "pinia";
-import MessageContent from "@/components/Plugins/MessageContent";
-
-const settingStore = useSettingStore();
-const { isScale } = storeToRefs(settingStore);
-const wrapperStyle = {};
-</script>
-
 <template>
   <scale-screen
     width="1920"
@@ -34,6 +19,22 @@ const wrapperStyle = {};
   </scale-screen>
   <Setting />
 </template>
+<script setup lang="ts">
+import { defineAsyncComponent, defineProps, reactive } from "vue";
+import { RouterView } from "vue-router";
+import { useSettingStore } from "@/stores/setting";
+import { storeToRefs } from "pinia";
+
+const ScaleScreen = defineAsyncComponent(() => import('@/components/scale-screen'));
+const Headers = defineAsyncComponent(() => import('@/views/header.vue'));
+const Setting = defineAsyncComponent(() => import('@/views/setting.vue'));
+const MessageContent = defineAsyncComponent(() => import('@/components/Plugins/MessageContent'));
+
+const settingStore = useSettingStore();
+const { isScale } = storeToRefs(settingStore);
+const wrapperStyle = {};
+</script>
+
 <style lang="scss" scoped>
 .content_wrap {
   width: 100%;

src/views/header.vue

@@ -1,27 +1,3 @@
-<script setup lang="ts">
-import { reactive } from "vue";
-import dayjs from 'dayjs';
-import type {DateDataType} from "./index.d"
-import {useSettingStore} from "@/stores/index"
-
-const dateData = reactive<DateDataType>({
-  dateDay: "",
-  dateYear: "",
-  dateWeek: "",
-  timing:null
-});
-
-const { setSettingShow} =useSettingStore()
-const weekday= ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
-const timeFn = () => {
-  dateData.timing = setInterval(() => {
-    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
-    dateData.dateWeek = weekday[dayjs().day()];
-  }, 1000);
-};
-timeFn()
-</script>
-
 <template>
   <div class="d-flex jc-center title_wrap">
     <div class="zuojuxing"></div>
@@ -34,13 +10,35 @@ timeFn()
     </div>
     <div class="timers">
       {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
-
-      <div class="setting_icon"   @click="setSettingShow(true)">
-          <img src="@/assets/img/headers/setting.png" alt="设置">
+      <div class="setting_icon" @click="setSettingShow(true)">
+        <img src="@/assets/img/headers/setting.png" alt="设置" />
       </div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { reactive } from "vue";
+import dayjs from "dayjs";
+import type { DateDataType } from "./index.d";
+import { useSettingStore } from "@/stores/setting";
+
+const dateData = reactive<DateDataType>({
+  dateDay: "",
+  dateYear: "",
+  dateWeek: "",
+  timing: null as any,
+});
+
+const { setSettingShow } = useSettingStore();
+const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+const timeFn = () => {
+  dateData.timing = setInterval(() => {
+    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
+    dateData.dateWeek = weekday[dayjs().day()];
+  }, 1000);
+};
+timeFn();
+</script>
 
 <style scoped lang="scss">
 .title_wrap {
@@ -91,7 +89,7 @@ timeFn()
       height: 20px;
       cursor: pointer;
       margin-left: 12px;
-      img{
+      img {
         width: 100%;
         height: 100%;
       }

src/views/index/center-bottom.vue

@@ -1,7 +1,15 @@
+
+<template>
+  <v-chart
+    class="chart"
+    :option="option"
+    v-if="JSON.stringify(option) != '{}'"
+  />
+</template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick } from "vue";
 import { currentGET } from "@/api";
-import {graphic} from "echarts/core"
+import { graphic } from "echarts/core";
 import signalR from "@/utils/signalR";
 const option = ref({});
 const getData = () => {
@@ -16,152 +24,143 @@ const getData = () => {
       });
     }
   });
-};
-onMounted(() => {
-  // 加入分组
-  signalR.joinGroup("BigScreen-DataShow");
-});
-const setOption =async (newData: any) => {
-  option.value = {
-    tooltip: {
-      trigger: "axis",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-        color: "#FFF",
-      },
-      formatter: function (params: any) {
-        // 添加单位
-        var result = params[0].name + "<br>";
-        params.forEach(function (item: any) {
-          if (item.value) {
-            if (item.seriesName == "安装率") {
-              result +=
-                item.marker +
-                " " +
-                item.seriesName +
-                " : " +
-                item.value +
-                "%</br>";
+  const setOption = async (newData: any) => {
+    option.value = {
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: "rgba(0,0,0,.6)",
+        borderColor: "rgba(147, 235, 248, .8)",
+        textStyle: {
+          color: "#FFF",
+        },
+        formatter: function (params: any) {
+          // 添加单位
+          var result = params[0].name + "<br>";
+          params.forEach(function (item: any) {
+            if (item.value) {
+              if (item.seriesName == "安装率") {
+                result +=
+                  item.marker +
+                  " " +
+                  item.seriesName +
+                  " : " +
+                  item.value +
+                  "%</br>";
+              } else {
+                result +=
+                  item.marker +
+                  " " +
+                  item.seriesName +
+                  " : " +
+                  item.value +
+                  "个</br>";
+              }
             } else {
-              result +=
-                item.marker +
-                " " +
-                item.seriesName +
-                " : " +
-                item.value +
-                "个</br>";
+              result += item.marker + " " + item.seriesName + " :  - </br>";
             }
-          } else {
-            result += item.marker + " " + item.seriesName + " :  - </br>";
-          }
-        });
-        return result;
-      },
-    },
-    legend: {
-      data: ["已安装", "计划安装", "安装率"],
-      textStyle: {
-        color: "#B4B4B4",
+          });
+          return result;
+        },
       },
-      top: "0",
-    },
-    grid: {
-      left: "50px",
-      right: "40px",
-      bottom: "30px",
-      top: "20px",
-    },
-    xAxis: {
-      data: newData.category,
-      axisLine: {
-        lineStyle: {
+      legend: {
+        data: ["已安装", "计划安装", "安装率"],
+        textStyle: {
           color: "#B4B4B4",
         },
+        top: "0",
       },
-      axisTick: {
-        show: false,
+      grid: {
+        left: "50px",
+        right: "40px",
+        bottom: "30px",
+        top: "20px",
       },
-    },
-    yAxis: [
-      {
-        splitLine: { show: false },
+      xAxis: {
+        data: newData.category,
         axisLine: {
           lineStyle: {
             color: "#B4B4B4",
           },
         },
-
-        axisLabel: {
-          formatter: "{value}",
+        axisTick: {
+          show: false,
         },
       },
-      {
-        splitLine: { show: false },
-        axisLine: {
-          lineStyle: {
-            color: "#B4B4B4",
+      yAxis: [
+        {
+          splitLine: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4",
+            },
+          },
+
+          axisLabel: {
+            formatter: "{value}",
           },
         },
-        axisLabel: {
-          formatter: "{value}% ",
+        {
+          splitLine: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4",
+            },
+          },
+          axisLabel: {
+            formatter: "{value}% ",
+          },
         },
-      },
-    ],
-    series: [
-      {
-        name: "已安装",
-        type: "bar",
-        barWidth: 10,
-        itemStyle: {
-          borderRadius: 5,
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#956FD4" },
-            { offset: 1, color: "#3EACE5" },
-          ]),
+      ],
+      series: [
+        {
+          name: "已安装",
+          type: "bar",
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 5,
+            color: new graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "#956FD4" },
+              { offset: 1, color: "#3EACE5" },
+            ]),
+          },
+          data: newData.barData,
         },
-        data: newData.barData,
-      },
-      {
-        name: "计划安装",
-        type: "bar",
-        barGap: "-100%",
-        barWidth: 10,
-        itemStyle: {
-          borderRadius: 5,
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "rgba(156,107,211,0.8)" },
-            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-            { offset: 1, color: "rgba(156,107,211,0.2)" },
-          ]),
+        {
+          name: "计划安装",
+          type: "bar",
+          barGap: "-100%",
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 5,
+            color: new graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: "rgba(156,107,211,0.8)" },
+              { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+              { offset: 1, color: "rgba(156,107,211,0.2)" },
+            ]),
+          },
+          z: -12,
+          data: newData.lineData,
         },
-        z: -12,
-        data: newData.lineData,
-      },
-      {
-        name: "安装率",
-        type: "line",
-        smooth: true,
-        showAllSymbol: true,
-        symbol: "emptyCircle",
-        symbolSize: 8,
-        yAxisIndex: 1,
-        itemStyle: {
-          color: "#F02FC2",
+        {
+          name: "安装率",
+          type: "line",
+          smooth: true,
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 8,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#F02FC2",
+          },
+          data: newData.rateData,
         },
-        data: newData.rateData,
-      },
-    ],
+      ],
+    };
   };
 };
-onMounted(()=>{
-getData();
-
-})
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea5");
+});
 </script>
-
-<template>
-  <v-chart class="chart" :option="option" v-if="JSON.stringify(option)!='{}'"/>
-</template>
-
 <style scoped lang="scss"></style>

src/views/index/center-map.vue

@@ -1,6 +1,25 @@
+<template>
+  <div class="centermap">
+    <div class="maptitle">
+      <div class="zuo"></div>
+      <span class="titletext">{{ title }}</span>
+      <div class="you"></div>
+    </div>
+    <div class="mapwrap">
+      <BorderBox13>
+        <v-chart
+          class="chart"
+          :option="option"
+          ref="centerMapRef"
+          v-if="JSON.stringify(option) != '{}'"
+        />
+      </BorderBox13>
+    </div>
+  </div>
+</template>
 <script setup lang="ts">
-import { ref, reactive, nextTick,onMounted } from "vue";
-import { currentGET, GETNOBASE } from "@/api";
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { GETNOBASE } from "@/api";
 import { registerMap, getMap } from "echarts/core";
 import { optionHandle, regionCodes } from "./center.map";
 import BorderBox13 from "@/components/datav/border-box-13";
@@ -17,10 +36,6 @@ withDefaults(
     title: "地图",
   }
 );
-onMounted(() => {
-  // 加入分组
-  signalR.joinGroup("BigScreen-1");
-});
 const dataSetHandle = async (regionCode: string, list: object[]) => {
   const geojson: any = await getGeojson(regionCode);
   let cityCenter: any = {};
@@ -46,12 +61,7 @@ const dataSetHandle = async (regionCode: string, list: object[]) => {
 
 const getData = async (regionCode: string) => {
   code.value = regionCode;
-  currentGET("centerMap", { regionCode: regionCode }).then((res) => {
-    console.log("设备分布", res);
-    if (res.success) {
-      dataSetHandle(res.data.regionCode, res.data.dataList);
-    }
-  });
+  dataSetHandle(regionCode, regionCodes);
 };
 const getGeojson = (regionCode: string) => {
   return new Promise<boolean>(async (resolve) => {
@@ -72,43 +82,13 @@ const getGeojson = (regionCode: string) => {
     }
   });
 };
-getData(code.value);
-
-const mapClick = (params: any) => {
-  console.log(params);
-  let xzqData = regionCodes[params.name];
-  if (xzqData) {
-    getData(xzqData.adcode);
-  } else {
-    window["$message"].warning("暂无下级地市");
-  }
-};
+onMounted(() => {
+  getData(code.value);
+  // 加入分组
+  signalR.joinGroup("BsDataShowArea4");
+});
 </script>
 
-<template>
-  <div class="centermap">
-    <div class="maptitle">
-      <div class="zuo"></div>
-      <span class="titletext">{{ title }}</span>
-      <div class="you"></div>
-    </div>
-    <div class="mapwrap">
-      <BorderBox13>
-        <div class="quanguo" @click="getData('511500')" v-if="code !== '511500'">
-          宜宾市
-        </div>
-        <v-chart
-          class="chart"
-          :option="option"
-          ref="centerMapRef"
-          @click="mapClick"
-          v-if="JSON.stringify(option) != '{}'"
-        />
-      </BorderBox13>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="scss">
 .centermap {
   margin-bottom: 30px;
@@ -162,7 +142,7 @@ const mapClick = (params: any) => {
     .quanguo {
       position: absolute;
       right: 20px;
-        top: -46px;
+      top: -46px;
       width: 80px;
       height: 28px;
       border: 1px solid #00eded;
@@ -179,3 +159,16 @@ const mapClick = (params: any) => {
   }
 }
 </style>
+<style lang="scss">
+.chartTooltip {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #00f7f6;
+  border-radius: 10px;
+  padding: 10px;
+  .textTooltip {
+  }
+}
+</style>

src/views/index/center.map.ts

@@ -19,7 +19,7 @@ export const optionHandle = (regionCode: string,
             show: false,
         },
         visualMap: {
-            seriesIndex:0,
+            seriesIndex: 0,
             left: 20,
             bottom: 20,
             pieces: [
@@ -79,16 +79,26 @@ export const optionHandle = (regionCode: string,
                     show: true,
                     formatter: function (params: any) {
                         if (params.data) {
-                            return params.name + "：" + params.data["value"];
+                            // console.log(params); //params是echarts的属性
+                            const res = params.data; //res等于params下的数据
+                            //return回调一个模板字符串，自定义提示框的形状
+                            return `
+                            <div class="chartTooltip">
+                                <p class="dotTooltip">${res.name}</p>
+                                <p class="textTooltip">${res.value}个</p>
+                                <p class="textTooltip">${res.value}个</p>
+                            </div>`;
                         } else {
                             return params.name;
                         }
                     },
-                    backgroundColor: "rgba(0,0,0,.6)",
-                    borderColor: "rgba(147, 235, 248, .8)",
+                    background:'none',
+                    backgroundColor: "transparent",
+                    borderColor: "transparent",
                     textStyle: {
                         color: "#FFF",
                     },
+                    padding:0,
                 },
                 label: {
                     show: true,
@@ -109,7 +119,7 @@ export const optionHandle = (regionCode: string,
                     },
                     itemStyle: {
                         // areaColor: "rgba(56,155,183,.7)",
-                        areaColor:{
+                        areaColor: {
                             type: "radial",
                             x: 0.5,
                             y: 0.5,
@@ -218,55 +228,45 @@ export const optionHandle = (regionCode: string,
     };
 }
 
-export const regionCodes: any = {
-    "翠屏区": {
-        "adcode": "511502",
-        "level": "district",
-        "name": "翠屏区"
+export const regionCodes: any = [
+    {
+        name: '翠屏区',
+        value: 1,
     },
-    "南溪区": {
-        "adcode": "511503",
-        "level": "district",
-        "name": "南溪区"
+    {
+        name: '南溪区',
+        value: 123,
     },
-    "叙州区": {
-        "adcode": "511504",
-        "level": "district",
-        "name": "叙州区"
+    {
+        name: '江安县',
+        value: 12321,
     },
-    "江安县": {
-        "adcode": "511523",
-        "level": "district",
-        "name": "江安县"
+    {
+        name: '长宁县',
+        value: 311,
     },
-    "长宁县": {
-        "adcode": "511524",
-        "level": "district",
-        "name": "长宁县"
+    {
+        name: '高县',
+        value: 2,
     },
-    "高县": {
-        "adcode": "511525",
-        "level": "district",
-        "name": "高县"
+    {
+        name: '筠连县',
+        value: 222,
     },
-    "珙县": {
-        "adcode": "511526",
-        "level": "district",
-        "name": "珙县"
+    {
+        name: '珙县',
+        value: 444,
     },
-    "筠连县": {
-        "adcode": "511527",
-        "level": "district",
-        "name": "筠连县"
+    {
+        name: '兴文县',
+        value: 12312,
     },
-    "兴文县": {
-        "adcode": "511528",
-        "level": "district",
-        "name": "兴文县"
+    {
+        name: '屏山县',
+        value: 7657,
     },
-    "屏山县": {
-        "adcode": "511529",
-        "level": "district",
-        "name": "屏山县"
+    {
+        name: '叙州区',
+        value: 21321,
     }
-}
+]

src/views/index/index.vue

@@ -1,59 +1,57 @@
-<script setup lang="ts">
-import { onMounted } from "vue";
-import ItemWrap from "@/components/item-wrap";
-import LeftTop from "./left-top.vue";
-import LeftCenter from "./left-center.vue";
-import LeftBottom from "./left-bottom.vue";
-import CenterMap from "./center-map.vue";
-import CenterBottom from "./center-bottom.vue";
-import RightTop from "./right-top.vue";
-import RightCenter from "./right-center.vue";
-import RightBottom from "./right-bottom.vue";
-
-
-</script>
-
 <template>
   <div class="index-box">
     <div class="contetn_left">
-      <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
+      <ItemWrap class="contetn_left-top contetn_lr-item" title="工单办理(日)">
         <LeftTop />
       </ItemWrap>
-      <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
+      <ItemWrap
+        class="contetn_left-center contetn_lr-item"
+        title="来源占比(日)"
+      >
         <LeftCenter />
       </ItemWrap>
       <ItemWrap
         class="contetn_left-bottom contetn_lr-item"
-        title="设备提醒"
+        title="来电实况"
         style="padding: 0 10px 16px 10px"
       >
         <LeftBottom />
       </ItemWrap>
     </div>
     <div class="contetn_center">
-      <CenterMap class="contetn_center_top" title="设备分布图" />
-      <ItemWrap class="contetn_center-bottom" title="安装计划">
+      <CenterMap class="contetn_center_top" title="案件分布" />
+      <ItemWrap class="contetn_center-bottom" title="工单类型统计(月)">
         <CenterBottom />
       </ItemWrap>
     </div>
     <div class="contetn_right">
-      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">
+      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="办理情况">
         <RightTop />
       </ItemWrap>
       <ItemWrap
         class="contetn_left-bottom contetn_lr-item"
-        title="报警排名(TOP8)"
+        title="问题高发(TOP8)"
         style="padding: 0 10px 16px 10px"
       >
         <RightCenter />
       </ItemWrap>
-      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
+      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="工单概览 ">
         <RightBottom />
       </ItemWrap>
     </div>
   </div>
 </template>
-
+<script setup lang="ts">
+import ItemWrap from "@/components/item-wrap";
+import LeftTop from "./left-top.vue";
+import LeftCenter from "./left-center.vue";
+import LeftBottom from "./left-bottom.vue";
+import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
+</script>
 <style scoped lang="scss">
 .index-box {
   width: 100%;

src/views/index/left-bottom.vue

@@ -1,57 +1,3 @@
-<script setup lang="ts">
-import { currentGET } from "@/api";
-import SeamlessScroll from "@/components/seamless-scroll";
-import { computed, onMounted, reactive } from "vue";
-import { useSettingStore } from "@/stores";
-import { storeToRefs } from "pinia";
-import EmptyCom from "@/components/empty-com"
-const settingStore = useSettingStore();
-const { defaultOption,indexConfig } = storeToRefs(settingStore);
-const state = reactive<any>({
-  list: [],
-  defaultOption: {
-    ...defaultOption.value,
-    singleHeight: 256,
-    limitScrollNum: 4,
-  },
-  scroll: true,
-});
-
-const getData = () => {
-  currentGET("leftBottom", { limitNum: 20 }).then((res) => {
-    console.log("设备提醒", res);
-    if (res.success) {
-      state.list = res.data.list;
-    } else {
-      window.$message({
-        text: res.msg,
-        type: "warning",
-      });
-    }
-  });
-};
-const addressHandle = (item: any) => {
-  let name = item.provinceName;
-  if (item.cityName) {
-    name += "/" + item.cityName;
-    if (item.countyName) {
-      name += "/" + item.countyName;
-    }
-  }
-  return name;
-};
-const comName = computed(()=>{
-    if(indexConfig.value.leftBottomSwiper){
-        return SeamlessScroll
-    }else{
-        return EmptyCom
-    }
-})
-onMounted(() => {
-  getData();
-});
-</script>
-
 <template>
   <div class="left_boottom_wrap beautify-scroll-def"  :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
     <component
@@ -106,7 +52,61 @@ onMounted(() => {
     </component>
   </div>
 </template>
+<script setup lang="ts">
+import { currentGET } from "@/api";
+import SeamlessScroll from "@/components/seamless-scroll";
+import { computed, onMounted, reactive } from "vue";
+import { useSettingStore } from "@/stores/setting";
+import { storeToRefs } from "pinia";
+import EmptyCom from "@/components/empty-com";
+import signalR from "@/utils/signalR";
+const settingStore = useSettingStore();
+const { defaultOption,indexConfig } = storeToRefs(settingStore);
+const state = reactive<any>({
+  list: [],
+  defaultOption: {
+    ...defaultOption.value,
+    singleHeight: 256,
+    limitScrollNum: 4,
+  },
+  scroll: true,
+});
 
+const getData = () => {
+  currentGET("leftBottom", { limitNum: 20 }).then((res) => {
+    console.log("设备提醒", res);
+    if (res.success) {
+      state.list = res.data.list;
+    } else {
+      window.$message({
+        text: res.msg,
+        type: "warning",
+      });
+    }
+  });
+};
+const addressHandle = (item: any) => {
+  let name = item.provinceName;
+  if (item.cityName) {
+    name += "/" + item.cityName;
+    if (item.countyName) {
+      name += "/" + item.countyName;
+    }
+  }
+  return name;
+};
+const comName = computed(()=>{
+    if(indexConfig.value.leftBottomSwiper){
+        return SeamlessScroll
+    }else{
+        return EmptyCom
+    }
+})
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea3");
+});
+</script>
 <style scoped lang="scss">
 .left_boottom_wrap {
   overflow: hidden;
@@ -151,7 +151,7 @@ onMounted(() => {
       }
 
       .zhuyao {
-        color: $primary-color;
+        color: var(--el-color-primary);
         font-size: 15px;
       }
 

src/views/index/left-center.vue

@@ -1,7 +1,11 @@
+<template>
+  <v-chart class="chart" :option="option" />
+</template>
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { graphic } from "echarts/core";
 import { currentGET } from "@/api";
+import signalR from "@/utils/signalR";
 
 let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
 const option = ref({});
@@ -31,7 +35,6 @@ const getData = () => {
     }
   });
 };
-getData();
 const setOption = () => {
   option.value = {
     title: {
@@ -45,7 +48,7 @@ const setOption = () => {
             fontSize: 24,
             fontWeight: "bold",
             lineHeight: 20,
-            padding:[4,0,4,0]
+            padding: [4, 0, 4, 0],
           },
           name: {
             color: "#ffffff",
@@ -143,10 +146,9 @@ const setOption = () => {
     ],
   };
 };
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea2");
+});
 </script>
-
-<template>
-  <v-chart class="chart" :option="option" />
-</template>
-
 <style scoped lang="scss"></style>

src/views/index/left-top.vue

@@ -1,36 +1,10 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue";
-import { currentGET } from "@/api";
-import CountUp from "@/components/count-up";
-const duration = ref(2);
-const state = reactive({
-  alarmNum: 759,
-  offlineNum: 44,
-  onlineNum: 654,
-  totalNum: 698,
-});
-
-const getData = () => {
-  currentGET("leftTop").then((res) => {
-    console.log(res);
-    if (res.success) {
-      state.alarmNum = res.data.alarmNum;
-      state.offlineNum = res.data.offlineNum;
-      state.onlineNum = res.data.onlineNum;
-      state.totalNum = res.data.totalNum;
-    }
-  });
-};
-getData();
-</script>
-
 <template>
   <ul class="user_Overview flex">
     <li class="user_Overview-item" style="color: #00fdfa">
       <div class="user_Overview_nums allnum">
         <CountUp :endVal="state.totalNum" :duration="duration" />
       </div>
-      <p>总设备数</p>
+      <p>工单办理（日）</p>
     </li>
     <li class="user_Overview-item" style="color: #07f7a8">
       <div class="user_Overview_nums online">
@@ -52,7 +26,35 @@ getData();
     </li>
   </ul>
 </template>
+<script setup lang="ts">
+import { reactive, ref,onMounted } from "vue";
+import { currentGET } from "@/api";
+import CountUp from "@/components/count-up";
+import signalR from "@/utils/signalR";
+const duration = ref(2);
+const state = reactive({
+  alarmNum: 759,
+  offlineNum: 44,
+  onlineNum: 654,
+  totalNum: 698,
+});
 
+const getData = () => {
+  currentGET("leftTop").then((res) => {
+    console.log(res);
+    if (res.success) {
+      state.alarmNum = res.data.alarmNum;
+      state.offlineNum = res.data.offlineNum;
+      state.onlineNum = res.data.onlineNum;
+      state.totalNum = res.data.totalNum;
+    }
+  });
+};
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea1");
+});
+</script>
 <style scoped lang="scss">
 .left-top {
   width: 100%;

src/views/index/right-bottom.vue

@@ -1,57 +1,3 @@
-<script setup lang="ts">
-import { currentGET } from "@/api";
-import SeamlessScroll from "@/components/seamless-scroll";
-import { computed, onMounted, reactive } from "vue";
-import { useSettingStore } from "@/stores";
-import { storeToRefs } from "pinia";
-import EmptyCom from "@/components/empty-com";
-const settingStore = useSettingStore();
-const { defaultOption, indexConfig } = storeToRefs(settingStore);
-const state = reactive<any>({
-  list: [],
-  defaultOption: {
-    ...defaultOption.value,
-    singleHeight: 252,
-    limitScrollNum: 3,
-    // step:3
-  },
-  scroll: true,
-
-});
-
-const getData = () => {
-  currentGET("rightBottom", { limitNum: 20 }).then((res) => {
-    console.log("右下", res);
-    if (res.success) {
-      state.list = res.data.list;
-    } else {
-      window.$message({
-        text: res.msg,
-        type: "warning",
-      });
-    }
-  });
-};
-
-const comName = computed(() => {
-  if (indexConfig.value.rightBottomSwiper) {
-    return SeamlessScroll;
-  } else {
-    return EmptyCom;
-  }
-});
-function montionFilter (val:any) {
-    // console.log(val);
-    return val ? Number(val).toFixed(2) : '--'
-}
-const handleAddress=(item:any)=>{
-  return `${ item.provinceName }/${item.cityName }/${item.countyName}`
-}
-onMounted(() => {
-  getData();
-});
-</script>
-
 <template>
   <div
     class="right_bottom_wrap beautify-scroll-def"
@@ -85,7 +31,7 @@ onMounted(() => {
               <div class="info">
                 <span class="labels">告警值：</span>
                 <span class="text-content warning">
-                  {{  montionFilter(item.alertvalue) }}</span
+                  {{ montionFilter(item.alertvalue) }}</span
                 >
               </div>
             </div>
@@ -93,8 +39,12 @@ onMounted(() => {
             <div class="flex">
               <div class="info">
                 <span class="labels shrink-0"> 地址：</span>
-                <span class=" ciyao truncate" style="font-size: 12px;width: 220px;" :title="handleAddress(item)">
-                  {{ handleAddress(item)}}</span
+                <span
+                  class="ciyao truncate"
+                  style="font-size: 12px; width: 220px"
+                  :title="handleAddress(item)"
+                >
+                  {{ handleAddress(item) }}</span
                 >
               </div>
               <div class="info time shrink-0">
@@ -121,6 +71,59 @@ onMounted(() => {
     </component>
   </div>
 </template>
+<script setup lang="ts">
+import { currentGET } from "@/api";
+import SeamlessScroll from "@/components/seamless-scroll";
+import { computed, onMounted, reactive } from "vue";
+import { useSettingStore } from "@/stores/setting";
+import { storeToRefs } from "pinia";
+import EmptyCom from "@/components/empty-com";
+import signalR from "@/utils/signalR";
+const settingStore = useSettingStore();
+const { defaultOption, indexConfig } = storeToRefs(settingStore);
+const state = reactive<any>({
+  list: [],
+  defaultOption: {
+    ...defaultOption.value,
+    singleHeight: 252,
+    limitScrollNum: 3,
+    // step:3
+  },
+  scroll: true,
+});
+
+const getData = () => {
+  currentGET("rightBottom", { limitNum: 20 }).then((res) => {
+    console.log("右下", res);
+    if (res.success) {
+      state.list = res.data.list;
+    } else {
+      window.$message({
+        text: res.msg,
+        type: "warning",
+      });
+    }
+  });
+};
+
+const comName = computed(() => {
+  if (indexConfig.value.rightBottomSwiper) {
+    return SeamlessScroll;
+  } else {
+    return EmptyCom;
+  }
+});
+function montionFilter(val: any) {
+  return val ? Number(val).toFixed(2) : "--";
+}
+const handleAddress = (item: any) => {
+  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
+};
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea8");
+});
+</script>
 
 <style scoped lang="scss">
 .right_bottom {
@@ -170,7 +173,7 @@ onMounted(() => {
       }
 
       .zhuyao {
-        color: $primary-color;
+        color: var(--el-color-primary);
         font-size: 15px;
       }
 

src/views/index/right-center.vue

@@ -1,18 +1,27 @@
+<template>
+  <div class="right_bottom">
+    <CapsuleChart
+      :config="config"
+      style="width: 100%; height: 260px"
+      :data="data"
+    />
+  </div>
+</template>
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import CapsuleChart from "@/components/datav/capsule-chart";
 import { currentGET } from "@/api";
-
+import signalR from "@/utils/signalR";
 const config = ref({
   showValue: true,
   unit: "次",
 });
-const data= ref([])
+const data = ref([]);
 const getData = () => {
   currentGET("rightCenter").then((res) => {
     console.log("报警排名", res);
     if (res.success) {
-      data.value =res.data;
+      data.value = res.data;
     } else {
       window["$message"]({
         text: res.msg,
@@ -21,17 +30,13 @@ const getData = () => {
     }
   });
 };
-getData();
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea7");
+});
 </script>
 
-<template>
-  <div class="right_bottom">
-    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data"/>
-  </div>
-</template>
-
 <style scoped lang="scss">
-
 .right_bottom {
   box-sizing: border-box;
   padding: 0 16px;

src/views/index/right-top.vue

@@ -1,7 +1,15 @@
+<template>
+  <v-chart
+    class="chart"
+    :option="option"
+    v-if="JSON.stringify(option) != '{}'"
+  />
+</template>
 <script setup lang="ts">
-import { ref,onMounted} from "vue";
+import { ref, onMounted } from "vue";
 import { currentGET } from "@/api";
-import {graphic} from "echarts/core"
+import { graphic } from "echarts/core";
+import signalR from "@/utils/signalR";
 const option = ref({});
 const getData = () => {
   currentGET("rightTop", {}).then((res) => {
@@ -16,216 +24,207 @@ const getData = () => {
     }
   });
 };
-const setOption =async (xData:any[], yData:any[], yData2:any[]) => {
+const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
   option.value = {
-        xAxis: {
-          type: "category",
-          data: xData,
-          boundaryGap: false, // 不留白，从原点开始
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "rgba(31,99,163,.2)",
-            },
-          },
-          axisLine: {
-            // show:false,
-            lineStyle: {
-              color: "rgba(31,99,163,.1)",
-            },
-          },
-          axisLabel: {
-            color: "#7EB7FD",
-            fontWeight: "500",
-          },
+    xAxis: {
+      type: "category",
+      data: xData,
+      boundaryGap: false, // 不留白，从原点开始
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(31,99,163,.2)",
         },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: "rgba(31,99,163,.2)",
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: "rgba(31,99,163,.1)",
-            },
-          },
-          axisLabel: {
-            color: "#7EB7FD",
-            fontWeight: "500",
-          },
+      },
+      axisLine: {
+        // show:false,
+        lineStyle: {
+          color: "rgba(31,99,163,.1)",
         },
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(0,0,0,.6)",
-          borderColor: "rgba(147, 235, 248, .8)",
-          textStyle: {
-            color: "#FFF",
-          },
+      },
+      axisLabel: {
+        color: "#7EB7FD",
+        fontWeight: "500",
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(31,99,163,.2)",
         },
-        grid: {
-          //布局
-          show: true,
-          left: "10px",
-          right: "30px",
-          bottom: "10px",
-          top: "32px",
-          containLabel: true,
-          borderColor: "#1F63A3",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "rgba(31,99,163,.1)",
         },
-        series: [
-          {
-            data: yData,
-            type: "line",
-            smooth: true,
-            symbol: "none", //去除点
-            name: "报警1次数",
-            color: "rgba(252,144,16,.7)",
-            areaStyle: {
-                //右，下，左，上
-                color: new graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(252,144,16,.7)",
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(252,144,16,.0)",
-                    },
-                  ],
-                  false
-                ),
-            },
-            markPoint: {
-              data: [
-                {
-                  name: "最大值",
-                  type: "max",
-                  valueDim: "y",
-                  symbol: "rect",
-                  symbolSize: [60, 26],
-                  symbolOffset: [0, -20],
-                  itemStyle: {
-                    color: "rgba(0,0,0,0)",
-                  },
-                  label: {
-                    color: "#FC9010",
-                    backgroundColor: "rgba(252,144,16,0.1)",
-                    borderRadius: 6,
-                    padding: [7, 14],
-                    borderWidth: 0.5,
-                    borderColor: "rgba(252,144,16,.5)",
-                    formatter: "报警1：{c}",
-                  },
-                },
-                {
-                  name: "最大值",
-                  type: "max",
-                  valueDim: "y",
-                  symbol: "circle",
-                  symbolSize: 6,
-                  itemStyle: {
-                    color: "#FC9010",
-                    shadowColor: "#FC9010",
-                    shadowBlur: 8,
-                  },
-                  label: {
-                    formatter: "",
-                  },
-                },
-              ],
+      },
+      axisLabel: {
+        color: "#7EB7FD",
+        fontWeight: "500",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+    },
+    grid: {
+      //布局
+      show: true,
+      left: "10px",
+      right: "30px",
+      bottom: "10px",
+      top: "32px",
+      containLabel: true,
+      borderColor: "#1F63A3",
+    },
+    series: [
+      {
+        data: yData,
+        type: "line",
+        smooth: true,
+        symbol: "none", //去除点
+        name: "报警1次数",
+        color: "rgba(252,144,16,.7)",
+        areaStyle: {
+          //右，下，左，上
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(252,144,16,.7)",
+              },
+              {
+                offset: 1,
+                color: "rgba(252,144,16,.0)",
+              },
+            ],
+            false
+          ),
+        },
+        markPoint: {
+          data: [
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "rect",
+              symbolSize: [60, 26],
+              symbolOffset: [0, -20],
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+              },
+              label: {
+                color: "#FC9010",
+                backgroundColor: "rgba(252,144,16,0.1)",
+                borderRadius: 6,
+                padding: [7, 14],
+                borderWidth: 0.5,
+                borderColor: "rgba(252,144,16,.5)",
+                formatter: "报警1：{c}",
+              },
             },
-          },
-          {
-            data: yData2,
-            type: "line",
-            smooth: true,
-            symbol: "none", //去除点
-            name: "报警2次数",
-            color: "rgba(9,202,243,.7)",
-            areaStyle: {
-                //右，下，左，上
-                color: new graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "rgba(9,202,243,.7)",
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(9,202,243,.0)",
-                    },
-                  ],
-                  false
-                ),
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: 6,
+              itemStyle: {
+                color: "#FC9010",
+                shadowColor: "#FC9010",
+                shadowBlur: 8,
+              },
+              label: {
+                formatter: "",
+              },
             },
-            markPoint: {
-              data: [
-                {
-                  name: "最大值",
-                  type: "max",
-                  valueDim: "y",
-                  symbol: "rect",
-                  symbolSize: [60, 26],
-                  symbolOffset: [0, -20],
-                  itemStyle: {
-                    color: "rgba(0,0,0,0)",
-                  },
-                  label: {
-                    color: "#09CAF3",
-                    backgroundColor: "rgba(9,202,243,0.1)",
+          ],
+        },
+      },
+      {
+        data: yData2,
+        type: "line",
+        smooth: true,
+        symbol: "none", //去除点
+        name: "报警2次数",
+        color: "rgba(9,202,243,.7)",
+        areaStyle: {
+          //右，下，左，上
+          color: new graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "rgba(9,202,243,.7)",
+              },
+              {
+                offset: 1,
+                color: "rgba(9,202,243,.0)",
+              },
+            ],
+            false
+          ),
+        },
+        markPoint: {
+          data: [
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "rect",
+              symbolSize: [60, 26],
+              symbolOffset: [0, -20],
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+              },
+              label: {
+                color: "#09CAF3",
+                backgroundColor: "rgba(9,202,243,0.1)",
 
-                    borderRadius: 6,
-                    borderColor: "rgba(9,202,243,.5)",
-                    padding: [7, 14],
-                    formatter: "报警2：{c}",
-                    borderWidth: 0.5,
-                  },
-                },
-                {
-                  name: "最大值",
-                  type: "max",
-                  valueDim: "y",
-                  symbol: "circle",
-                  symbolSize: 6,
-                  itemStyle: {
-                    color: "#09CAF3",
-                    shadowColor: "#09CAF3",
-                    shadowBlur: 8,
-                  },
-                  label: {
-                    formatter: "",
-                  },
-                },
-              ],
+                borderRadius: 6,
+                borderColor: "rgba(9,202,243,.5)",
+                padding: [7, 14],
+                formatter: "报警2：{c}",
+                borderWidth: 0.5,
+              },
             },
-          },
-        ],
-      };
-}
-onMounted(()=>{
-    getData();
-
-})
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: 6,
+              itemStyle: {
+                color: "#09CAF3",
+                shadowColor: "#09CAF3",
+                shadowBlur: 8,
+              },
+              label: {
+                formatter: "",
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+};
+onMounted(() => {
+  getData();
+  signalR.joinGroup("BsDataShowArea6");
+});
 </script>
-
-<template>
-  <v-chart
-    class="chart"
-    :option="option"
-    v-if="JSON.stringify(option) != '{}'"
-  />
-</template>
-
 <style scoped lang="scss"></style>

src/views/setting.vue

@@ -1,138 +1,113 @@
+<template>
+  <el-drawer
+    v-model="settingStore.settingShow"
+    direction="rtl"
+    size="360px"
+    class="setting-drawer"
+    title="设置"
+    append-to-body
+    destroy-on-close
+  >
+    <el-scrollbar class="layout-breadcrumb-seting-bar">
+      <el-divider content-position="left">全局设置</el-divider>
+      <div class="layout-breadcrumb-seting-bar-flex mt15">
+        <div class="layout-breadcrumb-seting-bar-flex-label">
+          是否进行自动适配 (默认分辨率1920*1080)
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex-value">
+          <el-switch
+            v-model="isScaleRadio"
+            size="small"
+            @change="(flag)=>isScaleChange(flag as boolean)"
+          ></el-switch>
+        </div>
+      </div>
+      <el-divider content-position="left">实时监测</el-divider>
+      <div class="layout-breadcrumb-seting-bar-flex mt15">
+        <div class="layout-breadcrumb-seting-bar-flex-label">
+          设备提醒自动轮询
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex-value">
+          <el-switch
+            v-model="leftBottomRadio"
+            size="small"
+            @change="(flag)=>indexRadioChange(flag as boolean)"
+          ></el-switch>
+        </div>
+      </div>
+      <div class="layout-breadcrumb-seting-bar-flex mt15">
+        <div class="layout-breadcrumb-seting-bar-flex-label">实时预警轮播</div>
+        <div class="layout-breadcrumb-seting-bar-flex-value">
+          <el-switch
+            v-model="rightBottomRadio"
+            size="small"
+            @change="(flag)=>indexRadioChange(flag as boolean)"
+          ></el-switch>
+        </div>
+      </div>
+    </el-scrollbar>
+  </el-drawer>
+</template>
 <script setup lang="ts">
-import { useSettingStore } from "@/stores/index";
+import { useSettingStore } from "@/stores/setting";
 import { ref } from "vue";
-import {storeToRefs} from "pinia"
+import { storeToRefs } from "pinia";
 const isScaleRadio = ref(false);
-const leftBottomRadio=ref(true)
-const rightBottomRadio=ref(true)
+const leftBottomRadio = ref(true);
+const rightBottomRadio = ref(true);
 const settingStore = useSettingStore();
-const {indexConfig}=storeToRefs(settingStore)
+const { indexConfig } = storeToRefs(settingStore);
 
 const init = () => {
   settingStore.initSetting();
   isScaleRadio.value = settingStore.isScale;
 
-  leftBottomRadio.value=indexConfig.value.leftBottomSwiper
-  rightBottomRadio.value=indexConfig.value.rightBottomSwiper
-
+  leftBottomRadio.value = indexConfig.value.leftBottomSwiper;
+  rightBottomRadio.value = indexConfig.value.rightBottomSwiper;
 };
 init();
-const handleClose = () => {};
-
-const cancelClick = () => {
-  settingStore.setSettingShow(false);
-};
-
-const confirmClick = () => {};
 const isScaleChange = (flag: boolean) => {
   settingStore.setIsScale(flag);
 };
-const radiochange = (blag: boolean) => {
-  settingStore.setIsScale(blag);
-  // this.$store.commit('setting/updateSwiper', { val, type })
-};
-const indexRadioChange=(flag: boolean)=>{
+const indexRadioChange = (flag: boolean) => {
   settingStore.setIndexConfig({
-    leftBottomSwiper: leftBottomRadio.value,//左轮播
-    rightBottomSwiper:rightBottomRadio.value,//右下轮播
+    leftBottomSwiper: leftBottomRadio.value, //左轮播
+    rightBottomSwiper: rightBottomRadio.value, //右下轮播
   });
-}
+};
 </script>
-
-<template>
-  <el-drawer v-model="settingStore.settingShow" direction="rtl" size="360px">
-    <template #header>
-      <h2 class="setting-title">设置</h2>
-    </template>
-    <template #default>
-      <div class="left_shu">全局设置</div>
-      <div class="setting_item">
-        <span class="setting_label">
-          是否进行自动适配<span class="setting_label_tip"
-            >(默认分辨率1920*1080)</span
-          >:
-        </span>
-        <div class="setting_content">
-          <el-radio-group v-model="isScaleRadio" @change="(flag)=>isScaleChange(flag as boolean)">
-            <el-radio :label="true">是</el-radio>
-            <el-radio :label="false">否</el-radio>
-          </el-radio-group>
-        </div>
-      </div>
-      <div class="left_shu">实时监测</div>
-      <div class="setting_item">
-        <span class="setting_label">
-          设备提醒自动轮询: <span class="setting_label_tip"></span>
-        </span>
-        <div class="setting_content">
-          <el-radio-group
-            v-model="leftBottomRadio"
-            @change="(flag)=>indexRadioChange(flag as boolean)"
-          >
-            <el-radio :label="true">是</el-radio>
-            <el-radio :label="false">否</el-radio>
-          </el-radio-group>
-        </div>
-      </div>
-      <div class="setting_item">
-        <span class="setting_label"> 实时预警轮播: </span>
-        <div class="setting_content">
-          <el-radio-group
-            v-model="rightBottomRadio"
-            @change="(flag)=>indexRadioChange(flag as boolean)"
-          >
-            <el-radio :label="true">是</el-radio>
-            <el-radio :label="false">否</el-radio>
-          </el-radio-group>
-        </div>
-      </div>
-    </template>
-    <!-- <template #footer>
-      <div style="flex: auto">
-        <el-button @click="cancelClick">取消</el-button>
-        <el-button type="primary" @click="confirmClick">确定</el-button>
-      </div>
-    </template> -->
-  </el-drawer>
-</template>
-
-<style scoped lang="scss">
-.setting-title {
-  font-size: 20px;
-  color: #000;
-  font-weight: 900;
-  text-align: center;
-  line-height: 1;
-}
-.left_shu {
-  color: #000;
-  font-weight: 900;
-  position: relative;
-  text-indent: 10px;
-  padding: 16px 0 10px 0;
-  line-height: 1;
-  &::before {
-    display: block;
-    content: " ";
-    height: 16px;
-    width: 4px;
-    border-radius: 2px;
-    background: #0072ff;
-    position: absolute;
-    left: 0px;
-  }
-}
-.setting_item {
-  font-size: 14px;
-  line-height: 1.5;
-
-  // display: flex;
-  .setting_label {
-    color: #555454;
+<style lang="scss">
+.setting-drawer {
+  .layout-breadcrumb-seting-bar {
+    height: calc(100vh - 50px);
+    padding: 0 15px;
+    .layout-breadcrumb-seting-bar-flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .layout-breadcrumb-seting-bar-flex-label {
+        font-size: 14px;
+      }
+      .layout-breadcrumb-seting-bar-flex-value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
   }
-  .setting_label_tip {
-    font-size: 12px;
-    color: #838282;
+  --el-drawer-padding-primary: unset !important;
+  .el-drawer__header {
+    padding: 0 15px !important;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0 !important;
+    border-bottom: 1px solid var(--el-border-color);
+    color: var(--el-text-color-primary);
+    .el-drawer__title {
+      font-size: 18px;
+      font-weight: bold;
+    }
   }
 }
 </style>

vite.config.ts

@@ -40,15 +40,7 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
         "api": resolve(__dirname, "./src/api"),
       },
     },
-    css: {
-      // css预处理器
-      preprocessorOptions: {
-        scss: {
-          // charset: false,
-          additionalData: `@use "./src/assets/css/variable.scss" as *;`,
-        },
-      },
-    },
+    css: { preprocessorOptions: { css: { charset: false } } },
     build: {
       outDir: 'dist',
     },