vue2-client 1.15.110 → 1.15.112

package/.history/src/base-client/components/his/XChart/XChart_20250812154444.vue

@@ -0,0 +1,280 @@
+<template>
+  <div ref="main" :style="{width: config.width, height: config.height}">
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XChart',
+  props: {
+    // 配置名
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: 'af-his'
+    }
+  },
+  data () {
+    return {
+      data: [],
+      // 配置项
+      config: {},
+      // 标准值
+      standardValue: 0,
+      // 标准差
+      sd: 0
+    }
+  },
+  mounted () {},
+  methods: {
+    initDome (queryParamsName, parameter) {
+      getConfigByName(queryParamsName, 'af-his', async (res) => {
+        this.config = res
+        console.log('res', res)
+        runLogic(res.data, parameter, 'af-his').then(result => {
+          this.standardValue = result[0][this.config.standardValue]
+          this.sd = result[0].sd
+          const listData = result.map(item => [item.x, item.y])
+          this.data = listData
+          this.renderChart()
+        })
+      })
+    },
+    // 渲染图表
+    renderChart () {
+      const chartDom = this.$refs.main
+      const myChart = echarts.init(chartDom)
+
+      // 计算控制线
+      const centerLine = this.standardValue
+      const sd1Upper = centerLine + this.sd
+      const sd1Lower = centerLine - this.sd
+      const sd2Upper = centerLine + 2 * this.sd
+      const sd2Lower = centerLine - 2 * this.sd
+      const sd3Upper = centerLine + 3 * this.sd
+      const sd3Lower = centerLine - 3 * this.sd
+
+      // 计算y轴范围，让靶值居中
+      const dataMin = Math.min(...this.data.map(item => item[1]))
+      const dataMax = Math.max(...this.data.map(item => item[1]))
+      const range = Math.max(dataMax - centerLine, centerLine - dataMin, this.sd * 4)
+      const yMin = centerLine - range
+      const yMax = centerLine + range
+
+      const option = {
+        title: {
+          text: this.config.title,
+          subtext: this.config.subtext,
+          left: 'center',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          },
+          subtextStyle: {
+            fontSize: 12,
+            color: '#666'
+          }
+        },
+        legend: {
+          bottom: 10,
+          data: ['测量值', '中心线', '±1SD', '±2SD', '±3SD']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: function (params) {
+            let result = `第${params[0].data[0]}次测量<br/>`
+            params.forEach(param => {
+              if (param.seriesName === '测量值') {
+                result += `${param.seriesName}: ${param.data[1]}<br/>`
+              }
+            })
+            return result
+          }
+        },
+        grid: {
+          left: '10%',
+          right: '10%',
+          top: '15%',
+          bottom: '15%'
+        },
+        xAxis: {
+          type: 'category',
+          name: '测量次数',
+          nameLocation: 'middle',
+          nameGap: 30,
+          axisLine: {
+            lineStyle: {
+              color: '#333'
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.config.formatter,
+          nameLocation: 'middle',
+          nameGap: 50,
+          nameTextStyle: {
+            color: '#333',
+            fontSize: 12
+          },
+          show: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#333'
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          axisLabel: {
+            show: true,
+            rotate: 0
+          },
+          min: yMin,
+          max: yMax,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#ddd'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            data: this.data,
+            symbol: 'circle',
+            symbolSize: 8,
+            lineStyle: {
+              color: '#1890ff',
+              width: 2
+            },
+            itemStyle: {
+              color: '#1890ff',
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            markLine: {
+              silent: true,
+              symbol: 'none',
+              lineStyle: {
+                color: '#52c41a',
+                width: 2,
+                type: 'solid'
+              },
+              data: [
+                {
+                  yAxis: centerLine,
+                  label: {
+                    formatter: `中心线: ${centerLine}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd1Upper,
+                  lineStyle: {
+                    color: '#faad14',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+1SD: ${sd1Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd1Lower,
+                  lineStyle: {
+                    color: '#faad14',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-1SD: ${sd1Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                },
+                {
+                  yAxis: sd2Upper,
+                  lineStyle: {
+                    color: '#ff7a45',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+2SD: ${sd2Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd2Lower,
+                  lineStyle: {
+                    color: '#ff7a45',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-2SD: ${sd2Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                },
+                {
+                  yAxis: sd3Upper,
+                  lineStyle: {
+                    color: '#ff4d4f',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+3SD: ${sd3Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd3Lower,
+                  lineStyle: {
+                    color: '#ff4d4f',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-3SD: ${sd3Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
+  },
+  watch: {
+    queryParamsName: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        console.log('queryParamsName', val)
+        this.initDome(val, {})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.15.110",
+  "version": "1.15.112",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -25,7 +25,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select' ,'x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire','x-import-excel-button'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select' ,'x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire','x-import-excel-button','x-chart'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -63,7 +63,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select','x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire','x-import-excel-button'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio','x-calendar', 'x-time-select','x-checkbox', 'x-title', 'x-select', 'x-tree-rows', 'x-three-test-orders', 'x-shift-schedule','x-charge','x-questionnaire','x-import-excel-button','x-chart'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -128,7 +128,8 @@ export default {
     XShiftSchedule: () => import('@vue2-client/base-client/components/his/XShiftSchedule/XShiftSchedule.vue'),
     XCharge: () => import('@vue2-client/base-client/components/his/XCharge/XCharge.vue'),
     XQuestionnaire: () => import('@vue2-client/base-client/components/his/XQuestionnaire/XQuestionnaire.vue'),
-    XImportExcelButton: () => import('@vue2-client/base-client/components/his/XImportExcelButton/XImportExcelButton.vue')
+    XImportExcelButton: () => import('@vue2-client/base-client/components/his/XImportExcelButton/XImportExcelButton.vue'),
+    XChart: () => import('@vue2-client/base-client/components/his/XChart/XChart.vue')
   },
   props: {
     // 每一行的配置

package/src/base-client/components/his/XChart/XChart.vue

@@ -0,0 +1,282 @@
+<template>
+  <div ref="main" :style="{width: config.width, height: config.height}">
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XChart',
+  props: {
+    // 配置名
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: 'af-his'
+    }
+  },
+  data () {
+    return {
+      data: [],
+      // 配置项
+      config: {},
+      // 标准值
+      standardValue: 0,
+      // 标准差
+      sd: 0
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    initDome (queryParamsName, parameter) {
+      getConfigByName(queryParamsName, 'af-his', async (res) => {
+        this.config = res
+        console.log('res', res)
+        runLogic(res.data, parameter, 'af-his').then(result => {
+          if (result != 0) {
+            this.standardValue = result[0][this.config.standardValue] != null ? result[0][this.config.standardValue] : 0
+            this.sd = result[0].sd
+            const listData = result.map(item => [item.x, item.y])
+            this.data = listData
+            this.renderChart()
+          } else {
+            this.$message.warn('没有获取到结果数据')
+          }
+        })
+      })
+    },
+    // 渲染图表
+    renderChart () {
+      const chartDom = this.$refs.main
+      const myChart = echarts.init(chartDom)
+
+      // 计算控制线
+      const centerLine = this.standardValue
+      const sd1Upper = centerLine + this.sd
+      const sd1Lower = centerLine - this.sd
+      const sd2Upper = centerLine + 2 * this.sd
+      const sd2Lower = centerLine - 2 * this.sd
+      const sd3Upper = centerLine + 3 * this.sd
+      const sd3Lower = centerLine - 3 * this.sd
+
+      // 计算y轴范围，让靶值居中
+      const yMin = centerLine - this.sd * 4
+      const yMax = centerLine + this.sd * 4
+
+      const option = {
+        title: {
+          text: this.config.title,
+          subtext: this.config.subtext,
+          left: 'center',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          },
+          subtextStyle: {
+            fontSize: 12,
+            color: '#666'
+          }
+        },
+        legend: {
+          bottom: 10,
+          data: ['测量值', '中心线', '±1SD', '±2SD', '±3SD']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: function (params) {
+            let result = `第${params[0].data[0]}次测量<br/>`
+            params.forEach(param => {
+              if (param.seriesName === '测量值') {
+                result += `${param.seriesName}: ${param.data[1]}<br/>`
+              }
+            })
+            return result
+          }
+        },
+        grid: {
+          left: '10%',
+          right: '10%',
+          top: '15%',
+          bottom: '15%'
+        },
+        xAxis: {
+          type: 'category',
+          name: '测量次数',
+          nameLocation: 'middle',
+          nameGap: 30,
+          axisLine: {
+            lineStyle: {
+              color: '#333'
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.config.formatter,
+          nameLocation: 'middle',
+          nameGap: 50,
+          nameTextStyle: {
+            color: '#333',
+            fontSize: 12
+          },
+          show: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#333'
+            }
+          },
+          axisTick: {
+            show: true
+          },
+          axisLabel: {
+            show: true,
+            rotate: 0
+          },
+          min: yMin,
+          max: yMax,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: '#ddd'
+            }
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            data: this.data,
+            symbol: 'circle',
+            symbolSize: 8,
+            lineStyle: {
+              color: '#1890ff',
+              width: 2
+            },
+            itemStyle: {
+              color: '#1890ff',
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            markLine: {
+              silent: true,
+              symbol: 'none',
+              lineStyle: {
+                color: '#52c41a',
+                width: 2,
+                type: 'solid'
+              },
+              data: [
+                {
+                  yAxis: centerLine,
+                  label: {
+                    formatter: `中心线: ${centerLine}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd1Upper,
+                  lineStyle: {
+                    color: '#faad14',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+1SD: ${sd1Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd1Lower,
+                  lineStyle: {
+                    color: '#faad14',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-1SD: ${sd1Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                },
+                {
+                  yAxis: sd2Upper,
+                  lineStyle: {
+                    color: '#ff7a45',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+2SD: ${sd2Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd2Lower,
+                  lineStyle: {
+                    color: '#ff7a45',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-2SD: ${sd2Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                },
+                {
+                  yAxis: sd3Upper,
+                  lineStyle: {
+                    color: '#ff4d4f',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `+3SD: ${sd3Upper.toFixed(2)}`,
+                    position: 'insideEndTop'
+                  }
+                },
+                {
+                  yAxis: sd3Lower,
+                  lineStyle: {
+                    color: '#ff4d4f',
+                    type: 'dashed'
+                  },
+                  label: {
+                    formatter: `-3SD: ${sd3Lower.toFixed(2)}`,
+                    position: 'insideEndBottom'
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
+  },
+  watch: {
+    queryParamsName: {
+      deep: true,
+      immediate: true,
+      handler (val) {
+        console.log('queryParamsName', val)
+        this.initDome(val, {})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

package/src/base-client/components/his/XChart/dome.vue

@@ -0,0 +1,19 @@
+<template>
+  <XChart :queryParamsName="queryParamsName"></XChart>
+</template>
+
+<script>
+import XChart from './XChart.vue'
+
+export default {
+  name: 'Dome',
+  components: {
+    XChart
+  },
+  data () {
+    return {
+      queryParamsName: 'qualityInspectionReportConfig'
+    }
+  }
+}
+</script>

package/src/router/async/router.map.js

@@ -66,7 +66,7 @@ path: 'example',
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/his/XTimeSelect/XTimeSelectDemo.vue'),
-  component: () => import('@vue2-client/base-client/components/his/XShiftSchedule/dome.vue'),
+  component: () => import('@vue2-client/base-client/components/his/XChart/dome.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/XPageViewExample/index.vue'),