Xbar-RList.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861
  1. <template>
  2. <div class="container1">
  3. <div class="databox">
  4. <el-scrollbar :style="{ height: Height + 'px' }">
  5. <div class="box">
  6. <div class="title">
  7. <div style="display: flex; align-items: center">
  8. <div class="bg"></div>
  9. 样本数据录入
  10. </div>
  11. <div class="header" v-show="!addStatus && !editStatus">
  12. <Search
  13. :searchOptions="searchForm"
  14. ref="searchRef"
  15. @data-list="getTableData"
  16. @reset-list="reset"
  17. />
  18. </div>
  19. <div class="btns">
  20. <el-upload
  21. v-if="!addStatus && !editStatus"
  22. style="float: left"
  23. :action="uploadUrl"
  24. :on-success="handleSuccess"
  25. :before-upload="beforeUpload"
  26. :limit="1"
  27. accept=".xlsx, .xls"
  28. :show-file-list="false"
  29. ref="uploadRef"
  30. >
  31. <el-button size="small" type="primary">Excel导入</el-button>
  32. </el-upload>
  33. <el-button
  34. v-if="!addStatus && !editStatus"
  35. style="margin-left: 15px"
  36. type="primary"
  37. size="small"
  38. class="btn"
  39. @click="
  40. downloadSPCTemplate(
  41. '/api/v1/spc/downloadTemplate',
  42. '/spc/template/XBarR控制图数据导入模版.xlsx'
  43. )
  44. "
  45. >模版下载</el-button
  46. >
  47. <el-button
  48. style="margin-left: 15px"
  49. v-if="!addStatus && !editStatus"
  50. type="primary"
  51. size="small"
  52. class="btn"
  53. @click="changeaddstatus"
  54. >新增</el-button
  55. >
  56. <el-button
  57. style="margin-left: 15px"
  58. v-if="!addStatus && !editStatus"
  59. type="primary"
  60. size="small"
  61. class="btn"
  62. @click="compute"
  63. >计算</el-button
  64. >
  65. <el-button
  66. v-if="editStatus || addStatus"
  67. type="success"
  68. size="small"
  69. class="btn"
  70. @click="submit"
  71. >确定</el-button
  72. >
  73. <el-button
  74. v-if="editStatus || addStatus"
  75. type="info"
  76. size="small"
  77. class="btn"
  78. @click="canceleOp"
  79. >取消</el-button
  80. >
  81. </div>
  82. </div>
  83. <div class="info" v-if="!addStatus">
  84. <el-table
  85. :data="tableData"
  86. border
  87. :style="{
  88. height: maxHeight - 150 + 'px',
  89. width: maxWidth + 'px',
  90. }"
  91. :show-overflow-tooltip="true"
  92. :row-class-name="tableRowClassName"
  93. >
  94. <el-table-column
  95. align="center"
  96. prop="dateStr"
  97. sortable
  98. label="日期"
  99. >
  100. <template #default="{ row }"
  101. ><span>{{ row.dateStr }}</span>
  102. </template>
  103. </el-table-column>
  104. <el-table-column align="center" prop="model" label="产品型号">
  105. <template #default="{ row }"
  106. ><span>{{ row.model }}</span>
  107. </template>
  108. </el-table-column>
  109. <el-table-column align="center" prop="code" label="产品编号">
  110. <template #default="{ row }"
  111. ><span>{{ row.code }}</span>
  112. </template>
  113. </el-table-column>
  114. <el-table-column align="center" prop="batchNo" label="生产批号">
  115. <template #default="{ row }"
  116. ><span>{{ row.batchNo }}</span>
  117. </template>
  118. </el-table-column>
  119. <el-table-column align="center" prop="source" label="数据来源">
  120. <template #default="{ row }"
  121. ><span>{{ row.source }}</span>
  122. </template>
  123. </el-table-column>
  124. <el-table-column
  125. align="center"
  126. prop="accuracys"
  127. label="数据"
  128. :show-overflow-tooltip="false"
  129. >
  130. <template #default="{ row }">
  131. <el-tooltip placement="top">
  132. <template #content>
  133. <div v-for="(item, index) in row.accuracys" :key="index">
  134. <span>数值{{ index + 1 }}: {{ item }}</span>
  135. </div>
  136. </template>
  137. <div class="ellipsis-text">
  138. {{ row.accuracys.join(", ") }}
  139. </div>
  140. </el-tooltip>
  141. </template>
  142. </el-table-column>
  143. <!-- <el-table-column
  144. align="center"
  145. prop="avg"
  146. label="平均值"
  147. width="60"
  148. /><el-table-column
  149. align="center"
  150. prop="range"
  151. label="极差"
  152. width="60"
  153. />--><!--<el-table-column
  154. align="center"
  155. prop="checkUser"
  156. label="检测人"
  157. >
  158. <template #default="{ row }"
  159. ><span>{{ row.checkUser }}</span>
  160. </template> </el-table-column
  161. ><el-table-column
  162. align="center"
  163. prop="checkDeviceNo"
  164. label="检查设备编号"
  165. >
  166. <template #default="{ row }"
  167. ><span>{{ row.checkDeviceNo }}</span>
  168. </template>
  169. </el-table-column>-->
  170. <el-table-column align="center" prop="abnormal" label="是否异常">
  171. <template #default="{ row }"
  172. ><span>{{ row.abnormal }}</span>
  173. </template>
  174. </el-table-column>
  175. <el-table-column
  176. align="center"
  177. prop="abnormal1"
  178. label="异常原因"
  179. :show-overflow-tooltip="false"
  180. >
  181. <template #default="{ row }">
  182. <el-tooltip placement="top">
  183. <template #content>
  184. <div
  185. v-for="(item, index) in row.abnormal1.split(',')"
  186. :key="index"
  187. >
  188. <span>{{ item }}</span>
  189. </div>
  190. </template>
  191. <div class="ellipsis-text">
  192. {{ row.abnormal1 }}
  193. </div>
  194. </el-tooltip>
  195. </template>
  196. </el-table-column>
  197. <!-- <el-table-column align="center" prop="analyseUser" label="分析人">
  198. <template #default="{ row }"
  199. ><span>{{ row.analyseUser }}</span>
  200. </template>
  201. </el-table-column>-->
  202. <el-table-column align="center" prop="measure" label="处置措施">
  203. <template #default="{ row }"
  204. ><span>{{ row.measure }}</span>
  205. </template>
  206. </el-table-column>
  207. <el-table-column align="center" width="255" prop="" label="操作">
  208. <template #default="{ row }">
  209. <el-button
  210. v-if="row.source === '自动'"
  211. :type="loadingRows[row.id] ? 'info' : 'primary'"
  212. size="small"
  213. :loading="loadingRows[row.id]"
  214. @click="dataAcquisition(row)"
  215. :disabled="loadingRows[row.id]"
  216. style="height: 25px"
  217. >
  218. {{ loadingRows[row.id] ? "数据采集中..." : "采集数据" }}
  219. </el-button>
  220. <el-button
  221. type="primary"
  222. size="small"
  223. class="btn"
  224. @click="updataItem(row)"
  225. style="height: 25px"
  226. >修改</el-button
  227. >
  228. <el-button
  229. type="info"
  230. size="small"
  231. class="btn"
  232. style="height: 25px"
  233. @click="deleteSubmit(row.id)"
  234. >删除</el-button
  235. >
  236. </template>
  237. </el-table-column>
  238. </el-table>
  239. <Pagination
  240. :total="currentOption.total"
  241. :page="currentOption.page"
  242. :limit="currentOption.limit"
  243. :pageSizes="currentOption.pageSizes"
  244. v-model:page="currentOption.page"
  245. v-model:limit="currentOption.limit"
  246. @pagination="getTableData"
  247. />
  248. </div>
  249. <div class="info" v-else>
  250. <el-form
  251. ref="ruleFormRef"
  252. :model="addData"
  253. :rules="rules"
  254. label-width="auto"
  255. class="formStyle"
  256. >
  257. <el-form-item label="日期" prop="dateStr">
  258. <el-date-picker
  259. v-model="addData.dateStr"
  260. type="date"
  261. aria-label="Pick a date"
  262. placeholder="Pick a date"
  263. style="width: 100%"
  264. format="YYYY-MM-DD"
  265. value-format="YYYY-MM-DD"
  266. />
  267. </el-form-item>
  268. <el-form-item label="任务编号" prop="qualityTaskId">
  269. <el-select
  270. v-model="addData.qualityTaskId"
  271. @change="
  272. (value) => {
  273. taskChange(value);
  274. }
  275. "
  276. >
  277. <el-option
  278. v-for="(item, index) in taskOption"
  279. :key="index"
  280. :label="item.taskCode"
  281. :value="Number(item.id)"
  282. />
  283. </el-select>
  284. </el-form-item>
  285. <el-form-item label="产品型号" prop="model">
  286. <el-input :disabled="true" v-model="addData.model" />
  287. </el-form-item>
  288. <el-form-item label="产品编号" prop="code">
  289. <el-input :disabled="true" v-model="addData.code" />
  290. </el-form-item>
  291. <el-form-item label="数据来源" prop="source">
  292. <el-input :disabled="true" v-model="addData.source" />
  293. </el-form-item>
  294. <el-form-item label="生产批号" prop="batchNo">
  295. <el-input v-model="addData.batchNo" />
  296. </el-form-item>
  297. <el-form-item
  298. v-for="(item, index) in addData.accuracys"
  299. :label="'数值' + (index + 1)"
  300. :key="index"
  301. :rules="[
  302. {
  303. required: true,
  304. trigger: 'change',
  305. },
  306. ]"
  307. >
  308. <el-input-number
  309. :precision="2"
  310. :step="0.01"
  311. style="width: 100%"
  312. v-model="addData.accuracys[index]"
  313. />
  314. </el-form-item>
  315. <!-- <el-form-item label="平均值" prop="avg">
  316. <el-input v-model="addData.avg" />
  317. </el-form-item>
  318. <el-form-item label="极差" prop="range">
  319. <el-input v-model="addData.range" />
  320. </el-form-item> -->
  321. <!-- <el-form-item label="检测人" prop="checkUser">
  322. <el-input v-model="addData.checkUser" />
  323. </el-form-item>
  324. <el-form-item label="检查设备编号" prop="checkDeviceNo">
  325. <el-input v-model="addData.checkDeviceNo" />
  326. </el-form-item>-->
  327. <!-- <el-form-item label="是否异常" prop="abnormal">
  328. <el-input v-model="addData.abnormal" />
  329. </el-form-item> -->
  330. <!-- <el-form-item label="分析人" prop="analyseUser">
  331. <el-input v-model="addData.analyseUser" />
  332. </el-form-item>-->
  333. <el-form-item label="处置措施" prop="measure" v-if="addData.id">
  334. <el-input v-model="addData.measure" />
  335. </el-form-item>
  336. </el-form>
  337. </div>
  338. </div>
  339. </el-scrollbar>
  340. </div>
  341. </div>
  342. </template>
  343. <script setup>
  344. import { ref } from "vue";
  345. import * as echarts from "echarts";
  346. import { useDictionaryStore } from "@/store";
  347. import {
  348. getData,
  349. addDatas,
  350. deleteData,
  351. updateData,
  352. getTaskCode,
  353. } from "@/api/analysis";
  354. import Search from "@/components/Search/index.vue";
  355. import { XBarRCompute, collectData } from "@/api/analysis";
  356. import { useCrud } from "@/hooks/userCrud";
  357. import {ElMessageBox} from "element-plus";
  358. const { Utils } = useCrud({
  359. src: "/api/v1/spc/pDownloadTemplate",
  360. });
  361. const { downloadSPCTemplate } = Utils;
  362. const emit = defineEmits([
  363. "tableData",
  364. "update:addStatus",
  365. "update:editStatus",
  366. ]);
  367. // 在你的组件 setup 中
  368. const loadingRows = ref({});
  369. const dataAcquisition = async (row) => {
  370. loadingRows.value = { ...loadingRows.value, [row.id]: true };
  371. try {
  372. // 这里替换为你的实际请求
  373. const { code } = await collectData({
  374. qualitySpcRecordId: row.id,
  375. model: row.model,
  376. batchNo: row.batchNo,
  377. operation: lableValue.value,
  378. });
  379. if (200 == code) {
  380. ElMessage.success("数据采集成功!");
  381. getTableData();
  382. }
  383. } catch (error) {
  384. console.error("数据采集失败:", error);
  385. // 可以在这里添加错误处理,比如显示错误消息
  386. } finally {
  387. loadingRows.value = { ...loadingRows.value, [row.id]: false };
  388. }
  389. };
  390. const compute = async () => {
  391. const accuracysList = ref([]);
  392. for (const item of tableData.value) {
  393. if (item.accuracys?.length > 0) {
  394. accuracysList.value.push(item.accuracys);
  395. } else {
  396. ElMessage.error(`产品 "${item.model}" 的 "${item.batchNo}" 批次数据为空`);
  397. return;
  398. }
  399. }
  400. const { data } = await XBarRCompute({
  401. dataList: accuracysList.value,
  402. scale: 4,
  403. });
  404. emit("tableData", data);
  405. };
  406. const tableRowClassName = ({ row }) => {
  407. if (row.abnormal === "是") {
  408. return "warning-row";
  409. }
  410. return "";
  411. };
  412. const { dicts } = useDictionaryStore();
  413. const year = ref("0");
  414. const currentOption = reactive({
  415. total: 0,
  416. page: 1,
  417. limit: 10,
  418. pageSizes: [10, 20, 30, 40, 50],
  419. });
  420. const lableValue = ref("");
  421. const searchRef = ref(null);
  422. const getTaskOption = async () => {
  423. const { data } = await getTaskCode({
  424. operationCode: lableValue.value,
  425. });
  426. taskOption.value = data;
  427. };
  428. const getTableData = async () => {
  429. const { data, code, msg } = await getData({
  430. ...searchRef.value.searchForm,
  431. pageNo: currentOption.page,
  432. pageSize: currentOption.limit,
  433. // yearStr: year.value,
  434. operation: lableValue.value,
  435. });
  436. if (code == "200") {
  437. tableData.value = data.records;
  438. showData.value = { ...data, list: null };
  439. currentOption.total = data.totalCount;
  440. currentOption.page = data.pageNo;
  441. oldDataJSON.value = JSON.stringify(data.records);
  442. }
  443. disabled.value = false;
  444. };
  445. const searchForm = [
  446. {
  447. label: "日期",
  448. prop: "createds",
  449. type: "daterange",
  450. },
  451. {
  452. label: "产品型号",
  453. prop: "model",
  454. type: "input",
  455. },
  456. {
  457. label: "生产批号",
  458. prop: "batchNo",
  459. type: "input",
  460. },
  461. ];
  462. //编辑状态
  463. const editStatus = ref(false);
  464. const addStatus = ref(false);
  465. const changeEditstatus = () => {
  466. editStatus.value = !changeEditstatus.value;
  467. addStatus.value = false;
  468. };
  469. const changeaddstatus = () => {
  470. addStatus.value = !addStatus.value;
  471. editStatus.value = false;
  472. emit("update:addStatus", addStatus.value);
  473. };
  474. const canceleOp = () => {
  475. addStatus.value = false;
  476. editStatus.value = false;
  477. emit("update:addStatus", addStatus.value);
  478. emit("update:editStatus", editStatus.value);
  479. reset();
  480. };
  481. const disabled = ref(false);
  482. const tableData = ref([]);
  483. //Form
  484. const ruleFormRef = ref(null);
  485. const rules = {
  486. qualityTaskId: [
  487. {
  488. required: true,
  489. trigger: "change",
  490. },
  491. ],
  492. dateStr: [
  493. {
  494. required: true,
  495. trigger: "change",
  496. },
  497. ],
  498. model: [
  499. {
  500. required: true,
  501. trigger: "change",
  502. },
  503. ],
  504. batchNo: [
  505. {
  506. required: true,
  507. trigger: "change",
  508. },
  509. ],
  510. accuracy1: [
  511. {
  512. required: true,
  513. trigger: "change",
  514. },
  515. ],
  516. accuracy2: [
  517. {
  518. required: true,
  519. trigger: "change",
  520. },
  521. ],
  522. accuracy3: [
  523. {
  524. required: true,
  525. trigger: "change",
  526. },
  527. ],
  528. accuracy4: [
  529. {
  530. required: true,
  531. trigger: "change",
  532. },
  533. ],
  534. accuracy5: [
  535. {
  536. required: true,
  537. trigger: "change",
  538. },
  539. ],
  540. checkUser: [
  541. {
  542. required: true,
  543. trigger: "change",
  544. },
  545. ],
  546. checkDeviceNo: [
  547. {
  548. required: true,
  549. trigger: "change",
  550. },
  551. ],
  552. // abnormal: [
  553. // {
  554. // required: true,
  555. // trigger: "change",
  556. // },
  557. // ],
  558. analyseUser: [
  559. {
  560. required: true,
  561. trigger: "change",
  562. },
  563. ],
  564. measure: [
  565. {
  566. required: false,
  567. trigger: "change",
  568. },
  569. ],
  570. };
  571. const resItem = {
  572. // abnormal: "",
  573. analyseUser: "",
  574. batchNo: "",
  575. checkDeviceNo: "",
  576. checkUser: "",
  577. dateStr: "",
  578. measure: "",
  579. model: "",
  580. };
  581. const addData = ref({
  582. // abnormal: "",
  583. analyseUser: "",
  584. batchNo: "",
  585. checkDeviceNo: "",
  586. checkUser: "",
  587. dateStr: "",
  588. measure: "",
  589. model: "",
  590. });
  591. const accuracysSum = ref(0);
  592. const taskChange = (value) => {
  593. taskOption.value.forEach((item) => {
  594. if (item.id == value) {
  595. addData.value.model = item.prodtModel;
  596. addData.value.code = item.prodtCode;
  597. addData.value.source = item.source;
  598. if (item.source === "手动") {
  599. accuracysSum.value = Number(item.processCount);
  600. addData.value.accuracys = [];
  601. let array = [];
  602. for (let i = 0; i < accuracysSum.value; i++) {
  603. array.push(0);
  604. }
  605. addData.value.accuracys = array;
  606. } else {
  607. addData.value.accuracys = [];
  608. }
  609. }
  610. });
  611. };
  612. const oldDataJSON = ref("");
  613. const showData = ref({});
  614. const opOptions = ref([...dicts.spc_operation]);
  615. //修改
  616. const updataItem = (row) => {
  617. editStatus.value = true;
  618. const data = JSON.parse(JSON.stringify(row));
  619. addData.value = data;
  620. addStatus.value = true;
  621. emit("update:addStatus", addStatus.value);
  622. emit("update:editStatus", editStatus.value);
  623. };
  624. const taskOption = ref([]);
  625. const value = ref(opOptions.value[0].remark);
  626. const showLable = ref("调阻");
  627. const maxHeight = ref(null);
  628. const maxWidth = ref(null);
  629. const Height = ref(0);
  630. const setHeight = () => {
  631. Height.value = document.querySelector(".databox").clientHeight;
  632. maxHeight.value = document.querySelector(".info").clientHeight;
  633. maxWidth.value = document.querySelector(".info").clientWidth;
  634. };
  635. //当新增或者编辑的确定操作
  636. const submit = () => {
  637. if (editStatus.value == true) {
  638. updateSubmit();
  639. } else {
  640. addSubmit();
  641. }
  642. };
  643. const addSubmit = async () => {
  644. await ruleFormRef.value.validate(async (valid, fields) => {
  645. if (valid) {
  646. const { data, code } = await addDatas({
  647. ...addData.value,
  648. yearStr: year.value,
  649. operation: lableValue.value,
  650. });
  651. if (code == "200") {
  652. ElMessage.success("添加成功!");
  653. reset();
  654. getTableData();
  655. }
  656. } else {
  657. ElMessage.error("请检查表单信息");
  658. }
  659. });
  660. };
  661. const deleteSubmit = async (id) => {
  662. ElMessageBox.confirm("是否删除所选中数据?", "提示", {
  663. confirmButtonText: "确定",
  664. cancelButtonText: "取消",
  665. type: "warning",
  666. }).then(async () => {
  667. const { data, code } = await deleteData({
  668. id,
  669. });
  670. if (code == "200") {
  671. ElMessage.success("删除成功!");
  672. getTableData();
  673. }
  674. });
  675. };
  676. const updateSubmit = async () => {
  677. addData.value.abnormal = null;
  678. const { data, code } = await updateData({
  679. ...addData.value,
  680. });
  681. if (code == "200") {
  682. ElMessage.success("更新成功!");
  683. reset();
  684. getTableData();
  685. }
  686. };
  687. const reset = () => {
  688. addStatus.value = false;
  689. editStatus.value = false;
  690. emit("update:addStatus", addStatus.value);
  691. emit("update:editStatus", editStatus.value);
  692. addData.value = { ...resItem };
  693. searchRef.value.searchForm = {};
  694. currentOption.value = {
  695. total: 0,
  696. page: 0,
  697. limit: 12,
  698. pageSizes: [12],
  699. operation: value.value,
  700. };
  701. getTableData();
  702. };
  703. const uploadUrl = ref("");
  704. const beforeUpload = (file) => {
  705. const isExcel =
  706. file.type === "application/vnd.ms-excel" ||
  707. file.type ===
  708. "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  709. if (!isExcel) {
  710. ElMessage.error("只能上传Excel文件!");
  711. }
  712. return isExcel;
  713. };
  714. const uploadRef = ref("uploadRef");
  715. const handleSuccess = (response) => {
  716. if (response.code === "200") {
  717. ElMessage.success("Excel导入成功!");
  718. getTableData();
  719. } else {
  720. ElMessage.error(response.msg);
  721. }
  722. uploadRef.value.clearFiles();
  723. };
  724. onMounted(async () => {
  725. setHeight();
  726. year.value = new Date().getFullYear() + "";
  727. opOptions.value.forEach((item) => {
  728. if (item.dictLabel == showLable.value) {
  729. lableValue.value = item.dictValue;
  730. }
  731. });
  732. await getTableData();
  733. uploadUrl.value =
  734. import.meta.env.VITE_APP_BASE_API +
  735. "/api/v1/spc/xBarRUpload?operation=" +
  736. lableValue.value;
  737. });
  738. onBeforeUnmount(() => {});
  739. const init = (data) => {
  740. lableValue.value = data;
  741. getTaskOption();
  742. getTableData();
  743. };
  744. // 暴露 init 方法
  745. defineExpose({
  746. init,
  747. });
  748. </script>
  749. <style lang="scss" scoped>
  750. @media print {
  751. #print {
  752. margin-left: -18%;
  753. }
  754. }
  755. :deep(.el-table .warning-row) {
  756. background-color: rgb(241, 142, 142) !important;
  757. }
  758. .ellipsis-text {
  759. white-space: nowrap; /* 禁止换行 */
  760. overflow: hidden; /* 隐藏超出部分 */
  761. text-overflow: ellipsis; /* 显示省略号 */
  762. width: 100%; /* 宽度占满单元格 */
  763. }
  764. .formStyle {
  765. width: 400px;
  766. margin: 20px auto;
  767. }
  768. .container1 {
  769. width: 100%;
  770. height: 100%;
  771. display: flex;
  772. background-color: white;
  773. .infobox {
  774. width: 200px;
  775. .header {
  776. height: 120px;
  777. border-bottom: 2px solid #00000010;
  778. padding: 20px;
  779. }
  780. .body {
  781. padding: 20px;
  782. }
  783. }
  784. .databox {
  785. flex: 1;
  786. border-left: 2px solid #00000010;
  787. .box {
  788. height: 710px;
  789. padding: 5px 20px;
  790. display: flex;
  791. flex-direction: column;
  792. .illustrate {
  793. padding: 20px 60px;
  794. }
  795. .tableTitle {
  796. text-align: center;
  797. margin: 10px 0;
  798. padding-right: 40px;
  799. }
  800. .header {
  801. margin-top: 20px;
  802. //margin-left: 100px;
  803. display: flex;
  804. width: 100%;
  805. height: auto;
  806. }
  807. //.title {
  808. // height: 50px;
  809. // display: flex;
  810. // align-items: center;
  811. // margin-bottom: 10px;
  812. // justify-content: space-between;
  813. // .btns {
  814. // display: flex;
  815. // align-items: center;
  816. // .btn {
  817. // height: 24px;
  818. // font-size: 14px;
  819. // margin: 0 5px;
  820. // }
  821. // }
  822. //}
  823. .info {
  824. margin-top: 20px;
  825. flex: 1;
  826. height: 300px;
  827. }
  828. }
  829. }
  830. }
  831. </style>