intelligence.html 13 KB

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