Index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
  1. <template>
  2. <el-dialog
  3. :close-on-click-modal="false"
  4. :close-on-press-escape="false"
  5. :title="title"
  6. :append-to-body="true"
  7. :visible.sync="isVisible"
  8. width="1000px"
  9. top="150px"
  10. >
  11. <div class="app-container">
  12. <!-- 货架区域 -->
  13. <div class="areaDiv" style="width: 100%;overflow-x: auto;">
  14. <!-- 货架(单个) -->
  15. <template>
  16. <div class="tableBlock" v-for="item in shelvesTreeList" :key="item.id">
  17. <!-- 上部分-是个统计数据 -->
  18. <div class="topDiv">
  19. <span class="topSpan allTongji">
  20. <span>{{$t("lineSide.common.allCount")}}:</span>
  21. <countTo :duration="3000" :end-val="parseInt(item.allCount)" :start-val="0"/>
  22. </span>
  23. <span class="topSpan cunTongji">
  24. <span>{{$t("lineSide.common.stockCount")}}:</span>
  25. <countTo :duration="3000" :end-val="parseInt(item.stockCount)" :start-val="0"/>
  26. </span>
  27. <span class="topSpan lockTongji">
  28. <span>{{$t("lineSide.common.lockCount")}}:</span>
  29. <countTo :duration="3000" :end-val="parseInt(item.lockCount)" :start-val="0"/>
  30. </span>
  31. <span class="topSpan emptyTongji">
  32. <span>{{$t("lineSide.common.freeCount")}}:</span>
  33. <countTo :duration="3000" :end-val="parseInt(item.freeCount)" :start-val="0"/>
  34. </span>
  35. </div>
  36. <!-- 中部-货架小格子 -->
  37. <table class="contentDiv" border="0" cellspacing="0" cellpadding="6">
  38. <tr v-for="(objTr, objIndex) in item.children" :key="objIndex">
  39. <td v-for="objTd in objTr.children" :key="objTd.toolId"
  40. :class="{ 'blueBg': objTd.toolHandleId, 'redBg': objTd.tdBackground }"
  41. @dblclick="editOne(objTd)">
  42. {{objTd.no}}
  43. <template slot-scope="scope">
  44. <!-- 示例中假设 scope 中有一个属性叫 inputModel,用于绑定输入框的值 -->
  45. <el-input v-model="objTd.toolHandleCode" placeholder="Input"></el-input>
  46. </template>
  47. <el-image v-if="objTd.lockStatus == '0'" class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
  48. <div>
  49. </div>
  50. </td>
  51. </tr>
  52. </table>
  53. <!-- 下部-货架名称编号 -->
  54. <div class="footerDiv">{{item.name}}({{item.no}})</div>
  55. <span style="font-size: 18px;">还需要放入 <span style="color: red;font-size: 30px;">{{ remainingToolCount }}</span> 把刀</span>
  56. <el-button class="el-button--primary generateTask" @click="taskExcute()">确定</el-button>
  57. </div>
  58. </template>
  59. </div>
  60. <tenant-edit
  61. ref="edit"
  62. :dialog-visible="dialog.isVisible"
  63. :title="dialog.title"
  64. @close="editClose"
  65. @success="editSuccess"
  66. />
  67. <tenant-view
  68. ref="view"
  69. :dialog-visible="tenantViewVisible"
  70. @close="viewClose"
  71. />
  72. <el-dialog
  73. v-el-drag-dialog
  74. :close-on-click-modal="false"
  75. :close-on-press-escape="true"
  76. title="预览"
  77. width="80%"
  78. top="50px"
  79. :visible.sync="preview.isVisible"
  80. >
  81. <el-scrollbar>
  82. <div v-html="preview.context" />
  83. </el-scrollbar>
  84. </el-dialog>
  85. </div>
  86. </el-dialog>
  87. </template>
  88. <script>
  89. import TenantEdit from "./Edit.vue"
  90. import TenantView from "./View.vue"
  91. // 【区域管理】-API
  92. import areaMgrAPI from "@/api/resourceProductMgr/areaMgr"
  93. // 【边线库管理】-API
  94. import lineSideMgrApi from "@/api/lineSideLibrary/lineSideMgr"
  95. import elDragDialog from '@/directive/el-drag-dialog'
  96. import { downloadFile, initEnums, initDicts, initQueryParams } from '@/utils/commons'
  97. import axios from 'axios'
  98. // 加载动态数字组件
  99. import countTo from 'vue-count-to'
  100. export default {
  101. name: "LineSideEmulate",
  102. directives: { elDragDialog },
  103. components: { TenantEdit, TenantView, countTo },
  104. props: {
  105. deviceId: {
  106. type: String,
  107. default:''
  108. },
  109. dialogVisible: {
  110. type: Boolean,
  111. default: false
  112. },
  113. title: {
  114. type: String,
  115. default: ''
  116. },
  117. toolCategory:[]
  118. },
  119. data () {
  120. return {
  121. url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  122. toolsImg: 'tools.png',
  123. programImg: 'program.png',
  124. lockImg: 'locked.png',
  125. srcList: [
  126. 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  127. 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  128. ],
  129. topTongjiData: {"shelvesCount": 0, "storgeCount": 0,"instockCount": 0,"freestockCount": 0,"lockstockCount": 0},
  130. shelvesTreeList: [], // 货架数据
  131. audioStatus: [],
  132. dialog: {
  133. isVisible: false,
  134. title: ""
  135. },
  136. preview: {
  137. isVisible: false,
  138. context: ''
  139. },
  140. toolHandleCode: '',
  141. toolCode: '',
  142. tenantViewVisible: false,
  143. tableKey: 0,
  144. queryParams: initQueryParams({}),
  145. selection: [],
  146. loading: false,
  147. tableData: {
  148. total: 0
  149. },
  150. dicts: {
  151. NATION: {}
  152. },
  153. enums: {
  154. TenantTypeEnum: {},
  155. TenantStatusEnum: {}
  156. },
  157. cellSelections: [],
  158. }
  159. },
  160. // 实例已经在内存中创建好,此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法,最早只能在created中操作
  161. created() {
  162. // 加载列表数据-按区域
  163. console.log("经过这里"+this.deviceId)
  164. this.getTabList()
  165. },
  166. watch: {
  167. 'deviceId': {
  168. handler(val, oldVal) {
  169. console.log("经过这里2"+this.deviceId)
  170. // 加载列表数据
  171. this.getTabList()
  172. }
  173. }
  174. },
  175. computed: {
  176. isVisible: {
  177. get () {
  178. return this.dialogVisible
  179. },
  180. set () {
  181. this.close()
  182. this.reset()
  183. },
  184. },
  185. remainingToolCount() {
  186. const count = this.toolCategory.length - this.cellSelections.length;
  187. console.log('remainingToolCount:', count);
  188. return count;
  189. },
  190. currentUser () {
  191. return this.$store.state.account.user
  192. },
  193. nationList() {
  194. return convertEnum(this.dicts.NATION)
  195. }
  196. },
  197. mounted () {
  198. },
  199. methods: {
  200. change(){
  201. this.$forceUpdate(); //强制刷新
  202. },
  203. // 加载背景颜色
  204. setBackground(color){
  205. return "background: "+ color +";"
  206. },
  207. // 加载【本地图片】
  208. resolveLogo(logo) {
  209. return require(`@/assets/icon/${logo}`);
  210. },
  211. viewClose () {
  212. this.tenantViewVisible = false
  213. },
  214. editClose () {
  215. this.dialog.isVisible = false
  216. },
  217. editSuccess () {
  218. //this.search()
  219. this.getTabList();
  220. },
  221. onSelectChange (selection) {
  222. this.selection = selection
  223. },
  224. search () {
  225. this.fetch({
  226. ...this.queryParams
  227. })
  228. },
  229. close () {
  230. this.$emit('close')
  231. },
  232. reset () {
  233. this.queryParams = initQueryParams({})
  234. this.search()
  235. },
  236. add () {
  237. this.$refs.edit.type = "add"
  238. this.$refs.edit.setTenant(false, this.dicts)
  239. this.dialog.title = this.$t("common.add")
  240. this.dialog.isVisible = true
  241. },
  242. singleDelete (row) {
  243. this.$refs.table.clearSelection()
  244. this.$refs.table.toggleRowSelection(row, true)
  245. this.batchDelete()
  246. },
  247. batchDelete () {
  248. if (!this.selection.length) {
  249. this.$message({
  250. message: this.$t("tips.noDataSelected"),
  251. type: "warning"
  252. })
  253. return
  254. }
  255. this.$confirm(this.$t("lineSide.tips.wareTips"), this.$t("common.tips"), {
  256. distinguishCancelAndClose: true,
  257. confirmButtonText: this.$t("common.confirm"),
  258. cancelButtonText: this.$t("common.cancel"),
  259. type: "warning"
  260. }).then(() => {
  261. const ids = []
  262. this.selection.forEach(item => {
  263. ids.push(item.id)
  264. })
  265. this.delete(ids)
  266. }).catch(() => {})
  267. },
  268. clearSelections () {
  269. this.$refs.table.clearSelection()
  270. },
  271. delete (ids) {
  272. areaMgrAPI.remove({ ids: ids }).then(response => {
  273. const res = response.data
  274. if (res.isSuccess) {
  275. this.$message({
  276. message: this.$t("tips.deleteSuccess"),
  277. type: "success"
  278. })
  279. this.search()
  280. // 清理已经删除的数据
  281. this.$refs.table.clearSelection()
  282. }
  283. })
  284. },
  285. view (row) {
  286. this.$refs.view.setTenant(row)
  287. this.tenantViewVisible = true
  288. },
  289. // 【修改】表头上Btn-事件
  290. editOne(row) {
  291. this.edit(row);
  292. },
  293. selectCell(objTd) {
  294. objTd.selected = !objTd.selected;
  295. const count = this.toolCategory.length - this.cellSelections.length;
  296. if(objTd.selected){
  297. if(count <= 0){
  298. return
  299. }
  300. objTd.tdBackground=true;
  301. this.cellSelections.push(objTd.id)
  302. }else{
  303. objTd.tdBackground=false;
  304. const index = this.cellSelections.indexOf(objTd.id);
  305. if (index !== -1) {
  306. this.cellSelections.splice(index, 1);
  307. }
  308. }
  309. },
  310. edit (row) {
  311. console.log("row:",)
  312. this.$refs.edit.setTenant(row, this.dicts)
  313. this.$refs.edit.type = "edit"
  314. if(this.deviceId){
  315. this.$refs.edit.showFlag = false
  316. }else{
  317. this.$refs.edit.showFlag = true
  318. }
  319. this.dialog.title = this.$t("lineSide.common.strogeTool")
  320. this.dialog.isVisible = true
  321. },
  322. fetch (params = {}) {
  323. this.loading = true
  324. if (this.queryParams.timeRange) {
  325. this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
  326. this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
  327. }
  328. this.queryParams.current = params.current ? params.current : this.queryParams.current
  329. this.queryParams.size = params.size ? params.size : this.queryParams.size
  330. areaMgrAPI.page(this.queryParams).then(response => {
  331. const res = response.data
  332. if (res.isSuccess) {
  333. this.tableData = res.data
  334. }
  335. // eslint-disable-next-line no-return-assign
  336. }).finally(() => this.loading = false)
  337. },
  338. cellClick (row, column) {
  339. if (column['columnKey'] === "operation") {
  340. return
  341. }
  342. let flag = false
  343. this.selection.forEach((item) => {
  344. if (item.id === row.id) {
  345. flag = true
  346. this.$refs.table.toggleRowSelection(row)
  347. }
  348. })
  349. if (!flag) {
  350. this.$refs.table.toggleRowSelection(row, true)
  351. }
  352. },
  353. // 获取列表数据
  354. getTabList(){
  355. console.log("deviceId:"+this.deviceId)
  356. lineSideMgrApi.iconListV2({}).then(res => {
  357. res = res.data
  358. console.log("方块列表:", res)
  359. if(res.isSuccess){
  360. let filteredData;
  361. if(this.deviceId){
  362. filteredData = res.data.shelvesTreeList.filter(item => item.deviceId === this.deviceId && item.toolType === "1");
  363. }else{
  364. filteredData = res.data.shelvesTreeList.filter(item => item.toolType === "4");
  365. }
  366. console.log("filteredData:",filteredData)
  367. // 设备的货架数据
  368. this.shelvesTreeList = filteredData
  369. // 统计数据
  370. this.topTongjiData = {
  371. "freestockCount": res.data.freestockCount,
  372. "instockCount": res.data.instockCount,
  373. "lockstockCount": res.data.lockstockCount,
  374. "shelvesCount": res.data.shelvesCount,
  375. "storgeCount": res.data.storgeCount
  376. }
  377. }
  378. })
  379. }
  380. }
  381. }
  382. </script>
  383. <!-- 全局样式-通过定义父DOM的calss,来只影响本组件 -->
  384. <style type="text/css">
  385. .areaDiv .el-progress-bar__innerText{
  386. position: relative;
  387. top: -2px;
  388. }
  389. .areaDiv .el-card__body{
  390. display: flex;
  391. justify-content: center;
  392. align-items: center;
  393. flex-direction: column;
  394. padding: 10px;
  395. min-height: 190px;
  396. }
  397. </style>
  398. <!-- 本组件样式 -->
  399. <style lang="scss" scoped>
  400. .blockDiv{
  401. position: relative;
  402. border: 1px solid #EEEEEE;
  403. padding-left: 15px;
  404. -moz-border-radius: 5px;
  405. -webkit-border-radius: 5px;
  406. border-radius: 5px;
  407. text-align: center;
  408. color: white;
  409. -moz-box-shadow: 1px 5px 5px #c0b7b7;
  410. webkit-box-shadow: 1px 5px 5px #c0b7b7;
  411. box-shadow: 1px 5px 5px #c0b7b7;
  412. h1{
  413. margin: 20px;
  414. font-size: 45px;
  415. }
  416. p{
  417. text-align: left;
  418. color: #FFFFFF;
  419. }
  420. }
  421. .danweiSpan{
  422. display: inline-block;
  423. font-size: 16px;
  424. color: black;
  425. }
  426. .blockBg1{
  427. background: #0F79DC;
  428. border: 1px solid #0F79DC;
  429. }
  430. .blockBg2{
  431. background: #8E66E4;
  432. border: 1px solid #8E66E4;
  433. }
  434. .blockBg3{
  435. background: #3EB64B;
  436. border: 1px solid #3EB64B;
  437. }
  438. .blockBg4{
  439. background: #0BA6D5;
  440. border: 1px solid #0BA6D5;
  441. }
  442. .blockBg5{
  443. background: #E57878;
  444. border: 1px solid #E57878;
  445. }
  446. .blockBg6{
  447. background: #E37B3D;
  448. border: 1px solid #E37B3D;
  449. }
  450. .rowCls{
  451. background: white;
  452. box-sizing: border-box;
  453. border-bottom: 2px dotted #AAAAAA;
  454. margin-bottom: 15px;
  455. }
  456. .rowCls .el-col{
  457. margin-bottom: 20px;
  458. }
  459. .doubleTable{
  460. width: 100%;
  461. }
  462. .doubleTable h1{
  463. margin: 17px 0;
  464. }
  465. .el-card{
  466. display: inline-block;
  467. min-width: 290px;
  468. margin: 0 5px 5px 0;
  469. }
  470. .areaTitle{
  471. margin-bottom: 15px;
  472. }
  473. .areaTitle span{
  474. position: relative;
  475. display: inline-block;
  476. padding-right: 20px;
  477. font-weight: bold;
  478. }
  479. .areaTitle span:before{
  480. position: absolute;
  481. content: '';
  482. background: #42d885;
  483. top: 0px;
  484. right: 0px;
  485. width: 10px;
  486. height: 100%;
  487. }
  488. .contentView{
  489. background: #CCCCCC;
  490. text-align: center;
  491. padding: 3px 5px;
  492. margin-bottom: 5px;
  493. border-bottom: 4px solid red;
  494. }
  495. .hebingDiv{
  496. display: flex;
  497. justify-content: center;
  498. align-items: center;
  499. flex-wrap: wrap;
  500. max-width: 140px;
  501. min-height: 60px;
  502. border-bottom: 8px solid red;
  503. word-break: break-all;
  504. }
  505. .lineBianku{
  506. display: flex;
  507. justify-content: center;
  508. align-items: center;
  509. background: #CCCCCC;
  510. text-align: center;
  511. padding: 3px 5px;
  512. min-height: 60px;
  513. max-width: 190px;
  514. word-break: break-all;
  515. }
  516. .eqTitle{
  517. width: 100%;
  518. max-width: 70px;
  519. overflow: hidden;
  520. text-overflow: ellipsis;
  521. white-space: nowrap;
  522. font-size: 12px;
  523. margin-bottom: 15px;
  524. }
  525. .eqTitle2{
  526. width: 100%;
  527. max-width: 70px;
  528. overflow: hidden;
  529. text-overflow: ellipsis;
  530. white-space: nowrap;
  531. font-size: 12px;
  532. }
  533. .recordSpan{
  534. display: inline-block;
  535. background: #0F79DC;
  536. font-size: 12px;
  537. padding: 2px 10px;
  538. color: white;
  539. -moz-border-radius: 3px;
  540. -webkit-border-radius: 3px;
  541. border-radius: 3px;
  542. }
  543. .jinduTiao{
  544. margin: 5px 0;
  545. }
  546. .statusDiv{
  547. text-align: right;
  548. }
  549. .statusDiv span{
  550. display: inline-block;
  551. font-size: 12px;
  552. padding: 2px 10px;
  553. color: white;
  554. -moz-border-radius: 2px;
  555. -webkit-border-radius: 2px;
  556. border-radius: 2px;
  557. }
  558. .linkLine{
  559. /*background: #13CE66;*/
  560. }
  561. .jianguan{
  562. /*background: #0A76A4;*/
  563. }
  564. .producting{
  565. /*background: #3888FA;*/
  566. }
  567. .footerDiv{
  568. text-align: center;
  569. width: 100%;
  570. padding: 7px 0;
  571. border: 1px solid #AAAAAA;
  572. }
  573. .footerDiv a{
  574. display: inline-block;
  575. background: #0F79DC;
  576. font-size: 12px;
  577. padding: 5px 15px;
  578. color: white;
  579. -moz-border-radius: 3px;
  580. -webkit-border-radius: 3px;
  581. border-radius: 3px;
  582. }
  583. .footerDiv a:hover{
  584. opacity: 0.7;
  585. }
  586. .tableBlock{
  587. margin: 15px 30px 15px 0;
  588. display: inline-block;
  589. margin-left: 30%;
  590. }
  591. .topDiv{
  592. text-align: center;
  593. }
  594. .topSpan{
  595. display: inline-block;
  596. padding: 10px;
  597. color: white;
  598. border: 1px solid #FFFFFF;
  599. border-radius: 5px;
  600. margin-right: 5px;
  601. }
  602. .allTongji{
  603. background: #0BA6D5;
  604. border: 1px solid #0BA6D5;
  605. }
  606. .cunTongji{
  607. background: #0F79DC;
  608. border: 1px solid #0F79DC;
  609. }
  610. .lockTongji{
  611. background: #E57878;
  612. border: 1px solid #E57878;
  613. }
  614. .emptyTongji{
  615. border: 1px solid #AAAAAA;
  616. color: #333333;
  617. }
  618. .contentDiv{
  619. margin: 10px 0;
  620. border-left: 1px solid #AAAAAA;
  621. border-top: 1px solid #AAAAAA;
  622. }
  623. .contentDiv tr td{
  624. position: relative;
  625. cursor: pointer;
  626. padding: 10px 25px;
  627. border-right: 1px solid #AAAAAA;
  628. border-bottom: 1px solid #AAAAAA;
  629. }
  630. .blueBg{
  631. background: #548EC5;
  632. color: white;
  633. }
  634. .locked{
  635. position: absolute;
  636. right: 2px;
  637. top: 0;
  638. width: 20px;
  639. height: 25px;
  640. }
  641. .redBg {
  642. background: red;
  643. color: white;
  644. }
  645. </style>