intelligence.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="keywords" content="dongke,mes,ibossmes">
  6. <meta name="description" content="制造企业生产过程执行管理系统">
  7. <meta name="author" content="xuwei">
  8. <title>东科软件</title>
  9. <link rel="shortcut icon" href="/img/logo.png" />
  10. <link rel="bookmark" href="/img/logo.png" />
  11. <link rel="stylesheet" type="text/css" href="/plugins/easyui/themes/dongke/easyui.css">
  12. <link rel="stylesheet" type="text/css" href="/plugins/easyui/themes/icon.css">
  13. <link rel="stylesheet" type="text/css" href="/plugins/xeasyui/xuwell.css">
  14. <script type="text/javascript" src="/plugins/easyui/jquery.min.js"></script>
  15. <script type="text/javascript" src="/plugins/easyui/jquery.easyui.min.js"></script>
  16. <script type="text/javascript" src="/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
  17. <script type="text/javascript" src="/plugins/xeasyui/xuwell.js"></script>
  18. <link href="/plugins/xeasyui/toolbar.min.css" rel="stylesheet" />
  19. <style>
  20. .inp {
  21. width: 120px;
  22. height: 28px;
  23. border: 0;
  24. }
  25. .combobox {
  26. color: #fff;
  27. background-color: #444;
  28. }
  29. </style>
  30. </head>
  31. <body class="easyui-layout">
  32. <div id="toolbarLayout" data-options="border:false,region:'north',title:'',iconCls:'icon-grid'">
  33. <!--工具条-->
  34. <div id="tb" class="i-toolbar">
  35. <a class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="jump()">添加</a>
  36. <a class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="tbReportEdit()">修改</a>
  37. <a class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="deletelick()">删除</a>
  38. <a class="easyui-linkbutton" iconcls="icon-search" plain="true" onclick="showReport()">预览</a>
  39. <a class="easyui-linkbutton" iconcls="icon-excel" plain="true" onclick="tbExport()">导出</a>
  40. <a class="easyui-linkbutton" iconcls="icon-reload" plain="true" onclick="restore()">刷新</a>
  41. <a class="easyui-linkbutton" iconcls="icon-print" plain="true" onclick="downfile()">下载附件</a>
  42. <div id="tbSearchDiv" style="display: block; padding: 10px;">
  43. <div>
  44. 时间:
  45. <input id="opentime" type="text" class="easyui-datebox" style="width:165px; height:32px;">
  46. -
  47. <input id="closetime" type="text" class="easyui-datebox" style="width:165px; height:32px;">
  48. </div>
  49. <div style="padding-top:10px;">
  50. 项目名称:
  51. <input id="name" class="inp">
  52. 参与人员:
  53. <input id="people" class="inp" placeholder="多人请用/进行连接">
  54. <select id="modelSelect" class="combobox inp">
  55. <option selected value="">请选择型号</option>
  56. </select>
  57. <a class="easyui-linkbutton" onclick="select()">搜索</a>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div id="tableLayout" data-options="singleSelect:true,border:false,region:'center',split:true,title:'',iconCls:'icon-grid'" title="East" style="width:700px;">
  63. <div id="tableTabs" class="easyui-tabs" data-options="singleSelect:true,border:false" style="width: 100%; height: 100%">
  64. <div title="质量经验库">
  65. <table id="myTable" class="easyui-datagrid" data-options="method:'get',border:false,fit:true,fitColumns:true">
  66. <thead>
  67. <tr>
  68. <th data-options="field:'id',title:'id',align:'center',sortable:false,checkbox:true,hidden:true"></th>
  69. <th data-options="field:'name',title:'项目名称',align:'center',sortable:false"></th>
  70. <th data-options="field:'modelid',title:'产品ID',align:'center',sortable:false,hidden:true"></th>
  71. <th data-options="field:'modelname',title:'产品编码',align:'center',sortable:false"></th>
  72. <th data-options="field:'participants',title:'参与人员',align:'center',sortable:false"></th>
  73. <th data-options="field:'problem',title:'问题',align:'center',sortable:false"></th>
  74. <th data-options="field:'solution',title:'解决方式',align:'center',sortable:false"></th>
  75. <th data-options="field:'solutioneffect',title:'解决效果',align:'center',sortable:false"></th>
  76. <th data-options="field:'showannex',title:'项目相关资料',align:'center',sortable:false"></th>
  77. <th data-options="field:'createtime',title:'创建时间',align:'center',sortable:false"></th>
  78. <th data-options="field:'username',title:'创建人',align:'center',sortable:false"></th>
  79. </tr>
  80. </thead>
  81. </table>
  82. </div>
  83. </div>
  84. </div>
  85. <script>
  86. var width = 1280;
  87. var height = 720;
  88. /**加载前调用*/
  89. $(document).ready(function () {
  90. getcontent();
  91. getproductmodel();
  92. });
  93. /**导出*/
  94. const tbExport=() =>{
  95. /**中文标题映射 */
  96. const fieldMap = {
  97. 'name': '项目名称',
  98. 'modelname': '产品编码',
  99. 'participants': '参与人员',
  100. 'problem': '问题',
  101. 'solution': '解决方式',
  102. 'solutioneffect': '解决效果',
  103. 'showannex': '项目相关资料',
  104. 'createtime': '创建时间',
  105. 'username': '创建人'
  106. };
  107. //加载表头
  108. const fields = $('#myTable').datagrid('getColumnFields');
  109. const headers = [];
  110. for (var i = 0; i < fields.length; i++) {
  111. var chineseHeader = fieldMap[fields[i]] || fields[i];
  112. headers.push(chineseHeader);
  113. }
  114. $('#myTable').datagridExport({
  115. headers: headers,
  116. fileName: '导出数据(质量经验库).xls',
  117. workSheet: '导出数据(质量经验库)'
  118. //,dataType: 'text'
  119. });
  120. };
  121. /**添加 */
  122. const jump = () => {
  123. $('#myTable').datagridDialog({
  124. title: '编辑数据',
  125. //width: window.screen.width - 100,
  126. //height: window.screen.height - 200,
  127. width: width,
  128. height: height,
  129. url: 'Richtext.html'
  130. });
  131. };
  132. /**获取所有内容 */
  133. const getcontent = () => {
  134. $.get("/mes/pc/intelligence/Richtext.ashx?m=get", function (data) {
  135. /**填充表格*/
  136. toshow(data);
  137. })
  138. };
  139. /**刷新 */
  140. const restore = () => {
  141. /**重置data输入框*/
  142. $('#opentime, #closetime').datebox();
  143. /** 重置文本输入框的值*/
  144. document.getElementById('name').value = '';
  145. document.getElementById('people').value = '';
  146. /**重置下拉选择框的值(选择第一个选项,即默认选项)*/
  147. var selectElement = document.getElementById('modelSelect');
  148. selectElement.selectedIndex = 0;
  149. /** 使read恢复初始状态 */
  150. read = Object.assign({}, {
  151. opentime: '',
  152. closetime: '',
  153. name: '',
  154. people: '',
  155. modelid: ''
  156. });
  157. /**获取所有内容*/
  158. getcontent();
  159. }
  160. /**填充表格*/
  161. const toshow = (data) => {
  162. //将数据转换成json
  163. var json = JSON.parse(data);
  164. //遍历数据
  165. json.forEach(ex => {
  166. //获取问题的文本内容(网页换成文本)
  167. ex.problem = extractTextFromHTML(ex.problem);
  168. //表格展示文件名称
  169. ex.showannex = ex.annex.substr(ex.annex.lastIndexOf('/') + 1);
  170. //文件下载路径
  171. ex.annex = ex.annex;
  172. })
  173. //填充表格
  174. $('#myTable').datagrid({
  175. data: json,
  176. //配置项,显示选中行数据
  177. onSelect: function (rowIndex, rowData) {
  178. // 获取当前datagrid对象
  179. var dg = $(this);
  180. // 获取所有行的索引
  181. var rows = dg.datagrid('getRows');
  182. var rowIndices = $.map(rows, function (row, index) {
  183. return index;
  184. });
  185. // 遍历所有行,取消选中状态(如果有的话)
  186. $.each(rowIndices, function (i, index) {
  187. // 取消选中所有行(除了当前点击的行)
  188. if (index !== rowIndex) {
  189. dg.datagrid('unselectRow', index);
  190. }
  191. });
  192. }
  193. });
  194. }
  195. /** 将问题过滤成文本内容*/
  196. const extractTextFromHTML = (htmlString) => {
  197. const parser = new DOMParser();
  198. const doc = parser.parseFromString(htmlString, 'text/html');
  199. // 使用 textContent 直接获取所有文本
  200. const textContent = doc.body.textContent || '';
  201. return textContent.trim();
  202. };
  203. /**下载附件 */
  204. const downfile = () => {
  205. var selectedRow = $('#myTable').datagrid('getSelected');
  206. if (selectedRow) {
  207. var a = document.createElement("a");
  208. a.href = selectedRow.annex;
  209. a.download = selectedRow.annex.substr(selectedRow.annex.lastIndexOf('/') + 1);
  210. document.body.appendChild(a);
  211. a.click();
  212. document.body.removeChild(a);
  213. }
  214. };
  215. /**修改 */
  216. const tbReportEdit=()=> {
  217. var selectedRow = $('#myTable').datagrid('getSelected');
  218. $('#myTable').datagridDialog({
  219. title: '编辑数据',
  220. //width: window.screen.width - 100,
  221. //height: window.screen.height - 200,
  222. width: width,
  223. height: height,
  224. url: 'Richtext.html?id=' + selectedRow.id
  225. });
  226. }
  227. /**查看 */
  228. const showReport = () => {
  229. var selectedRow = $('#myTable').datagrid('getSelected');
  230. $('#myTable').datagridDialog({
  231. title: '预览数据',
  232. width: width,
  233. height: height,
  234. url: 'Richtext.html?id=' + selectedRow.id+'&show=true'
  235. });
  236. }
  237. // 响应式数据:产品型号列表
  238. let models = [];
  239. /** 获取产品型号 */
  240. const getproductmodel = () => {
  241. $.get("Richtext.ashx?m=getproductmodel", function (data) {
  242. var json = JSON.parse(data);
  243. models = json;
  244. loadModelsToSelect();
  245. })
  246. };
  247. /** 加载型号到 select 元素中 */
  248. const loadModelsToSelect = () => {
  249. const select = document.getElementById('modelSelect');
  250. // 遍历模型数组并添加选项
  251. models.forEach(model => {
  252. const option = document.createElement('option');
  253. option.value = model.ID;
  254. option.textContent = model.GOODSCODE;
  255. select.appendChild(option);
  256. });
  257. // 监听选择变化
  258. select.addEventListener('change', function () {
  259. read.modelid = this.value;
  260. });
  261. };
  262. /**搜索*/
  263. const select = () => {
  264. $.ajax({
  265. url: "intelligence.ashx?m=getcontent",
  266. type: "POST",
  267. data: read,
  268. //要传递json时
  269. // contentType: "application/json; charset=utf-8",
  270. // data: JSON.stringify(formData),
  271. success: function (data) {
  272. toshow(data);
  273. },
  274. error: function (xhr, status, error) {
  275. console.error("请求失败: " + error);
  276. }
  277. });
  278. }
  279. /**搜索对象 */
  280. let read = {
  281. /**开始时间*/
  282. opentime:'',
  283. /**结束时间*/
  284. closetime:'',
  285. /**项目名称*/
  286. name:'',
  287. /** 参与人员*/
  288. people:'',
  289. /**产品型号*/
  290. modelid:''
  291. }
  292. // 监听普通文本框的变化
  293. $('#name, #people').on('input', function () {
  294. const key = this.id;
  295. read[key] = $(this).val();
  296. });
  297. // 监听easyui-datebox的变化
  298. $('#opentime, #closetime').datebox({
  299. onChange: function (newValue, oldValue) {
  300. const key = this.id;
  301. read[key] = newValue; // 或者根据需要转换为字符串
  302. }
  303. });
  304. // 监听easyui-combobox的变化
  305. $('#modelid').combobox({
  306. onChange: function (newValue, oldValue) {
  307. read.modelid = newValue;
  308. }
  309. });
  310. /**删除 */
  311. const deletelick = async() => {
  312. var selectedRow = $('#myTable').datagrid('getSelected');
  313. const data = await $.ajax({
  314. url: "Richtext.ashx?m=deletedata",
  315. type: "POST",
  316. data: { id: selectedRow.id},
  317. dataType: "json"
  318. });
  319. console.log('data', data)
  320. if (data == 200) {
  321. getcontent();
  322. }
  323. else {
  324. console.warn('删除失败')
  325. }
  326. }
  327. </script>
  328. </body>
  329. </html >