InfoDialoges.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023
  1. <template>
  2. <!-- 所有弹出框 -->
  3. <div class="l_Dialog tuiy">
  4. <!-- 灾害类型 -->
  5. <el-dialog v-model="dialogVisible" width="482" align-center :modal="false" :close-on-click-modal="false"
  6. draggable class="dialog_class bgcolor">
  7. <template #header="{ titleId, titleClass }">
  8. <div class="my-header">
  9. <el-image :src="icon" fit="contain"></el-image>
  10. <h4 :id="titleId" :class="titleClass">灾害类型</h4>
  11. </div>
  12. </template>
  13. <div class="my_content">
  14. <el-radio-group v-model="classradio1" class="radio-group">
  15. <el-radio label="Fire">火灾</el-radio>
  16. <el-radio label="Water">突水</el-radio>
  17. <el-radio label="Gass">瓦斯爆炸</el-radio>
  18. </el-radio-group>
  19. </div>
  20. <template #footer>
  21. <div class="dialog-footer class_footer l_btn ">
  22. <div class="footerbtn">
  23. <div class="borderimg"><el-button @click="dialogVisible = false">取消</el-button></div>
  24. </div>
  25. <div class="footerbtn">
  26. <div class="borderimg"><el-button @click="classclick(); dialogVisible= false;">
  27. 确定
  28. </el-button></div>
  29. </div>
  30. </div>
  31. </template>
  32. </el-dialog>
  33. <!--火灾 事故列表 -->
  34. <el-dialog v-model="dialog.dialogVisible_fire" width="600" :modal="false" :close-on-click-modal="false"
  35. draggable class="dialog_class bgcolor tablefocus shigutable">
  36. <template #header="{ titleId, titleClass }">
  37. <div class="my-header">
  38. <el-image :src="icon" fit="contain"></el-image>
  39. <h4 :id="titleId" :class="titleClass"> 事故列表</h4>
  40. </div>
  41. </template>
  42. <div class="my_content1 bgcolor tablefocus scoperadio ">
  43. <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="Loading..."
  44. :highlight-current-row="currentrow"
  45. element-loading-background="rgba(0, 10, 0, 0.1)" :row-class-name="tableRowClassName"
  46. :header-cell-style="{ 'background': ' #375A88' }" @select="projectsSelectionSelect">
  47. <el-table-column width="50">
  48. <template #default="scope">
  49. <el-radio v-model="scoperadio" :label="scope.row.aid"
  50. @change="getRadioRow(scope.row)"></el-radio>
  51. </template>
  52. </el-table-column>
  53. <el-table-column type="index" label="序号" width="50" />
  54. <el-table-column prop="name" label="名称" />
  55. <el-table-column prop="name" label="来源" width="120" />
  56. <el-table-column prop="time" label="时间" width="180" />
  57. </el-table>
  58. <div class="demo-pagination-block pagination">
  59. <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" small background
  60. layout="prev, total,pager, next, jumpe," :total="parseInt(total)" class="mt-4"
  61. @current-change="handleCurrentChange2" />
  62. </div>
  63. <div class="dialog-footer footer_div l_btn">
  64. <div class="footerbtn flex1">
  65. <div class="borderimg"><el-button @click="addsg('1');">添加</el-button></div>
  66. </div>
  67. <div class="footerbtn flex1">
  68. <div class="borderimg"><el-button @click="addsg('2')">
  69. 修改
  70. </el-button></div>
  71. </div>
  72. <div class="footerbtn flex1">
  73. <div class="borderimg"><el-button @click="dialog.dialogsgdelect = true; dialog.dialogForm = false;">
  74. 删除
  75. </el-button></div>
  76. </div>
  77. <div class="footerbtn flex1">
  78. <div class="borderimg"><el-button @click="accident()">
  79. 确定
  80. </el-button></div>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="ddd" v-show="dialog.dialogForm">
  85. <div class="header_l">
  86. <el-image :src="icon" fit="contain"></el-image>
  87. <h4 class="tianjia"> {{ shigtext }}</h4>
  88. <div class="closeimg" @click="dialog.dialogForm = false"><el-image :src="closeimg" fit="contain"
  89. style="margin-top: -10px;"></el-image></div>
  90. <div class="ddd_div" style="display: flex;">
  91. <div class="demo-input-suffix firsttitle magintop">
  92. <el-form-item label="事故名称">
  93. <el-input v-model="formull.name" class="w-50 m-2" maxlength="18" :placeholder="placeholder" />
  94. </el-form-item>
  95. <div class="l_btn class_btn" style="width: auto;">
  96. <div class="footerbtn">
  97. <div class="borderimg"><el-button @click="sgadd()">
  98. 确定
  99. </el-button></div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <el-dialog v-model="dialog.dialogsgdelect" width="400" class="dialog_class bgcolor tianjia">
  107. <template #header="{ titleId, titleClass }">
  108. <div class="my-header ">
  109. <el-image :src="icon" fit="contain"></el-image>
  110. <h4 :id="titleId" :class="titleClass">删除</h4>
  111. </div>
  112. </template>
  113. <h4 class="delecttitle"> 是否确认删除<span class="spanclad">{{ idobj.name }}</span></h4>
  114. <div class="dialog-footer footer_div l_btn">
  115. <div class="footerbtn flex1">
  116. <div class="borderimg"><el-button @click="dialog.dialogsgdelect = false">取消</el-button></div>
  117. </div>
  118. <div class="footerbtn flex1">
  119. <div class="borderimg"><el-button @click="sgdelect(); dialog.dialogsgdelect = false">
  120. 确定
  121. </el-button></div>
  122. </div>
  123. </div>
  124. </el-dialog>
  125. </el-dialog>
  126. <!--火灾左侧栏-->
  127. <div class="common-layout" style="margin: 0;" v-show="leftcoll.collfire">
  128. <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg leftbgimg">
  129. <div class="demo-collapse">
  130. <el-collapse v-model="coolactiveName" accordion>
  131. <el-collapse-item name="1">
  132. <template #title>
  133. <el-icon class="iconimg Frame2" fit="contain"></el-icon>
  134. 火灾<el-icon class="header-icon">
  135. </el-icon>
  136. </template>
  137. <div class="asides_content">
  138. <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
  139. <div class="l_padding " style="padding:20px 20px 20px 24px; ">
  140. <div class="line selecwidth">
  141. <el-form-item label="污染物选择:">
  142. <!-- <el-select v-model="options.coid" multiple filterable allow-create
  143. default-first-option :reserve-keyword="false" value-key="code"
  144. @change="selectchange($event)" placeholder="请选择">
  145. <el-option v-for="item in options" :key="item.coid"
  146. :label="item.code" :value="item" />
  147. </el-select> -->
  148. <el-select v-model="value" multiple filterable allow-create
  149. default-first-option :reserve-keyword="false" value-key="code"
  150. @change="selectchange($event)" placeholder="请选择">
  151. <el-option v-for="item in options" :key="item.coid"
  152. :label="item.code" :value="item" />
  153. </el-select>
  154. </el-form-item>
  155. </div>
  156. <ul>
  157. <li>
  158. <div class="demo-datetime-picker">
  159. <!-- <span class="inputtext_1">选择时间</span> -->
  160. <div class="block">
  161. <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
  162. placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
  163. @change="timeclick()" />
  164. </div>
  165. </div>
  166. </li>
  167. <li><span class="inputtext_1">时间步长</span>
  168. <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
  169. <span class="righttext">s</span>
  170. </div>
  171. </li>
  172. <li><span class="inputtext_1">空间步长</span>
  173. <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
  174. <span class="righttext">m</span>
  175. </div>
  176. </li>
  177. <li><span class="inputtext_1">模拟时长</span>
  178. <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
  179. <span class="righttext">s</span>
  180. </div>
  181. </li>
  182. <li><span class="inputtext_1">输出步长</span>
  183. <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
  184. <span class="righttext">s</span>
  185. </div>
  186. </li>
  187. <li><span class="inputtext_1">交互步长</span>
  188. <div class="inputkuang"> <el-input
  189. v-model="tuiyanobj.interactionstep" />
  190. <span class="righttext">s</span>
  191. </div>
  192. </li>
  193. </ul>
  194. </div>
  195. <div class="asdis_btn">
  196. <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
  197. <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
  198. </div>
  199. <div class=" logs">
  200. <div class="logs_pading">
  201. <h4>模拟日志</h4>
  202. <div class="footerTextBox">
  203. <el-input class="footerText" type="textarea" id="textarea_id"
  204. v-model="rizhi.logs"></el-input>
  205. </div>
  206. </div>
  207. </div>
  208. </el-form>
  209. </div>
  210. </el-collapse-item>
  211. </el-collapse>
  212. </div>
  213. </el-aside>
  214. </div>
  215. <!-- 突水 -->
  216. <div class="common-layout" style="margin: 0;" v-show="leftcoll.collwater">
  217. <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg leftbgimg">
  218. <div class="demo-collapse">
  219. <el-collapse v-model="coolactiveName" accordion>
  220. <el-collapse-item name="1">
  221. <template #title>
  222. <el-icon class="iconimg Frame3" fit="contain"></el-icon>
  223. 突水<el-icon class="header-icon">
  224. </el-icon>
  225. </template>
  226. <div class="asides_content">
  227. <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
  228. <div class="l_padding " style="padding:20px 20px 20px 24px; ">
  229. <ul>
  230. <li>
  231. <div class="demo-datetime-picker">
  232. <!-- <span class="inputtext_1">选择时间</span> -->
  233. <div class="block">
  234. <el-date-picker v-model="tuiyanobj.pickertime" type="datetime"
  235. placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
  236. value-format="YYYY-MM-DD HH:mm:ss" @change="timeclick()" />
  237. </div>
  238. </div>
  239. </li>
  240. <li>
  241. <!-- <el-form-item label="时间步长">
  242. <el-input v-model="tuiyanobj.dt" placeholder="时间步长" clearable />
  243. </el-form-item> -->
  244. <span class="inputtext_1">时间步长</span>
  245. <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
  246. <span class="righttext">s</span>
  247. </div>
  248. </li>
  249. <li><span class="inputtext_1">空间步长</span>
  250. <div class="inputkuang"> <el-input v-model="tuiyanobj.dx" />
  251. <span class="righttext">m</span>
  252. </div>
  253. </li>
  254. <li><span class="inputtext_1">模拟时长</span>
  255. <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
  256. <span class="righttext">s</span>
  257. </div>
  258. </li>
  259. <li><span class="inputtext_1">输出步长</span>
  260. <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
  261. <span class="righttext">s</span>
  262. </div>
  263. </li>
  264. <li><span class="inputtext_1">交互步长</span>
  265. <div class="inputkuang"> <el-input
  266. v-model="tuiyanobj.interactionstep" />
  267. <span class="righttext">s</span>
  268. </div>
  269. </li>
  270. </ul>
  271. </div>
  272. <div class="asdis_btn">
  273. <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
  274. <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
  275. </div>
  276. <div class=" logs">
  277. <div class="logs_pading">
  278. <h4>模拟日志</h4>
  279. <div class="footerTextBox">
  280. <el-input class="footerText" type="textarea" id="textarea_id"
  281. v-model="rizhi.logs"></el-input>
  282. </div>
  283. </div>
  284. </div>
  285. </el-form>
  286. </div>
  287. </el-collapse-item>
  288. </el-collapse>
  289. </div>
  290. </el-aside>
  291. </div>
  292. <!-- 瓦斯爆炸 -->
  293. <div class="common-layout" style="margin: 0;" v-show="leftcoll.Gass">
  294. <el-aside width="278px" class="L_aside L_aside1 asideg asidegbg leftbgimg">
  295. <div class="demo-collapse">
  296. <el-collapse v-model="coolactiveName" accordion>
  297. <el-collapse-item name="1">
  298. <template #title>
  299. <el-icon class="iconimg Frame4" fit="contain"></el-icon>
  300. 瓦斯爆炸<el-icon class="header-icon">
  301. </el-icon>
  302. </template>
  303. <div class="asides_content">
  304. <el-form :inline="true" :model="tuiyanobj" class="demo-form-inline">
  305. <div class="l_padding " style="padding:20px 20px 20px 24px; ">
  306. <ul>
  307. <li>
  308. <span class="inputtext_1">并行核数</span>
  309. <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
  310. </div>
  311. </li>
  312. <li><span class="inputtext_1">时间步长</span>
  313. <div class="inputkuang"> <el-input v-model="tuiyanobj.dt" />
  314. <span class="righttext">s</span>
  315. </div>
  316. </li>
  317. <li><span class="inputtext_1">模拟时长</span>
  318. <div class="inputkuang"> <el-input v-model="tuiyanobj.totaltime" />
  319. <span class="righttext">s</span>
  320. </div>
  321. </li>
  322. <li><span class="inputtext_1">输出步长</span>
  323. <div class="inputkuang"> <el-input v-model="tuiyanobj.reportstep" />
  324. <span class="righttext">s</span>
  325. </div>
  326. </li>
  327. <li><span class="inputtext_1">子迭代步数</span>
  328. <div class="inputkuang"> <el-input
  329. v-model="tuiyanobj.interactionstep" />
  330. </div>
  331. </li>
  332. </ul>
  333. </div>
  334. <div class="asdis_btn">
  335. <div class="btn"><span class="spantext" @click="initial();">初始数据</span></div>
  336. <div class="btn"><span class="spantext" @click="calculate();">开始计算</span></div>
  337. </div>
  338. <div class=" logs">
  339. <div class="logs_pading">
  340. <h4>模拟日志</h4>
  341. <div class="footerTextBox">
  342. <el-input class="footerText" type="textarea" id="textarea_id"
  343. v-model="rizhi.logs"></el-input>
  344. </div>
  345. </div>
  346. </div>
  347. </el-form>
  348. </div>
  349. </el-collapse-item>
  350. </el-collapse>
  351. </div>
  352. </el-aside>
  353. </div>
  354. </div>
  355. </template>
  356. <!-- timestampToTime -->
  357. <script setup>
  358. import { computed, ref, onMounted, reactive, toRef } from "vue";
  359. import { request, uploadFile } from "@/utils/request";
  360. import { ElMessage, ElButton, ElDialog, ElSelect, formEmits } from 'element-plus'
  361. import icon from "@/assets/img/icon.png";
  362. import Frame2 from "@/assets/img/Frame2.png";
  363. import t1 from "@/assets/img/t1.png";
  364. import t2 from "@/assets/img/t2.png";
  365. import t3 from "@/assets/img/t3.png";
  366. import t4 from "@/assets/img/t4.png";
  367. import mitts from "@/utils/Bus"
  368. import icon1 from "@/assets/img/Group27.png";
  369. import closeimg from "@/assets/img/colse.png";
  370. import { timestampToTime } from '@/js/lindex.js'
  371. import { vtkmodel } from "@/control/vtkModel.js";
  372. const changeModel= ()=> {
  373. vtkmodel.clearJgAddMode();
  374. vtkmodel.renderWindow.render();
  375. }
  376. let currentrow=ref(false);
  377. let placeholder=ref('某次某事件火灾事故');
  378. let emit = defineEmits(['headerclick', 'childfun', 'moxingclick','handleSelect','leftsimulation'])
  379. const props = defineProps({
  380. addselect: {
  381. type: Function,
  382. required: true,
  383. },
  384. headerobj: {
  385. type: Object,
  386. },
  387. valzaiqing:{
  388. type:String
  389. },
  390. classradio: {
  391. type: String,
  392. // default: '',activeIndex
  393. },
  394. activeIndex: {
  395. type: String,
  396. // default: '',activeIndex
  397. },
  398. });
  399. let startlog=ref('0');
  400. let shigtext = ref('');
  401. let websock = ref(null);
  402. let times = ref({
  403. lockReconnect: false, //是否真正建立连接
  404. timeout: 28 * 1000, //30秒一次心跳
  405. timeoutObj: null, //心跳倒计时
  406. serverTimeout0bj: null, //
  407. timeoutnum: null, //断开重连倒计时
  408. })
  409. let zqname = ref({});
  410. let shiguobj = ref({
  411. source: '自荐',
  412. type: '预演',
  413. sid: '-1'
  414. })
  415. let sgdata = ref({});
  416. let formull = ref({
  417. source: '',
  418. name: ''
  419. })
  420. let idobj = ref({
  421. sgaid: "",
  422. name: "",
  423. time: ""
  424. })
  425. const value1 = ref('')
  426. let loading = ref(true)
  427. let aid = ref();
  428. let firepid = ref("");
  429. let firesid = ref("");
  430. const currentPage4 = ref(1);
  431. const pageSize4 = ref(3)
  432. let total = ref(1);
  433. const dialogVisible = ref(false);
  434. const classradio = ref();
  435. let classradio1 = ref('Fire');
  436. const leftcoll = ref({
  437. collfire: false,
  438. collwater: false,
  439. Gass:false,
  440. });
  441. const monitor = ref(false);
  442. const dialog = ref({
  443. dialogVisible_fire: false,
  444. jianced: true,
  445. monitor: false,
  446. dialogForm: false,
  447. dialogsgdelect: false,
  448. })
  449. let tuiyanobj = ref({
  450. value: [''],
  451. pickertime: '24-03-06 00:00:00',
  452. acctime: '2024-03-06 00:00:00',
  453. dt: '',
  454. dx: '',
  455. reportstep: '',
  456. interactionstep: '',
  457. totaltime: '',
  458. coids: '',
  459. cocodes: ''
  460. })
  461. let tuiyanobj2 = ref({
  462. value: ['SO2'],
  463. pickertime: '',
  464. acctime: '2024-03-06 00:00:00',
  465. dt: '0.1',
  466. dx: '10',
  467. reportstep: '60',
  468. interactionstep: '3600',
  469. totaltime: '3600',
  470. coids: '1',
  471. cocodes: 'CO2'
  472. })
  473. let tuiyanobj3 = ref({
  474. value: ['SO2'],
  475. pickertime: '',
  476. acctime: '2024-03-06 00:00:00',
  477. dt: '5',
  478. dx: '5',
  479. reportstep: '60',
  480. interactionstep: '3600',
  481. totaltime: '3600',
  482. coids: '1',
  483. cocodes: 'CO2'
  484. })
  485. let tableobj = ref({});
  486. let coolactiveName = ref(["1", "2"]);
  487. let newlog = ref("");
  488. let rizhi = ref({
  489. top: "50px",
  490. logs: '',
  491. left: "90px"
  492. });
  493. let formLabelWidth5 = ref('130px');
  494. const formInline = ref({
  495. user: '11',
  496. region: 'shanghai',
  497. date: '',
  498. })
  499. const value = ref([])
  500. const options = ref([])
  501. let arrvalue=ref([]);
  502. let scoperadio = ref(1);
  503. // 推演结果
  504. const customColor = ref('#409eff')
  505. const tableRowClassName = ({ row, rowIndex }) => {
  506. if (rowIndex % 2 != 0) {
  507. return 'evenRow';
  508. }
  509. return 'oddRow';
  510. }
  511. const tableData = ref([]);
  512. const tableData2 = [
  513. {
  514. date: '站点1',
  515. name: '2',
  516. address: '10',
  517. },
  518. {
  519. date: '站点1',
  520. name: '2',
  521. address: '10',
  522. },
  523. {
  524. date: '站点1',
  525. name: '2',
  526. address: '10',
  527. },
  528. {
  529. date: '站点1',
  530. name: '2',
  531. address: '10',
  532. },
  533. ]
  534. const handleCurrentChange = ({ row, rowIndex }) => {
  535. // console.log(row);
  536. }
  537. // aid获取
  538. // 类型选择
  539. const classclick = (val) => {
  540. classradio.value= val;
  541. console.log(classradio.value);
  542. console.log(22222)
  543. scoperadio.value="";
  544. dialog.value.dialogVisible_fire = true;
  545. props.addselect();
  546. getdata();
  547. }
  548. // 事故确定列表
  549. const accident = () => {
  550. if (idobj.value.name == '') {
  551. ElMessage.error('请选择项目')
  552. } else {
  553. if(props.valzaiqing=='模拟数据'){
  554. const params = {
  555. transCode: 'D10017',
  556. aid:aid.value,
  557. }
  558. request(params)
  559. .then((res) => {
  560. if(res.state=='1'){
  561. emit("leftsimulation",res,sgdata.value);
  562. }
  563. else if(res.state=='-1'){
  564. ElMessage({
  565. message: " 求解失败",
  566. type: 'error',
  567. });
  568. }else if(res.state=='0'){
  569. ElMessage({ message: "求解未完成", type: 'error',
  570. });
  571. }
  572. })
  573. .catch((err) => {
  574. if(err.returnMsg=="任务不存在!"){
  575. ElMessage({
  576. message: "未求解",
  577. type: 'error',
  578. });
  579. }
  580. //ElMessage.error(err.returnMsg)
  581. })
  582. }else{
  583.    initWebSocket();
  584.   rizhi.value.logs='';
  585.     newlog.value ='';
  586. emit('headerclick', sgdata.value);
  587. emit('childfun');
  588. emit('moxingclick', true);
  589. pollute();
  590. // emit('handleSelect', '1');
  591. fetchFileContent();
  592. accident2(props.activeIndex)
  593. }
  594. dialog.value.dialogVisible_fire = false;
  595. }
  596. }
  597. const accident2 = (key) => {
  598. console.log(key);
  599. if (key == '1'||key == '2'||key == '3') {
  600. console.log(classradio.value);
  601. if (classradio.value== "Fire") {
  602. leftcoll.value.collfire = true;
  603. leftcoll.value.collwater = false;
  604. leftcoll.value.Gass = false;
  605. } else if (classradio.value== "Water") {
  606. leftcoll.value.collwater = true;
  607. leftcoll.value.collfire = false;
  608. leftcoll.value.Gass = false;
  609. } else if(classradio.value== "Gass"){
  610. leftcoll.value.Gass = true;
  611. leftcoll.value.collfire = false;
  612. leftcoll.value.collwater = false;
  613. }
  614. rewu();
  615. } else {
  616. leftcoll.value.collfire = false;
  617. leftcoll.value.collwater = false;
  618. leftcoll.value.Gass = false;
  619. }
  620. }
  621. //事故添加列表
  622. const sgadd = () => {
  623. const params = {
  624. transCode: 'D00002',
  625. source: shiguobj.value.source,
  626. type: shiguobj.value.type,
  627. name: formull.value.name,
  628. stype: classradio.value,
  629. sid: shiguobj.value.sid,
  630. aid: aid.value
  631. }
  632. request(params)
  633. .then((res) => {
  634. dialog.value.dialogForm = false;
  635. getdata();
  636. scoperadio.value = null;
  637. })
  638. .catch((err) => {
  639. ElMessage.error(err.returnMsg)
  640. })
  641. }
  642. // 事故列表的选择
  643. const getRadioRow = (val) => {
  644. // currentrow.value=true;
  645. sgdata.value = (val);
  646. console.log(tableobj.value)
  647. formull.value.name = val.name;
  648. aid.value = val.aid;
  649. idobj.value.name = val.name;
  650. idobj.value.time = val.time;
  651. }
  652. function handleCurrentChange2(val) {
  653.    scoperadio.value = null;
  654. currentPage4.value = val;
  655. getdata();
  656. }
  657. // 事故添加按钮
  658. const addsg = (val) => {
  659. if (val == '1') {
  660. currentrow.value=false;
  661. shigtext.value = '事故添加';
  662. aid.value = 0;
  663. formull.value.name = '';
  664. } else if (val == '2') {
  665. shigtext.value = '事故修改';
  666. formull.value.name = idobj.value.name
  667. }
  668. dialog.value.dialogForm = true;
  669. }
  670. // 事故删除
  671. const sgdelect = () => {
  672. const params = {
  673. transCode: 'D000016',
  674. aid: aid.value,
  675. }
  676. request(params)
  677. .then((res) => {
  678. getdata();
  679. ElMessage({
  680. message: '删除成功',
  681. type: 'success',
  682. })
  683. })
  684. .catch((err) => {
  685. loading.value = false;
  686. ElMessage.error(err.returnMsg)
  687. })
  688. }
  689. //事故获取列表
  690. const getdata = () => {
  691. if(classradio.value== "Fire"){
  692. placeholder.value='某次某事件火灾事故'
  693. } else if (classradio.value== "Water") {
  694. placeholder.value='某次某事件突水事故'
  695. }else{
  696. }
  697. const params = {
  698. transCode: 'D00003',
  699. count: pageSize4.value,
  700. page: currentPage4.value,
  701. aid: aid.value,
  702. stype: classradio.value,
  703. }
  704. request(params)
  705. .then((res) => {
  706. loading.value = false;
  707. tableData.value = res.rows;
  708. total.value = res.total;
  709. })
  710. .catch((err) => {
  711. loading.value = false;
  712. ElMessage.error(err.returnMsg)
  713. })
  714. }
  715. // 污染物的查询
  716. const pollute = () => {
  717. value.value=[];
  718. const params = {
  719. transCode: 'D10013',
  720. }
  721. request(params)
  722. .then((res) => {
  723. options.value = res.rows;
  724. value.value.push(res.rows[0]);
  725. })
  726. .catch((err) => {
  727. ElMessage.error(err.returnMsg)
  728. })
  729. }
  730. //任务求解任务信息
  731. //state 完成1 失败是-1
  732. const rewu=()=>{
  733. arrvalue.value=[];
  734. const params = {
  735. transCode: 'D10017',
  736. aid:aid.value,
  737. }
  738. request(params)
  739. .then((res) => {
  740. arrvalue.value=res.cocodes.split(',');
  741. tuiyanobj.value=res;
  742. tuiyanobj.value.pickertime=res.acctime;
  743. console.log(tuiyanobj.value.acctime)
  744. console.log(options.value.length);
  745. value.value=arrvalue.value;
  746. value.value=[];
  747. for (let i = 0; i <options.value.length; i++){
  748. console.log(options.value[i])
  749. for (let j = 0; j < arrvalue.value.length; j++){
  750. if(options.value[i].code==arrvalue.value[j]){
  751. value.value.push(options.value[i]);
  752. }
  753. }
  754. }
  755. })
  756. .catch((err) => {
  757. // ElMessage.error(err.returnMsg)
  758. addinitial();
  759. })
  760. }
  761. //默认时间
  762. const inititimeDefaultal = () => {
  763. var date = new Date();
  764. var timeStamp = Date.parse(date)
  765. var s1 = timestampToTime(timeStamp);
  766. return s1;
  767. }
  768. // 初始数据
  769. const initial = () => {
  770. addinitial();
  771. }
  772. const addinitial=()=>{
  773. if (classradio.value == "Fire") {
  774. tuiyanobj2.value.pickertime = inititimeDefaultal();
  775. tuiyanobj2.value.acctime = inititimeDefaultal();
  776. tuiyanobj2.value.cocodes = options.value[0].code;
  777. tuiyanobj2.value.coids=options.value[0].coid;
  778. tuiyanobj.value = tuiyanobj2.value;
  779. } else {
  780. tuiyanobj3.value.pickertime = inititimeDefaultal();
  781. tuiyanobj3.value.acctime = inititimeDefaultal();
  782. tuiyanobj.value = tuiyanobj3.value;
  783. }
  784. }
  785. function zdtimechange() {
  786. }
  787. const timeclick = () => {
  788. var timeStamp = Date.parse(tuiyanobj.value.pickertime)
  789. tuiyanobj.value.acctime = timestampToTime(timeStamp);
  790. }
  791. // 下拉多选
  792. const selectchange = (val) => {
  793. console.log(val);
  794. let arr1 = [];
  795. let arr2 = [];
  796. for (let i = 0; i <= val.length - 1; i++) {
  797. console.log(val[i])
  798. arr1.push(val[i].coid);
  799. arr2.push(val[i].code);
  800. }
  801. tuiyanobj.value.coids = arr1.join(',');
  802. tuiyanobj.value.cocodes = arr2.join(',');
  803. }
  804. //推演的开始计算
  805. const calculate = () => {
  806. rizhi.value.logs='';
  807. newlog.value ='';
  808. const params = {
  809. transCode: 'D00008',
  810. aid: aid.value,
  811. acctime: tuiyanobj.value.acctime,
  812. dt: tuiyanobj.value.dt,
  813. dx: tuiyanobj.value.dx,
  814. reportstep: tuiyanobj.value.reportstep,
  815. interactionstep: tuiyanobj.value.interactionstep,
  816. totaltime: tuiyanobj.value.totaltime,
  817. coids: tuiyanobj.value.coids,
  818. cocodes: tuiyanobj.value.cocodes,
  819. }
  820. request(params)
  821. .then((res) => {
  822. // initWebSocket();
  823. })
  824. .catch((err) => {
  825. ElMessage.error(err.returnMsg)
  826. })
  827. }
  828. const projectsSelectionSelect = () => {
  829. }
  830. // 日志获取
  831. function getthislog(val) {
  832. if (val.includes("msg=heartCheck")) {
  833. } else {
  834. newlog.value = newlog.value + "\n" + val;
  835. rizhi.value.logs = newlog.value;
  836. }
  837. let textarea = document.getElementById("textarea_id");
  838. textarea.scrollTop = textarea.scrollHeight;
  839. }
  840. // 历史日志
  841. async function fetchFileContent() {
  842. const params = {
  843. transCode: "D000015",
  844. aid: aid.value
  845. };
  846. await request(params)
  847. .then((res) => {
  848. if (res.returnCode == "000000000") {
  849. getthislog(res.logs);
  850. } else {
  851. ElMessage({
  852. message: res.returnMsg,
  853. type: "error",
  854. });
  855. }
  856. })
  857. .catch((err) => { });
  858. }
  859. // 日志
  860. function initWebSocket() {
  861. //初始化weosocket
  862. // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
  863. const wsurl = import.meta.env.VITE_WEBSOCKET_URL + aid.value
  864. console.log(wsurl);
  865. websock = new WebSocket(wsurl);
  866. websock.onopen = websocketonopen;
  867. websock.onmessage = websocketonmessage;
  868. websock.onerror = websocketonerror;
  869. websock.onclose = websocketclose;
  870. }
  871. // Websoket连接成功事件
  872. const websocketonopen = (res) => {
  873. console.log("WebSocket连接成功", res);
  874. start();
  875. };
  876. // Websoket接收消息事件
  877. const websocketonmessage = (res) => {
  878. // console.log("数据", res);
  879. // console.log(res.data);
  880. getthislog(res.data);
  881. reset();
  882. };
  883. // Websoket连接错误事件
  884. const websocketonerror = (res) => {
  885. console.log("连接错误", res);
  886. websock.value.close();
  887. reconnect();
  888. };
  889. // Websoket断开事件
  890. const websocketclose = (res) => {
  891. console.log("断开连接", res);
  892. };
  893. // 创建 websocket 的实例
  894. // 心跳包
  895. const reconnect = () => {
  896. if (times.value.lockReconnect) return;
  897. times.value.lockReconnect = true;
  898. //没连接上会一直重连,设置延迟避免请求过多
  899. times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
  900. times.value.timeoutnum = setTimeout(function () {
  901. //新连接
  902. initWebSocket();
  903. times.value.lockReconnect = false;
  904. }, 10000);
  905. }
  906. const reset = () => {
  907. //重置心跳
  908. clearTimeout(times.value.timeoutObj);
  909. clearTimeout(times.value.serverTimeoutObj);
  910. start();
  911. }
  912. const start = () => {
  913. //开启心跳
  914. times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
  915. times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
  916. times.value.timeoutObj = setTimeout(function () {
  917. //这里发送一个心跳,后端收到后,返回一个心跳消息
  918. if (websock.readyState == 1) {
  919. //如果连接正常
  920. websock.send("heartCheck");
  921. } else {
  922. //否则重连
  923. console.log(111111)
  924. reconnect();
  925. }
  926. times.value.serverTimeoutObj = setTimeout(function () {
  927. // 超时关闭
  928. websock.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
  929. }, times.value.timeout);
  930. }, times.value.timeout);
  931. }
  932. // 组件被销毁之前,清空 sock 对象
  933. onBeforeUnmount(() => {
  934. // 关闭连接
  935. websocketclose;
  936. // 销毁 websocket 实例对象
  937. websock.value = null;
  938. rizhi.logs='';
  939. });
  940. onMounted(() => {
  941. // dialogVisible.value=true;
  942. });
  943. defineExpose({ monitor, accident2, leftcoll, classradio, aid, dialogVisible ,changeModel,classclick});
  944. </script>
  945. <style>
  946. @import '../../src/style/style.css';
  947. .scoperadio .el-radio__label {
  948. display: none !important;
  949. }
  950. </style>