intelligence.html 13 KB

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