看板样式调整

src/styles/kb-dialog.scss

@@ -13,7 +13,7 @@
 }
 
 .device-list-dialog .el-dialog__header .el-dialog__title {
-  font-family: YouSheBiaoTiHei, sans-serif;
+  // font-family: YouSheBiaoTiHei, sans-serif;
   font-size: 24px;
   color: #03409b;
 }

src/styles/kb.scss

@@ -373,7 +373,7 @@
   }
 
   :deep(.el-table__header-wrapper th.el-table__cell) {
-    font-family: YouSheBiaoTiHei, sans-serif;
+    // font-family: YouSheBiaoTiHei, sans-serif;
     font-size: 20px;
     font-weight: 500;
     letter-spacing: 0.5px;
@@ -384,7 +384,7 @@
 
   :deep(.el-table__body td.el-table__cell) {
     padding: 8px 0;
-    font-family: YouSheBiaoTiHei, sans-serif;
+    // font-family: YouSheBiaoTiHei, sans-serif;
     font-size: 16px;
     color: #24364f;
     background: rgb(255 255 255 / 16%);

src/utils/kb.ts

@@ -31,7 +31,8 @@ export type ChartData = {
   series: SeriesItem[]
 }
 
-export const FONT_FAMILY = 'YouSheBiaoTiHei, sans-serif'
+// export const FONT_FAMILY = 'YouSheBiaoTiHei, sans-serif'
+export const FONT_FAMILY = undefined
 export const CHART_RENDERER = 'svg'
 export const ANIMATION = {
   animationDuration: 500,
@@ -41,7 +42,7 @@ export const ANIMATION = {
 export const THEME = {
   text: {
     primary: '#24364f',
-    regular: '#7e93b7',
+    regular: '#000',
     strong: '#1f5bb8',
     black: '#3c3c3c'
   },

src/views/Home/Index.vue

@@ -12,6 +12,7 @@ const company = ref('首页')
 
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
+const supportsZoom = ref(false)
 
 let resizeObserver: ResizeObserver | null = null
 let resizeRaf = 0
@@ -21,12 +22,21 @@ const targetWrapperStyle = computed(() => ({
   height: `${DESIGN_HEIGHT * scale.value}px`
 }))
 
-const targetAreaStyle = computed(() => ({
-  width: `${DESIGN_WIDTH}px`,
-  height: `${DESIGN_HEIGHT}px`,
-  transform: `scale(${scale.value})`,
-  transformOrigin: '0 0'
-}))
+const targetAreaStyle = computed(() => {
+  const style = {
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    transformOrigin: '0 0'
+  } as Record<string, string | number>
+
+  if (supportsZoom.value) {
+    style.zoom = scale.value
+  } else {
+    style.transform = `scale(${scale.value})`
+  }
+
+  return style
+})
 
 function updateScale() {
   cancelAnimationFrame(resizeRaf)
@@ -43,12 +53,12 @@ function updateScale() {
 }
 
 onMounted(() => {
+  supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
   nextTick(updateScale)
   resizeObserver = new ResizeObserver(updateScale)
   if (wrapperRef.value) {
     resizeObserver.observe(wrapperRef.value)
   }
-
   window.addEventListener('resize', updateScale)
 })
 

src/views/Home/kb/dayfinish.vue

@@ -70,7 +70,6 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY
       }
     },

src/views/Home/kb/hdeviceType.vue

@@ -36,7 +36,6 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY
       },
       splitLine: {

src/views/Home/kb/horderTrend.vue

@@ -50,7 +50,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         formatter(value: string) {
           return formatDateLabel(value)

src/views/pms/stat/rhkb.vue

@@ -18,6 +18,7 @@ const company = ref('瑞恒')
 
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
+const supportsZoom = ref(false)
 
 let resizeObserver: ResizeObserver | null = null
 let resizeRaf = 0
@@ -27,12 +28,21 @@ const targetWrapperStyle = computed(() => ({
   height: `${DESIGN_HEIGHT * scale.value}px`
 }))
 
-const targetAreaStyle = computed(() => ({
-  width: `${DESIGN_WIDTH}px`,
-  height: `${DESIGN_HEIGHT}px`,
-  transform: `scale(${scale.value})`,
-  transformOrigin: '0 0'
-}))
+const targetAreaStyle = computed(() => {
+  const style = {
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    transformOrigin: '0 0'
+  } as Record<string, string | number>
+
+  if (supportsZoom.value) {
+    style.zoom = scale.value
+  } else {
+    style.transform = `scale(${scale.value})`
+  }
+
+  return style
+})
 
 function updateScale() {
   cancelAnimationFrame(resizeRaf)
@@ -49,12 +59,12 @@ function updateScale() {
 }
 
 onMounted(() => {
+  supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
   nextTick(updateScale)
   resizeObserver = new ResizeObserver(updateScale)
   if (wrapperRef.value) {
     resizeObserver.observe(wrapperRef.value)
   }
-
   window.addEventListener('resize', updateScale)
 })
 

src/views/pms/stat/rhkb/deviceType.vue

@@ -36,7 +36,6 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY
       },
       splitLine: {
@@ -60,7 +59,6 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
         color: THEME.text.regular,
         fontSize: 14,
         margin: 16,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY
       }
     },

src/views/pms/stat/rhkb/historyGas.vue

@@ -45,7 +45,6 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 12,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         formatter(value: string) {
           return formatMonthLabel(value)

src/views/pms/stat/rhkb/operation.vue

@@ -21,7 +21,7 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
 
   return {
     ...ANIMATION,
-    grid: { ...THEME.grid },
+    grid: { ...THEME.grid, top: 40, left: 32 },
     tooltip: createTooltip({
       trigger: 'axis',
       axisPointer: {
@@ -52,6 +52,12 @@ function getChartOption(data: ChartItem[]): echarts.EChartsOption {
     },
     yAxis: {
       type: 'value',
+      name: '运维成本(万元)',
+      nameTextStyle: {
+        color: THEME.text.regular,
+        fontSize: 13,
+        fontFamily: FONT_FAMILY
+      },
       splitNumber: 4,
       axisLine: {
         show: false

src/views/pms/stat/rhkb/orderTrend.vue

@@ -50,7 +50,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         formatter(value: string) {
           return formatDateLabel(value)

src/views/pms/stat/rhkb/todayGas.vue

@@ -25,7 +25,7 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
 
   return {
     ...ANIMATION,
-    grid: { ...THEME.grid, top: 36, right: 36 },
+    grid: { ...THEME.grid, top: 40, right: 36, left: 32 },
     tooltip: createTooltip({
       trigger: 'axis',
       axisPointer: {
@@ -75,7 +75,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         formatter(value: string) {
           return formatDateLabel(value)

src/views/pms/stat/rykb.vue

@@ -17,6 +17,7 @@ const company = ref('瑞鹰')
 
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
+const supportsZoom = ref(false)
 
 let resizeObserver: ResizeObserver | null = null
 let resizeRaf = 0
@@ -26,12 +27,21 @@ const targetWrapperStyle = computed(() => ({
   height: `${DESIGN_HEIGHT * scale.value}px`
 }))
 
-const targetAreaStyle = computed(() => ({
-  width: `${DESIGN_WIDTH}px`,
-  height: `${DESIGN_HEIGHT}px`,
-  transform: `scale(${scale.value})`,
-  transformOrigin: '0 0'
-}))
+const targetAreaStyle = computed(() => {
+  const style = {
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    transformOrigin: '0 0'
+  } as Record<string, string | number>
+
+  if (supportsZoom.value) {
+    style.zoom = scale.value
+  } else {
+    style.transform = `scale(${scale.value})`
+  }
+
+  return style
+})
 
 function updateScale() {
   cancelAnimationFrame(resizeRaf)
@@ -48,12 +58,12 @@ function updateScale() {
 }
 
 onMounted(() => {
+  supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
   nextTick(updateScale)
   resizeObserver = new ResizeObserver(updateScale)
   if (wrapperRef.value) {
     resizeObserver.observe(wrapperRef.value)
   }
-
   window.addEventListener('resize', updateScale)
 })
 

src/views/pms/stat/rykb/ryorderTrend.vue

@@ -50,7 +50,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
       axisLabel: {
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         formatter(value: string) {
           return formatDateLabel(value)

src/views/pms/stat/rykb/xjwork.vue

@@ -74,7 +74,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
         interval: 0,
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         width: 78,
         overflow: 'break'

src/views/pms/stat/rykb/zjfinish.vue

@@ -74,7 +74,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
         interval: 0,
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         width: 54,
         overflow: 'break'

src/views/pms/stat/rykb/zjwork.vue

@@ -82,7 +82,6 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
         interval: 0,
         color: THEME.text.regular,
         fontSize: 14,
-        fontWeight: 500,
         fontFamily: FONT_FAMILY,
         width: 78,
         overflow: 'break'