problemReport.data.ts 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import { BasicColumn, FormSchema } from '/@/components/Table';
  2. import { h } from 'vue';
  3. // import { Ref } from 'vue';
  4. // import dayjs from 'dayjs';
  5. // 1. 颜色映射(固定规则,可根据业务调整)
  6. export const colorHexMap: Record<string, string> = {
  7. blue: '#1890ff',
  8. green: '#208840',
  9. gold: '#faad14',
  10. red: '#f5222d',
  11. gray: '#8c8c8c',
  12. black: '#000000',
  13. };
  14. // 2. 定义动态映射的类型(供外部传入)
  15. export type ProductionStatusMap = Record<
  16. string | number,
  17. {
  18. label: string;
  19. value: number | string;
  20. color: string;
  21. }
  22. >;
  23. // 3. 生成表格列(支持传入动态映射)
  24. export const columns: BasicColumn[] = [
  25. {
  26. title: '煤矿名称',
  27. dataIndex: 'mineName',
  28. width: 250,
  29. },
  30. {
  31. title: '煤矿简称',
  32. dataIndex: 'mineNameAbbr',
  33. width: 150,
  34. ifShow: false,
  35. },
  36. {
  37. title: '生产状态',
  38. dataIndex: 'gjMineStatus',
  39. width: 120,
  40. // customRender: ({ record }) => {
  41. // // 空值/异常值处理
  42. // const status = record.mineProStatus;
  43. // // 从动态映射中取值,兜底未知状态
  44. // const { label, color } = dynamicStatusMap.value[status] || {
  45. // label: '-',
  46. // };
  47. // return h(
  48. // 'span',
  49. // {
  50. // style: { color: colorHexMap[color] },
  51. // },
  52. // label
  53. // );
  54. // },
  55. },
  56. {
  57. title: '在线状态',
  58. dataIndex: 'mineLinkStatus',
  59. width: 100,
  60. customRender: ({ record }) => {
  61. const status = record.mineLinkStatus;
  62. if (status === undefined || status === null) {
  63. return h('span', { style: { color: colorHexMap.black } }, '-');
  64. }
  65. const text = status === 1 ? '在线' : '离线';
  66. const textColor = status === 1 ? colorHexMap.green : colorHexMap.red;
  67. return h('span', { style: { color: textColor } }, text);
  68. },
  69. },
  70. {
  71. title: '质量问题详情',
  72. dataIndex: 'queJson',
  73. width: 400,
  74. ellipsis: true,
  75. slots: { customRender: 'queJson' },
  76. },
  77. {
  78. title: '当前状态',
  79. dataIndex: 'isOk',
  80. width: 100,
  81. customRender: ({ record }) => {
  82. const status = record.isOk;
  83. const text = status ? '已解决' : '未解决';
  84. const textColor = status ? colorHexMap.green : colorHexMap.red;
  85. return h('span', { style: { color: textColor } }, text);
  86. },
  87. },
  88. {
  89. title: '处理时间',
  90. dataIndex: 'updateTime',
  91. width: 180,
  92. },
  93. ];
  94. // 4. 查询表单配置(下拉框改为动态options)
  95. export const searchFormSchema: FormSchema[] = [
  96. {
  97. field: 'deptId',
  98. label: '煤矿名称',
  99. component: 'Input',
  100. colProps: { span: 6 },
  101. groupName: '常规查询',
  102. slot: 'mine-cascader',
  103. },
  104. {
  105. field: 'goafId',
  106. label: '密闭名称',
  107. component: 'Input',
  108. colProps: { span: 6 },
  109. groupName: '常规查询',
  110. slot: 'goaf-select',
  111. },
  112. // 启用生产状态下拉框(动态options)
  113. {
  114. field: 'gjMineStatus',
  115. label: '生产状态',
  116. component: 'JDictSelectTag',
  117. componentProps: {
  118. dictCode: 'mineProStatus',
  119. placeholder: '请选择生产状态',
  120. },
  121. colProps: { span: 6 },
  122. },
  123. {
  124. field: 'mineLinkStatus',
  125. label: '在线状态',
  126. component: 'Select',
  127. componentProps: {
  128. options: [
  129. { label: '离线', value: '0' },
  130. { label: '在线', value: '1' },
  131. ],
  132. },
  133. colProps: { span: 6 },
  134. groupName: '常规查询',
  135. show: false,
  136. },
  137. ];
  138. export const topFormSchema: FormSchema[] = [
  139. {
  140. field: 'mineName',
  141. label: '煤矿名称',
  142. component: 'Input',
  143. componentProps: {},
  144. },
  145. {
  146. field: 'devicePos',
  147. label: '密闭名称',
  148. component: 'Input',
  149. componentProps: {},
  150. },
  151. ];
  152. /** 弹框表单配置 */
  153. export const formSchema: FormSchema[] = [
  154. {
  155. field: 'queTitle',
  156. label: '问题简述',
  157. component: 'Input',
  158. required: true,
  159. rules: [
  160. { required: true, message: '请输入问题简述', trigger: 'blur' },
  161. { max: 100, message: '问题简述长度不能超过100个字符', trigger: 'blur' },
  162. ],
  163. },
  164. {
  165. field: 'startTime',
  166. label: '开始时间',
  167. component: 'DatePicker',
  168. componentProps: {
  169. showTime: true,
  170. format: 'YYYY-MM-DD HH:mm:ss',
  171. },
  172. required: true,
  173. rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
  174. },
  175. {
  176. field: 'endTime',
  177. label: '结束时间',
  178. component: 'DatePicker',
  179. componentProps: {
  180. showTime: true,
  181. format: 'YYYY-MM-DD HH:mm:ss',
  182. },
  183. required: true,
  184. rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
  185. },
  186. {
  187. field: 'queCon',
  188. label: '问题描述',
  189. component: 'InputTextArea',
  190. componentProps: {
  191. rows: 4,
  192. maxlength: 500,
  193. showCount: true,
  194. },
  195. // componentProps: {
  196. // //是否禁用
  197. // disabled: false,
  198. // },
  199. required: true,
  200. rules: [
  201. { required: true, message: '请输入问题描述', trigger: 'blur' },
  202. { max: 500, message: '问题描述长度不能超过500个字符', trigger: 'blur' },
  203. ],
  204. },
  205. {
  206. label: '密闭墙问题照片',
  207. field: 'queFileUrls',
  208. component: 'JImageUpload',
  209. componentProps: {
  210. //按钮显示文字
  211. text: '图片上传',
  212. //支持两种基本样式picture和picture-card
  213. listType: 'picture-card',
  214. //用于控制文件上传的业务路径,默认temp
  215. bizPath: 'webfile',
  216. //是否禁用
  217. disabled: false,
  218. //最大上传数量
  219. fileMax: 9,
  220. },
  221. colProps: {
  222. span: 6,
  223. },
  224. },
  225. {
  226. label: '密闭墙确认照片',
  227. field: 'okQueFileUrls',
  228. component: 'JImageUpload',
  229. componentProps: {
  230. //按钮显示文字
  231. text: '图片上传',
  232. //支持两种基本样式picture和picture-card
  233. listType: 'picture-card',
  234. //用于控制文件上传的业务路径,默认temp
  235. bizPath: 'webfile',
  236. //是否禁用
  237. disabled: false,
  238. //最大上传数量
  239. fileMax: 9,
  240. },
  241. colProps: {
  242. span: 6,
  243. },
  244. },
  245. // {
  246. // field: 'param',
  247. // label: '参数',
  248. // component: 'Input',
  249. // required: true,
  250. // rules: [
  251. // { required: true, message: '请输入参数', trigger: 'blur' },
  252. // { max: 200, message: '参数长度不能超过200个字符', trigger: 'blur' },
  253. // ],
  254. // },
  255. ];
  256. export const exportFormSchema: FormSchema[] = [
  257. {
  258. field: 'startTime',
  259. label: '开始时间',
  260. component: 'DatePicker',
  261. componentProps: {
  262. showTime: true,
  263. format: 'YYYY-MM-DD HH:mm:ss',
  264. },
  265. required: true,
  266. rules: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
  267. },
  268. {
  269. field: 'endTime',
  270. label: '结束时间',
  271. component: 'DatePicker',
  272. componentProps: {
  273. showTime: true,
  274. format: 'YYYY-MM-DD HH:mm:ss',
  275. },
  276. required: true,
  277. rules: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
  278. },
  279. ];