bell.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <template>
  2. <div id="aiBell w-full" style="width:100%;">
  3. <div class="page-header">
  4. <div class="page-title flex align-center">
  5. <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="toBack" ></el-button>
  6. <el-divider direction="vertical"></el-divider>
  7. {{ $t('menu.alarmCenter') }}
  8. </div>
  9. <div class="page-header-btn">
  10. <el-button @click="markAllEventRead">
  11. {{ $t('ignoreAll') }}
  12. </el-button>
  13. <el-tooltip class="item" effect="dark" content="..." placement="left-start">
  14. <el-button icon="el-icon-plus" circle size="mini" ></el-button>
  15. </el-tooltip>
  16. </div>
  17. </div>
  18. <div class="tab-box" style="width: 100%;">
  19. <el-tabs class="tab-switch" v-model="aiTypeVal" @tab-click="handleAiTypeClick">
  20. <el-tab-pane v-for="item in aiTypeArr"
  21. :key="'ai-'+item.val"
  22. :label="$t(item.text)"
  23. :name="`${item.val}`"/>
  24. </el-tabs>
  25. <div class="tab-header">
  26. <el-input class=" input-with-select" :placeholder="$t('keyword')" v-model="key" >
  27. <el-select v-model="triggerTypeVal"
  28. style="width: 120px;"
  29. slot="prepend"
  30. @change="getNowTriggerType" :placeholder="$t('aiManager.triggerType')">
  31. <el-option
  32. :key="'trigger-0'"
  33. :label="$t('aiManager.all')"
  34. :value="0">
  35. </el-option>
  36. <el-option
  37. v-for="item in triggerTypeArr"
  38. :key="'trigger-'+item.val"
  39. :label="$t(item.text)"
  40. :value="item.val"
  41. :disabled="item.disabled">
  42. </el-option>
  43. </el-select>
  44. </el-input>
  45. <el-select v-model="alarmState" style="width: 120px;"
  46. slot="prepend"
  47. @change="getNowTriggerType" :placeholder="$t('readState')">
  48. <el-option
  49. :key="'read-0'"
  50. :label="$t('all')"
  51. :value="0"/>
  52. <el-option
  53. v-for="item in alarmStateArr"
  54. :key="'read-'+item.val"
  55. :label="$t(item.text)"
  56. :value="item.val"
  57. :disabled="item.disabled"/>
  58. </el-select>
  59. <el-button slot="append"
  60. style="width: 80px;"
  61. icon="el-icon-search"
  62. type="primary"
  63. :loading="isLoading"
  64. @click="searchClickHandle">
  65. {{ $t('search') }}
  66. </el-button>
  67. </div>
  68. <div class="tab-content">
  69. <el-table
  70. class="table"
  71. style="overflow-y: auto;"
  72. :data="tabList"
  73. header-row-class-name="table-header"
  74. @sort-change="tableSortChange"
  75. >
  76. <el-table-column :label="$t('aiManager.isDetect')" v-if="aiTypeVal == '01'">
  77. <template slot-scope="scope">
  78. <span>{{ parseAlarmType(scope.row.alarmType) }}</span>
  79. </template>
  80. </el-table-column>
  81. <el-table-column :label="$t('aiManager.detectType')" min-width="120">
  82. <template slot-scope="scope">
  83. <el-tag
  84. class="mx-025"
  85. v-for="item in scope.row.arithmetic.split(',')"
  86. :key="`${scope.row.arithmetic.id}-${item}`">
  87. {{ getArithmeticName(item) }}
  88. </el-tag>
  89. </template>
  90. </el-table-column>
  91. <el-table-column prop="deviceId" :label="$t('device.id')"></el-table-column>
  92. <el-table-column prop="firmware_version" :label="$t('device.info.version')"></el-table-column>
  93. <el-table-column prop="signal" :label="$t('device.info.signal')" :sortable="'signal'" width="75">
  94. <template slot-scope="scope">
  95. <el-tooltip class="item" effect="dark"
  96. :content="scope.row.signal+' '+signalTransform(scope.row.signal,false)"
  97. placement="left-start">
  98. <signal-info :signal-text="scope.row.signal"></signal-info>
  99. </el-tooltip>
  100. </template>
  101. </el-table-column>
  102. <el-table-column prop="createTime" :label="$t('uploadTime')" :sortable="'createTime'">
  103. <template slot-scope="scope">
  104. <span>{{ getTimeText(scope.row.createTime) }}</span>
  105. </template>
  106. </el-table-column>
  107. <el-table-column prop="alarmState" :label="$t('readState')" width="80">
  108. <template slot-scope="scope">
  109. <span>{{ getAlarmState(scope.row.alarmState) }}</span>
  110. </template>
  111. </el-table-column>
  112. <el-table-column :label="$t('operation')" >
  113. <template slot-scope="scope">
  114. <el-button size="medium" @click="editAlarmHandle(scope.row)">
  115. {{ $t('readEnum.ignore') }}
  116. </el-button>
  117. <el-button size="medium" type="primary" @click="moreAlarmHandle(scope.row)">
  118. {{ $t('view') }}
  119. </el-button>
  120. </template>
  121. </el-table-column>
  122. </el-table>
  123. </div>
  124. <div class="tab-page">
  125. <el-pagination
  126. style="float: right"
  127. @size-change="handleSizeChange"
  128. @current-change="currentChange"
  129. :current-page="currentPage"
  130. :page-size="count"
  131. :page-sizes="[5,10,15, 25, 35, 50]"
  132. layout="total, sizes, prev, pager, next"
  133. :total="total"
  134. ></el-pagination>
  135. </div>
  136. </div>
  137. </div>
  138. </template>
  139. <script>
  140. import {
  141. triggerTypes,
  142. getTriggerTypeArr,
  143. getAITypeArr,
  144. toAlarmState,
  145. alarmStates,
  146. getAlarmStateArr,
  147. toAlarmKey
  148. } from "@/map/ai.js"
  149. import handle from "@/until/handle";
  150. import timeUntil from "@/until/time";
  151. import SignalInfo from "@/components/common/signalInfo";
  152. import devTool from "@/hfyUntil/devTool";
  153. let bellSearchSource = null;
  154. export default {
  155. name: "bell",
  156. components: {SignalInfo},
  157. data(){
  158. return {
  159. isLoading: false,
  160. triggerTypeVal: 0,
  161. triggerTypes: triggerTypes,
  162. triggerTypeArr: getTriggerTypeArr(),
  163. aiTypeVal: "01",
  164. aiTypeArr: getAITypeArr(),
  165. alarmStates: alarmStates,
  166. alarmStateArr: getAlarmStateArr(),
  167. key: '',
  168. searchKey: '',
  169. alarmState: 0,
  170. searchAlarmState: '',
  171. searchOrder: "descending",
  172. searchSort: 'alarmId',
  173. lastPage: 1,
  174. currentPage: 1,
  175. count: 15,
  176. total: 1,
  177. tabList: [],
  178. }
  179. },
  180. beforeDestroy() {
  181. this.stopQuest();
  182. this.alarmState = this.$route.query.alarmState
  183. },
  184. beforeMount() {
  185. console.log("beforeMount")
  186. // 尝试从临时存储中获取搜索条件
  187. let searchParam = window.sessionStorage.getItem("bellSearchParam");
  188. searchParam = JSON.parse(searchParam);
  189. if (searchParam) {
  190. this.searchKey = searchParam.searchKey;
  191. this.alarmState = searchParam.alarmState;
  192. this.aiTypeVal = searchParam.aiTypeVal;
  193. this.triggerTypeVal = searchParam.triggerTypeVal;
  194. this.count = searchParam.count;
  195. this.currentPage = searchParam.currentPage;
  196. }
  197. },
  198. mounted() {
  199. console.log("mounted")
  200. this.searchClickHandle();
  201. },
  202. methods:{
  203. signalTransform:devTool.signalTransform,
  204. toBack(){
  205. this.$router.back();
  206. if (this.deviceId === "" ) {
  207. this.beforeUrl = "/"
  208. }
  209. },
  210. getNowTriggerType(){
  211. },
  212. stopQuest(){
  213. if(bellSearchSource){
  214. bellSearchSource.cancel();
  215. bellSearchSource = null;
  216. }
  217. },
  218. getAlarmState(stateCode){
  219. let state = toAlarmState(stateCode);
  220. return state?this.$t(state.text):"null";
  221. },
  222. getTimeText(timeStamp){
  223. return timeUntil.dateFormat(
  224. timeUntil.timeStamp_to_Date(timeStamp),
  225. )
  226. },
  227. async searchData(searchParam){
  228. if(bellSearchSource){
  229. this.$message.warning(this.$t('notification.waitingForQuery'));
  230. }
  231. searchParam.arithmetic = this.aiTypeVal;
  232. searchParam.alarmState = toAlarmKey(searchParam.alarmState);
  233. bellSearchSource = this.$axios.axios.CancelToken.source();
  234. this.isLoading = true;
  235. let [err,res] = await handle(
  236. this.$axios.axios.post('/ai/alarms',
  237. searchParam,
  238. {
  239. cancelToken: bellSearchSource.token
  240. })
  241. );
  242. this.isLoading = false;
  243. bellSearchSource = null;
  244. if(err){
  245. return this.$message.error(err.message);
  246. }
  247. console.log(res);
  248. let result = res.data;
  249. if(result.code === 0){
  250. this.tabList = result.data;
  251. this.total = result.total;
  252. this.libList = result.list;
  253. // 存储搜索条件
  254. window.sessionStorage.setItem("bellSearchParam",JSON.stringify({
  255. searchKey: this.searchKey,
  256. alarmState: this.alarmState,
  257. aiTypeVal: this.aiTypeVal,
  258. triggerTypeVal: this.triggerTypeVal,
  259. count: this.count,
  260. currentPage: this.currentPage,
  261. }));
  262. }else{
  263. this.$message.warning(result.msg);
  264. }
  265. },
  266. handleAiTypeClick(tab, event){
  267. console.log(tab, event);
  268. console.log(this.aiTypeVal);
  269. console.log(tab.name);
  270. this.searchClickHandle();
  271. },
  272. currentChange: function (val) {
  273. this.currentPage = val;
  274. this.changePage();
  275. },
  276. handleSizeChange: function (val) {
  277. this.count = val;
  278. this.changePage();
  279. },
  280. changePage(){
  281. // 使用当前配置进行搜索
  282. let searchParam = {
  283. p: this.currentPage,
  284. l: this.count,
  285. key: this.searchKey,
  286. alarmState: this.searchAlarmState,
  287. order: this.searchOrder,
  288. sort: this.searchSort,
  289. }
  290. this.searchData(searchParam);
  291. },
  292. searchClickHandle(){
  293. let searchParam = {
  294. p: 1,
  295. l: this.count,
  296. key: this.key,
  297. alarmState: this.alarmState
  298. }
  299. this.searchKey = this.key;
  300. this.searchAlarmState = this.alarmState;
  301. this.searchData(searchParam);
  302. },
  303. async editAlarmHandle(row){
  304. let [err,res] = await handle(this.$axios.get(`/ai/alarm/ignore/${row.alarmId}`))
  305. if(err){return this.$message.error(err.msg)}
  306. if(res.data.code!==0){return this.$message.warning(res.data.msg)}
  307. this.$message.success(this.$t('operationSuccess'));
  308. },
  309. moreAlarmHandle(row){
  310. this.$router.push(`/alarm/${row.alarmId}`)
  311. },
  312. // 改变排序结构
  313. tableSortChange(v,v1){
  314. console.log("sort change");
  315. console.log(v,v1);
  316. let prop = v.prop,
  317. order = v.order;
  318. // 构建新搜索数据体进行搜索
  319. let searchParam = {
  320. order: order,
  321. sort: prop,
  322. p: 1,
  323. l: this.count,
  324. key: this.searchKey,
  325. alarmState: this.searchAlarmState
  326. }
  327. this.searchSort = prop;
  328. this.searchOrder = order;
  329. this.searchData(searchParam);
  330. },
  331. // 全部忽略
  332. markAllEventRead(){
  333. this.$confirm(this.$t('ignoreTitle'), '提示', {
  334. confirmButtonText: this.$t('confirm'),
  335. cancelButtonText: this.$t('cancel'),
  336. type: 'warning'
  337. }).then(async () => {
  338. let [err, res] = await handle(this.$axios.get(`/ai/markAll?arithmetic=${this.aiTypeVal}`))
  339. if (err) {
  340. return this.$message.error(err.msg)
  341. }
  342. if (res.data.code !== 0) {
  343. return this.$message.warning(res.data.msg)
  344. }
  345. this.$message.success(this.$t("operationSuccess") + "!!!");
  346. })
  347. },
  348. getArithmeticName(text) {
  349. let res = this.aiTypeArr.find(item => item.val == text)
  350. return res ? this.$t(res.text) : this.$t("unknown");
  351. },
  352. parseAlarmType(text) {
  353. let r = ""
  354. if (text == "1") {
  355. r = this.$t("aiManager.faceAlarmType.internal");
  356. } else {
  357. r = this.$t("aiManager.faceAlarmType.stranger");
  358. }
  359. return r
  360. }
  361. }
  362. }
  363. </script>
  364. <style scoped>
  365. .mx-025 {
  366. margin-left: 0.25rem;
  367. margin-right: 0.25rem;
  368. }
  369. .page-header {
  370. height: 45px;
  371. box-sizing: border-box;
  372. margin-bottom: 5px;
  373. }
  374. .tab-box{
  375. width: 100%;
  376. height: calc(100vh - 135px);
  377. background-color: #fff;
  378. border-radius: 0.25rem;
  379. padding: 5px;
  380. box-sizing: border-box;
  381. overflow: hidden;
  382. }
  383. .tab-box .tab-switch{
  384. height: 45px;
  385. }
  386. .tab-box .tab-header{
  387. height: 40px;
  388. width: 99%;
  389. display: flex;
  390. }
  391. .tab-box .tab-header > *{
  392. height: 40px;
  393. }
  394. .tab-box .tab-content{
  395. height: calc(100% - 118px);
  396. overflow-y: auto;
  397. }
  398. .tab-box .tab-content .table{
  399. height: 100%;
  400. }
  401. .tab-box .tab-page{
  402. height: 35px;
  403. }
  404. </style>