CreateMis.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678
  1. <template>
  2. <div>
  3. <div class="createMisBox" v-if="selects == 1">
  4. <div>
  5. <h1 style="font-size: 16px;font-weight: bolder;">{{ editAndAdd }}</h1>
  6. </div>
  7. <div class="formBox">
  8. <el-form ref="myForm" :inline="true" label-position="top" :model="newMission" class="demo-form-inline"
  9. style="width: 1200px;margin: 0 auto;" :rules="missionRules" require-asterisk-position="right"
  10. label-width="500px">
  11. <el-form-item label="检测任务名称" prop="misName">
  12. <el-input class="bestInput" v-model="newMission.misName" placeholder="请输入任务名称" clearable />
  13. </el-form-item>
  14. <el-form-item label="任务编号" prop="misNum">
  15. <el-input class="bestInput" disabled v-model="newMission.misNum" placeholder="自动生成任务编号..."
  16. clearable />
  17. </el-form-item>
  18. <el-form-item label="检测变电站" prop="flashId">
  19. <el-select style="width: 340px;height: 40px;" v-model="newMission.flashId" placeholder="请选择变电站"
  20. clearable @change="flashChange">
  21. <template v-for="(item, index) in flashList">
  22. <el-option :label="item.label" :value="item.value" />
  23. </template>
  24. </el-select>
  25. <img @click="addFlash" style="width: 40px;height: 40px;"
  26. src="../../../assets/icon/create_misBtn.png" alt="">
  27. </el-form-item>
  28. <el-form-item label="检测模型" prop="cmodel">
  29. <el-input class="bestInput" style="width: 600px;" disabled placeholder="输入内容"
  30. v-model="cmodel"></el-input>
  31. <el-button @click="modelOpen" style="height: 40px;margin-left: 5px;" type="primary" plain><el-icon>
  32. <Coin style="color: #449DFD;" />
  33. </el-icon>选择模型</el-button>
  34. </el-form-item>
  35. <el-form-item label="报告模板" prop="reportNow">
  36. <el-select class="bestInput" style="width: 400px;height: 40px;" @chang="bmChange"
  37. v-model="newMission.reportNow" placeholder="请选择模板" clearable>
  38. <el-option v-for="(item, index) in rmList" :label="item.name" :value="item.id" />
  39. </el-select>
  40. </el-form-item>
  41. <el-form-item prop="misMes">
  42. <template #label>
  43. <span style="color: red;">任务说明</span>
  44. </template>
  45. <el-input style="width: 1136px;" v-model="newMission.misMes"></el-input>
  46. </el-form-item>
  47. <el-form-item label="SCD文件">
  48. <div style="width:100%;text-align: left;">{{ scdName }}</div>
  49. <el-upload ref="upload" class="upload-demo" :http-request="nowUpload" :limit="2"
  50. element-loading-text="上传中..." element-loading-background="rgba(255, 255, 255, 0.8)"
  51. :show-file-list="false">
  52. <template #trigger>
  53. <el-button style="border-bottom: 1px solid #7BBAFD;width: calc(100vw - 1000px);"
  54. type="primary" plain>选择SCD文件</el-button>
  55. </template>
  56. </el-upload>
  57. <span style="margin-left: 10px;" v-loading="scdLoading">{{ scdLoading ? ' 正在进行SCD间隔装置分析' : ' SCD分析已完成' }}
  58. </span>
  59. </el-form-item>
  60. </el-form>
  61. </div>
  62. <!-- 间隔、装置列表 -->
  63. <div>
  64. <el-button style="width: 200px;height: 30px;" @click="backMent">返回</el-button>
  65. <el-button style="width: 200px;height: 30px;" @click="saveMent" type="primary">保存</el-button>
  66. </div>
  67. <div class="gapAndUnit" v-if="successScd">
  68. <!-- 间隔列表 -->
  69. <div class="gapBox">
  70. <div style="display: flex;justify-content: flex-start;align-items: center;margin: 5px;">
  71. <div>
  72. <img src="../../../assets/icon/DotsNine.png" alt="">
  73. </div>
  74. <div style="height: 24px;line-height: 22px;margin-left: 5px;">
  75. <span>间隔列表</span>
  76. </div>
  77. </div>
  78. <!-- <p :class="jgSelect == index ? 'result' : ''" v-for="(item, index) in jgList"
  79. style="text-align: left;cursor: pointer;" @click="jgClick(item, index)">
  80. {{ item.name }}
  81. </p> -->
  82. <el-tree :props="anyProps" :data="anyData" @node-click="handleCheckChange" />
  83. </div>
  84. <!-- 装置列表 -->
  85. <div class="unitBox">
  86. <div style="display: flex;justify-content: flex-start;align-items: center;margin: 10px 10px;">
  87. <div>
  88. <img src="../../../assets/icon/HardDrives.png" alt="">
  89. </div>
  90. <div style="height: 24px;line-height: 22px;margin-left: 5px;">
  91. <span>装置列表——间隔:<em>{{ jg }}</em></span>
  92. <span>检测模型:<em>{{ flashLevel ? flashLevel + '线路保护模型' : '' }}</em></span>
  93. </div>
  94. <div style="position: absolute;top: 0px;right: 0px;display: flex;justify-content: center;align-items: center;">
  95. <div style="margin: 0 10px;">
  96. <el-checkbox label="开启检测" size="large" />
  97. </div>
  98. <div style="margin: 5px;">
  99. <el-button type="primary" size="small" plain @click="checkTime">选择装置</el-button>
  100. </div>
  101. </div>
  102. </div>
  103. <div v-loading="iedLoading" style="margin: 10px;float: left;">
  104. <!-- <div v-for="(item, index) in mx">
  105. {{ item.ied_name }}
  106. </div> -->
  107. <el-tag v-for="(item, index) in mx" :key="item.ied_name" @click="tagClick(item, index)" size="large"
  108. :class="item.isChoose ? 'mx-2' : 'mx-1'" closable="true" effect="plain"
  109. @close="tagClose(item)">
  110. {{ '['+item.ied_name+']'+(item.attr_desc||'') }}
  111. </el-tag>
  112. </div>
  113. </div>
  114. </div>
  115. <div v-if="successScd">
  116. <el-button style="width: 200px;height: 30px;" @click="backMent">返回</el-button>
  117. <el-button style="width: 200px;height: 30px;" type="primary" @click="iedSave">保存</el-button>
  118. </div>
  119. </div>
  120. <!-- 模态框组件 -->
  121. <div>
  122. <LookScd v-if="scdLooks" :scdLooks="scdLooks" @nowBack="nowBack" @lookNum="lookNum"></LookScd>
  123. <ModelTree v-if="treeMool" :treeMool="treeMool" :treeNeed="treeNeed" :checkedNodeNames="checkedNodeNames" @treeBack="treeBack" @treeNum="treeNum">
  124. </ModelTree>
  125. <FlashCreate v-if="fcModal" :fcModal="fcModal" @fcBack="fcBack"></FlashCreate>
  126. <CheckIed v-if="iedModal" :iedModal="iedModal" :loadScdId="loadScdId" @iedBack="iedBack"
  127. @iedArrBack="iedArrBack"></CheckIed>
  128. </div>
  129. </div>
  130. </template>
  131. <script>
  132. import { ref, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
  133. import flashPower from '../../../api/flashPower'
  134. import report from '@/api/report';
  135. import scd from "@/api/scd"
  136. import task from '@/api/task';
  137. import cid from '@/api/cid/cid';
  138. import LookScd from '../modalComp/LookScd.vue';
  139. import ModelTree from '../modalComp/ModelTree.vue';
  140. import FlashCreate from '../modalComp/FlashCreate.vue';
  141. import CheckIed from '../modalComp/CheckIed.vue';
  142. import { ElMessage,ElMessageBox, ElLoading } from 'element-plus';
  143. export default {
  144. props: {
  145. btnSelect: {
  146. type: Number,
  147. require: true
  148. },
  149. taskList: {
  150. type: Array,
  151. require: true
  152. },
  153. editRow: {
  154. type: Object,
  155. require: true
  156. },
  157. status: {
  158. type: Number,
  159. require: true
  160. }
  161. },
  162. setup(props, { emit }) {
  163. let selects = props.btnSelect
  164. let arrList = props.taskList
  165. let newMission = ref({
  166. misName: "",
  167. misNum: "",
  168. flashId: "",
  169. reportNow: "",
  170. misMes: "",
  171. scdFolder: "",
  172. misId: "",
  173. cmodel:"",
  174. })//创建任务提交表单
  175. let missionRules = ref({
  176. misName: [
  177. { required: true, message: '请输入名称', trigger: 'blur' },
  178. ],
  179. flashId: [
  180. { required: true, message: "请选择变电站", trigger: "blur" }
  181. ],
  182. reportNow: [
  183. { required: true, message: "请选择模板", trigger: "blur" }
  184. ],
  185. misMes: [
  186. { required: true, message: "请输入任务说明", trigger: "blur" }
  187. ],
  188. cmodel: [
  189. { required: true, message: "请选择检测模型", trigger: "blur" }
  190. ],
  191. })//表单验证
  192. let flashList = ref([])//表单选择的变电站
  193. let scdLooks = ref(false)//选择scd文件时的显示与否
  194. let treeMool = ref(false)//选择模型模态框
  195. let btnName = ref('点击选择scd文件')
  196. let jg = ref("请选择")
  197. let jgList = ref([])//间隔列表
  198. let jgSelect = ref()//选择间隔
  199. let jgid = ref("")//间隔id
  200. let mx = ref([])
  201. let mxList = ref([])//模型列表
  202. let mxId = ref("")//模型id
  203. let rmList = ref([])//报告模板list
  204. let scdId = ref('')//lookscd.vue返回的scdid
  205. let scdName = ref('')//lookscd.vue返回的scdname
  206. let cmodel = ref('')
  207. let fcModal = ref(false)//创建变电站模态框
  208. let scdLoading = ref(false)//上传scd文件后进行分析
  209. let loadScdId = ref(0)//上传成功后拿到的scdid
  210. let successScd = ref(false)//保存任务后继续选择的间隔模型
  211. let iedModal = ref(false)//checkied.vue模态框状态
  212. let loadAreaId = ref("")
  213. let iedName = ref("")//一串ied名称字符串
  214. let iedLoading = ref(false)//加载ied
  215. let needEdit = ref({})//需要编辑的任务
  216. let anyProps = ref({
  217. label: "area_name",
  218. id: "area_id",
  219. })
  220. let treeNeed = ref([])//modelTree.vue需要的回显数据
  221. let checkedNodeNames = ref([])
  222. let anyData = ref([])
  223. let states = ref(0)
  224. let flashLevel = ref("")
  225. const myForm = ref(null)//表单ref
  226. let editAndAdd = ref("新建检测任务")
  227. watch(() => props.editRow, (newVal) => {
  228. needEdit.value = newVal
  229. })
  230. watch(() => props.status, (newValue, oldValue) => {
  231. if (newValue !== 2) {
  232. resetForm(); // 重置表单数据
  233. }
  234. });
  235. function resetForm() {
  236. if (myForm.value) {
  237. myForm.value.resetFields();
  238. }
  239. };
  240. function reload() {
  241. states.value = props.status
  242. if (states.value == 2) {
  243. if (props.editRow.name) {
  244. needEdit.value = props.editRow
  245. newMission.value.misName = needEdit.value.name//任务名称
  246. newMission.value.misNum = needEdit.value.code//任务id
  247. newMission.value.flashId = needEdit.value.station_id//变电站id
  248. newMission.value.misMes = needEdit.value.memo//备注或描述
  249. newMission.value.reportNow = needEdit.value.report_id//报告模板
  250. loadScdId.value = needEdit.value.scd_id//scdid
  251. editAndAdd.value = '编辑检测任务'
  252. task.getTaskById({ id: needEdit.value.id - 0 }).then(res => {
  253. if (res.data != null) {
  254. let modelnames = res.data.models.map((item, index) => {
  255. return item.model_name
  256. })
  257. let arr = res.data.models.map((item, index) => {
  258. return item.sys_model_id
  259. })
  260. cmodel.value = modelnames.join(',')
  261. mxId.value = arr
  262. treeNeed.value = arr
  263. checkedNodeNames.value = modelnames
  264. loadScdId.value = res.data.scd_id
  265. scdName.value = res.data.scd_info.scd_name
  266. successScd.value = true
  267. scd.getLoadScd({ scd_id: res.data.scd_id*1 }).then(res => {
  268. if (res.code == 0) {
  269. successScd.value = true
  270. anyData.value = res.data
  271. }
  272. })
  273. }
  274. })
  275. } else {
  276. return
  277. }
  278. } else {
  279. return
  280. }
  281. }
  282. function searchAllFlash() {
  283. flashPower.getAllArea({}).then(res => {
  284. flashPower.getAllFlashPower({ pid: res.data[0].pid }).then(res => {
  285. if (res.data == null) {
  286. return
  287. } else {
  288. flashList.value = res.data.map(item => {
  289. return {
  290. label: item.area_name,
  291. value: item.id
  292. }
  293. })
  294. }
  295. })
  296. })
  297. report.getReport({}).then(res => {
  298. rmList.value = res.data
  299. })
  300. }
  301. //变电站下拉框change事件
  302. function flashChange(e) {
  303. // searchScd(e)
  304. newMission.value.flashId = e
  305. }
  306. function bmChange(e) {
  307. newMission.value.reportNow = e.id
  308. }
  309. function jgClick(row, num) {
  310. jg.value = row.name
  311. jgSelect.value = num
  312. jgid.value = row.id
  313. }
  314. // 选择scd文件
  315. function chooseScdFile() {
  316. scdLooks.value = true
  317. }
  318. // lookscd组件传回得数据
  319. function nowBack(data, names, sid) {
  320. scdLooks.value = data
  321. if (names && sid) {
  322. newMission.value.scdFolder = sid
  323. btnName.value = names
  324. scd.getScdMiddle({ scd_id: sid }).then(res => {
  325. console.log(res, 'sid');
  326. })
  327. scd.getIedMiddle({ scd_id: sid }).then(res => {
  328. console.log(res, 'ied');
  329. })
  330. }
  331. }
  332. function saveMent() {//保存检测任务
  333. myForm.value.validate((val) => {
  334. if (val) {
  335. task.createTask({
  336. id: newMission.value.misNum - 0,
  337. name: newMission.value.misName,
  338. station_id: newMission.value.flashId - 0,
  339. memo: newMission.value.misMes,
  340. report_id: newMission.value.reportNow - 0,
  341. scd_id: loadScdId.value - 0,
  342. modelids: mxId.value.toString()
  343. }).then(res => {
  344. if (res.code == 0) {
  345. ElMessage({
  346. message: "创建成功",
  347. type: "success"
  348. })
  349. // emit("createBack", 0)
  350. scd.getLoadScd({ scd_id: loadScdId.value - 0 }).then(res => {
  351. if (res.code == 0) {
  352. successScd.value = true
  353. anyData.value = res.data
  354. console.log(anyData.value, 'any')
  355. }
  356. })
  357. }
  358. })
  359. }
  360. })
  361. }
  362. function nowUpload(e) {
  363. if( scdLoading.value ){
  364. return
  365. }
  366. const loading = ElLoading.service({
  367. lock: true,
  368. text: '文件上传中',
  369. background: 'rgba(0, 0, 0, 0.7)',
  370. })
  371. cid.fileUpload({ station_id: newMission.value.flashId - 0, data_type: 'a_scd', file: e.file }).then(res => {
  372. scdLoading.value = true
  373. if (res.code == 0) {
  374. loading.close()
  375. }
  376. scdName.value = res.data.filename
  377. scd.loadScd({ station_id: newMission.value.flashId - 0, scd_path: res.data.path, scd_name: res.data.filename }).then(the => {
  378. // scd.getLoadScd({ scd_id: the.data - 0 }).then(lod => {
  379. // console.log(lod,'rsasdas');
  380. if (the.code == 0) {
  381. loadScdId.value = the.data - 0
  382. scdLoading.value = false
  383. }
  384. // })
  385. })
  386. })
  387. }
  388. function handleCheckChange(e) {
  389. jg.value = e.area_name
  390. loadAreaId.value = e.area_id
  391. flashLevel.value = e.vol_name
  392. iedLoading.value = true
  393. scd.getTikIed({ scd_id: loadScdId.value - 0, area_id: e.area_id - 0 }).then(res => {
  394. if (res.data != null) {
  395. mx.value = res.data.map(item => ({ ...item, isChoose: false }));
  396. iedName.value = mx.value.map(item => item.ied_name).join(',')
  397. iedLoading.value = false
  398. } else {
  399. mx.value = []
  400. iedLoading.value = false
  401. }
  402. })
  403. }
  404. function iedSave() {
  405. scd.stickIed({ scd_id: loadScdId.value - 0, area_id: loadAreaId.value - 0, ied_ids: iedName.value }).then(res => {
  406. console.log(res, 'res');
  407. if (res.code == 0) {
  408. ElMessage({
  409. type: "success",
  410. message: "间隔装置设置保存成功!",
  411. duration: 1500,
  412. })
  413. emit("createBack", 0)
  414. } else {
  415. ElMessage({
  416. type: "error",
  417. message: res.msg,
  418. duration: 3000,
  419. })
  420. }
  421. })
  422. }
  423. function tagClose(row, num) {
  424. ElMessageBox.confirm('确认从该间隔移除当前装置'+row.ied_name+'吗?','删除装置').then(() => {
  425. mx.value.splice(mx.value.indexOf(row), 1)
  426. iedName.value = mx.value.map(item => item.ied_name).join(',');
  427. }).catch(() => {})
  428. }
  429. function tagClick(row, num) {
  430. // 将所有对象的 isChoose 属性设置为 false
  431. mx.value.forEach(item => {
  432. item.isChoose = false;
  433. });
  434. // 将当前点击的对象的 isChoose 属性设置为 true
  435. row.isChoose = true;
  436. }
  437. function checkTime() {
  438. iedModal.value = true
  439. }
  440. function addFlash() {
  441. fcModal.value = true
  442. }
  443. function backMent() {
  444. emit("createBack", 0)
  445. }
  446. function treeBack(data) {
  447. treeMool.value = data
  448. }
  449. function modelOpen() {
  450. treeMool.value = true
  451. }
  452. function treeNum(data, name) {
  453. mxId.value = data
  454. cmodel.value = name.toString()
  455. newMission.value.cmodel = name.toString()
  456. }
  457. function lookNum(name, id) {
  458. scdId.value = id
  459. scd.getScdMiddle({ scd_id: id }).then(res => {
  460. jgList.value = res.data
  461. })
  462. scdName.value = name
  463. }
  464. function fcBack(data) {
  465. fcModal.value = data
  466. }
  467. function iedBack(data) {
  468. iedModal.value = data
  469. }
  470. function iedArrBack(data) {
  471. for(let i=0; i<data.length; i++){
  472. let obj = mx.value.filter(item => item.ied_name==data[i].ied_name)
  473. if( obj != null && obj.length > 0){
  474. ElMessage({
  475. type: "info",
  476. message: data[i].ied_name+":该装置已存在!",
  477. duration: 3000,
  478. })
  479. return
  480. }
  481. }
  482. mx.value = mx.value.concat(data)
  483. iedName.value = mx.value.map(item => item.ied_name).join(',');
  484. }
  485. onMounted(() => {
  486. searchAllFlash()
  487. reload()
  488. })
  489. onBeforeUnmount(() => {
  490. resetForm()
  491. })
  492. return {
  493. selects,
  494. arrList,
  495. newMission,
  496. searchAllFlash,//获取变电站
  497. missionRules,//表单验证
  498. flashList,//表单选择的变电站
  499. flashChange,//变电站下拉框change事件
  500. scdLooks,//选择scd文件时的显示与否
  501. chooseScdFile,// 选择scd文件
  502. nowBack, // lookscd组件传回得数据
  503. btnName,//按钮内修改文字
  504. treeMool,//选择模型显示与否
  505. treeBack,//modeltree传回数据
  506. modelOpen,//选择模型打开模态框
  507. jg,//间隔
  508. jgList,//间隔列表
  509. jgSelect,//选择
  510. jgClick,//间隔点击
  511. jgid,//间隔id
  512. mx,//模型
  513. mxList,//模型列表
  514. treeNum,//modelTree.vue返回的id函数
  515. mxId,//模型id
  516. rmList,//报告模板列表
  517. scdId,//lookscd.vue返回的数据
  518. scdName,//lookscd.vue返回的数据
  519. saveMent,//保存检测任务
  520. bmChange,
  521. backMent,//返回切换
  522. cmodel,
  523. addFlash,//新建变电站
  524. fcModal,//创建变电站模态框
  525. fcBack,//flashcreate.vue返回的模态框值
  526. nowUpload,//文件上传
  527. scdLoading,
  528. loadScdId,//上传成功后拿到的scdid
  529. successScd,//保存任务后继续选择的间隔模型
  530. handleCheckChange,//树形组件
  531. anyData,
  532. anyProps,
  533. iedModal,//checkied.vue模态框状态
  534. iedBack,//checkied.vue返回模态框状态
  535. checkTime,//打开选择ied
  536. iedArrBack,//checkied.vue返回选择数组
  537. tagClose,
  538. loadAreaId,//area_id
  539. iedSave,//保存ied状态
  540. iedName,//一串ied字符串
  541. iedLoading,
  542. needEdit,//需要编辑的任务
  543. treeNeed,//modelTree.vue需要的回显id
  544. checkedNodeNames,
  545. states,
  546. myForm,//表单ref
  547. resetForm,
  548. flashLevel,
  549. tagClick,//tag标签的点击事件
  550. editAndAdd,
  551. }
  552. },
  553. components: {
  554. LookScd,
  555. ModelTree,//选择模型
  556. FlashCreate,//创建变电站
  557. CheckIed,//选择ied
  558. }
  559. }
  560. </script>
  561. <style scoped>
  562. em {
  563. font-style: normal;
  564. color: #5779D7;
  565. margin-right: 5px;
  566. }
  567. .createMisBox {
  568. width: 100%;
  569. height: calc(100vh - 150px);
  570. text-align: center;
  571. margin-top: 20px;
  572. /* line-height: calc(100vh - 150px); */
  573. }
  574. .formBox {
  575. width: 1136px;
  576. height: 360px;
  577. margin: 0 auto;
  578. /* border-bottom: 1px dashed #dbdbdb; */
  579. }
  580. .bestInput {
  581. width: 360px;
  582. height: 40px;
  583. border-radius: 2px 2px 2px 2px;
  584. }
  585. .gapAndUnit {
  586. width: 1136px;
  587. /* height: 150px; */
  588. /* border: 1px solid black; */
  589. margin: 5px auto;
  590. display: flex;
  591. justify-content: space-around;
  592. align-items: center;
  593. }
  594. .gapBox {
  595. width: 288px;
  596. height: calc(100vh - 640px);
  597. overflow-y: auto;
  598. border: 1px solid #5779D7;
  599. }
  600. .unitBox {
  601. width: 832px;
  602. height: calc(100vh - 640px);
  603. overflow-y: auto;
  604. border: 1px solid #5779D7;
  605. position: relative;
  606. }
  607. .result {
  608. color: #5779D7;
  609. }
  610. .chooseSpan {
  611. width: 150px;
  612. height: 30px;
  613. margin-left: 10px;
  614. border: 1px solid blue;
  615. text-align: center;
  616. line-height: 30px;
  617. }
  618. .mx-1 {
  619. float: left;
  620. min-width: 100px;
  621. height: 30px;
  622. margin-right: 10px;
  623. margin-top: 5px;
  624. margin-bottom: 5px;
  625. border: 1px solid #5779D7;
  626. color: black;
  627. }
  628. .mx-2 {
  629. float: left;
  630. min-width: 100px;
  631. height: 30px;
  632. margin-right: 10px;
  633. margin-top: 5px;
  634. margin-bottom: 5px;
  635. border: 1px solid #5779D7;
  636. background-color: rgba(89, 120, 213, 0.3);
  637. color: #5779D7;
  638. }
  639. :deep(.el-form--inline .el-form-item) {
  640. margin-right: 12px !important;
  641. }
  642. :deep(.el-select .el-input__wrapper) {
  643. height: 38px;
  644. }
  645. .demo-form-inline:nth-child(2) {
  646. background-color: red;
  647. }
  648. .my-red-label {
  649. color: red;
  650. }
  651. :deep(.el-tag--large .el-tag__close) {
  652. margin-left: 25px;
  653. }
  654. :deep(.el-icon svg) {
  655. /* color: red; */
  656. }</style>