dataQuality.data.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import { BasicColumn, FormSchema } from '/@/components/Table';
  2. import { h } from 'vue';
  3. import { Ref } from 'vue';
  4. // 1. 颜色映射(固定规则,可根据业务调整)
  5. export const colorHexMap: Record<string, string> = {
  6. blue: '#1890ff',
  7. green: '#208840',
  8. gold: '#faad14',
  9. red: '#f5222d',
  10. gray: '#8c8c8c',
  11. black: '#000000',
  12. };
  13. // 2. 定义动态映射的类型(供外部传入)
  14. export type ProductionStatusMap = Record<string | number, {
  15. label: string;
  16. value: number | string;
  17. color: string;
  18. }>;
  19. // 3. 生成表格列(支持传入动态映射)
  20. export function getColumns(dynamicStatusMap: Ref<ProductionStatusMap>) {
  21. const columns: BasicColumn[] = [
  22. {
  23. title: '煤矿名称',
  24. dataIndex: 'mineName',
  25. width: 250,
  26. },
  27. {
  28. title: '煤矿简称',
  29. dataIndex: 'mineNameAbbr',
  30. width: 150,
  31. },
  32. {
  33. title: '生产状态',
  34. dataIndex: 'mineProStatus',
  35. width: 120,
  36. customRender: ({ record }) => {
  37. // 空值/异常值处理
  38. const status = record.mineProStatus;
  39. // 从动态映射中取值,兜底未知状态
  40. const { label, color } = dynamicStatusMap.value[status] || {
  41. label: '-',
  42. };
  43. return h('span', {
  44. style: { color: colorHexMap[color] }
  45. }, label);
  46. },
  47. },
  48. {
  49. title: '在线状态',
  50. dataIndex: 'mineLinkStatus',
  51. width: 100,
  52. customRender: ({ record }) => {
  53. const status = record.mineLinkStatus;
  54. if (status === undefined || status === null) {
  55. return h('span', { style: { color: colorHexMap.black } }, '/');
  56. }
  57. const text = status === 1 ? '在线' : '离线';
  58. const textColor = status === 1 ? colorHexMap.green : colorHexMap.red;
  59. return h('span', { style: { color: textColor } }, text);
  60. },
  61. },
  62. {
  63. title: '质量问题详情',
  64. dataIndex: 'queJson',
  65. width: 400,
  66. ellipsis: true,
  67. slots: { customRender: 'queJson' },
  68. },
  69. {
  70. title: '当前状态',
  71. dataIndex: 'isOk',
  72. width: 100,
  73. customRender: ({ record }) => {
  74. const status = record.isOk;
  75. const text = status ? '已解决' : '未解决';
  76. const textColor = status ? colorHexMap.green : colorHexMap.red;
  77. return h('span', { style: { color: textColor } }, text);
  78. },
  79. },
  80. {
  81. title: '处理时间',
  82. dataIndex: 'updateTime',
  83. width: 180,
  84. },
  85. ];
  86. return columns;
  87. }
  88. // 4. 查询表单配置(下拉框改为动态options)
  89. export function getSearchFormSchema(dynamicStatusOptions: Ref<{ label: string; value: string | number }[]>) {
  90. const searchFormSchema: FormSchema[] = [
  91. {
  92. field: 'mineCode',
  93. label: '煤矿名称',
  94. component: 'MineCascader',
  95. colProps: { span: 6 },
  96. groupName: '常规查询',
  97. },
  98. // 启用生产状态下拉框(动态options)
  99. {
  100. field: 'productionStatus',
  101. label: '生产状态',
  102. component: 'Select',
  103. componentProps: {
  104. // 动态绑定下拉选项
  105. options: dynamicStatusOptions,
  106. },
  107. colProps: { span: 6 },
  108. groupName: '常规查询',
  109. },
  110. {
  111. field: 'mineLinkStatus',
  112. label: '在线状态',
  113. component: 'Select',
  114. componentProps: {
  115. options: [
  116. { label: '离线', value: '0' },
  117. { label: '在线', value: '1' },
  118. ],
  119. },
  120. colProps: { span: 6 },
  121. groupName: '常规查询',
  122. },
  123. ];
  124. return searchFormSchema;
  125. }
  126. export const topFormSchema: FormSchema[] = [
  127. {
  128. field: 'mineCode',
  129. label: '煤矿名称',
  130. component: 'MineCascader',
  131. required: true,
  132. },
  133. ];
  134. /** 弹框表单配置 */
  135. export const formSchema = [
  136. {
  137. field: 'goafName',
  138. label: '工作面名称',
  139. component: 'Input',
  140. },
  141. {
  142. field: 'queCon',
  143. label: '问题描述',
  144. component: 'Input',
  145. },
  146. {
  147. field: 'startTime',
  148. label: '开始时间',
  149. component: 'DatePicker',
  150. componentProps: {
  151. showTime: true,
  152. format: 'YYYY-MM-DD HH:mm:ss',
  153. },
  154. required: true,
  155. },
  156. {
  157. field: 'endTime',
  158. label: '结束时间',
  159. component: 'DatePicker',
  160. componentProps: {
  161. showTime: true,
  162. format: 'YYYY-MM-DD HH:mm:ss',
  163. },
  164. required: true,
  165. },
  166. {
  167. field: 'param',
  168. label: '参数',
  169. component: 'Input',
  170. required: true,
  171. },
  172. ];