evaluationMonthPage.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
  1. <template>
  2. <div class="evaluationMonth" v-loading="loading">
  3. <div class="evaluationMonthBtn">
  4. <div class="collectSeach" :style="$utils.collectSeachSty()">
  5. <div class="exceed">
  6. <span class="exceedSpan">业务编号:</span>
  7. <el-input v-model="rescode" placeholder="请输入业务编号"></el-input>
  8. </div>
  9. <div class="exceed">
  10. <span class="exceedSpan">业务简述:</span>
  11. <el-input v-model="resDes" placeholder="请输入业务简述"></el-input>
  12. </div>
  13. <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
  14. </div>
  15. <div class="PeriodBtn" :style="$utils.PeriodBtnSty()">
  16. <btns
  17. :showImport="false"
  18. :showExport="false"
  19. :showSave="false"
  20. :showAdd="$utils.havePurview('evaluationMonth:oneLevel:add')"
  21. :showDelete="$utils.havePurview('evaluationMonth:oneLevel:delete')"
  22. :disDelete="changeDateSelect.length === 0"
  23. :disImport="true"
  24. :disExport="true"
  25. @handleAdd="handleAdd"
  26. @handleDelete="handleDelete"
  27. @handleExport="handleExport"
  28. ></btns>
  29. </div>
  30. <div class="evaluationMonthTableData">
  31. <el-table :data="evaluationMonthData" style="width: 100%" :class="monthTableSty()"
  32. @select="rowClick" @select-all="rowClick" @row-dblclick="getDetail">
  33. <el-table-column type="selection" label="操作" align="center"></el-table-column>
  34. <el-table-column label="业务编号" prop="organizationEvaluationCode" width="300" />
  35. <el-table-column label="考评单位" width="330">
  36. <template #default="scope">
  37. <el-tooltip
  38. class="tooltipName"
  39. effect="customized"
  40. :content="scope.row.createOrgName"
  41. placement="right"
  42. >
  43. <span class="tooltipCC">{{scope.row.createOrgName}}</span>
  44. </el-tooltip>
  45. </template>
  46. </el-table-column>
  47. <el-table-column label="考评年度" prop="year" />
  48. <el-table-column label="考评月份" prop="month" />
  49. <el-table-column label="创建人" prop="createName" />
  50. <el-table-column label="流程状态" prop="stage">
  51. <template #default="scope">
  52. <p class="indicitem" @click="seeStates(scope.row)">{{scope.row.stage}}</p>
  53. </template>
  54. </el-table-column>
  55. <!-- <el-table-column label="业务类别">
  56. <template #default="scope">
  57. <span v-if="scope.row.checkCycle === 'YDKP'" style="font-size: 12px;">月度考评</span>
  58. <span v-else-if="scope.row.checkCycle === 'JDKP'" style="font-size: 12px;">季度考评</span>
  59. <span v-else style="font-size: 12px;">年度考评</span>
  60. </template>
  61. </el-table-column>
  62. <el-table-column label="业务简述" width="330">
  63. <template #default="scope">
  64. <el-tooltip
  65. class="tooltipDes"
  66. effect="customized"
  67. :content="scope.row.des"
  68. placement="top"
  69. >
  70. <span class="tooltipCCDes">{{scope.row.des}}</span>
  71. </el-tooltip>
  72. </template>
  73. </el-table-column> -->
  74. <el-table-column label="操作" width="300">
  75. <template #default="scope">
  76. <div style="display:flex;justify-content: left;">
  77. <div style="display:flex;justify-content: left;">
  78. <p class="indicitem" v-if="scope.row.stage === '数据已生成'" @click="agetdeptresponsibility(scope.row)">启动</p>
  79. <p class="indicitem" v-if="scope.row.stage === '流程未启动' || scope.row.stage === '数据已生成'"
  80. @click="getGenerateUnitMonthFn(scope.row)">数据生成</p>
  81. </div>
  82. <div v-if="scope.row.instId" style="display:flex;justify-content: left;">
  83. <p class="indicitem" v-if="scope.row.stage !== '流程已结束'" @click="calculateScore(scope.row)">计算得分</p>
  84. <p class="indicitem" style="cursor: no-drop;color: #d9d9d9" v-if="isReportshow">生成报表</p>
  85. <p class="indicitem" v-else @click="generateReport(scope.row)">生成报表</p>
  86. <p class="indicitem" @click="handleReport(scope.row)">指标考核打分</p>
  87. </div>
  88. </div>
  89. </template>
  90. </el-table-column>
  91. </el-table>
  92. <el-pagination
  93. @size-change="handleSizeChange"
  94. @current-change="handleCurrentChange"
  95. :current-page="page.currentPage"
  96. :page-size="page.pagesize"
  97. layout="total, prev, pager, next, jumper"
  98. :total="page.total">
  99. </el-pagination>
  100. </div>
  101. <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false">
  102. <div class="periodFrom">
  103. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">
  104. <el-form-item label="考评类别" prop="organizationType">
  105. <el-select v-model="ruleForm.organizationType" placeholder="请选择考评类别" disabled>
  106. <el-option
  107. v-for="item in organizationType"
  108. :key="item.code"
  109. :label="item.label"
  110. :value="item.code">
  111. </el-option>
  112. </el-select>
  113. </el-form-item>
  114. <el-form-item label="考评周期" prop="evaluationCycle">
  115. <el-select v-model="ruleForm.evaluationCycle" placeholder="请选择考评周期" disabled>
  116. <el-option
  117. v-for="item in periodData"
  118. :key="item.keyValue"
  119. :label="item.keyName"
  120. :value="item.keyValue"
  121. :disabled="item.keyValue === 'JDKP' || item.keyValue === 'NDKP'">
  122. </el-option>
  123. </el-select>
  124. </el-form-item>
  125. <!-- <el-form-item label="考评规则" prop="evaluateRule">
  126. <el-select v-model="ruleForm.evaluateRule" placeholder="请选择考评规则">
  127. <el-option
  128. v-for="item in ruleDataAll"
  129. :key="item.id"
  130. :label="item.evaluateRuleName"
  131. :value="item.id">
  132. </el-option>
  133. </el-select>
  134. </el-form-item> -->
  135. <el-form-item label="年份" prop="year">
  136. <el-date-picker
  137. v-model="ruleForm.year"
  138. type="year"
  139. value-format="YYYY"
  140. placeholder="请选择年份"
  141. />
  142. </el-form-item>
  143. <el-form-item label="月份">
  144. <el-input-number v-model="ruleForm.month" :min="1" :max="12" />
  145. </el-form-item>
  146. <el-form-item label="描述" prop="desc">
  147. <el-input v-model="ruleForm.desc" :rows="5" type="textarea" placeholder="请输入描述"></el-input>
  148. </el-form-item>
  149. </el-form>
  150. </div>
  151. <template #footer>
  152. <span class="dialog-footer">
  153. <el-button @click="dialogVisible = false">取 消</el-button>
  154. <el-button type="primary" @click="saveevaluaStart('ruleForm')">确 定</el-button>
  155. </span>
  156. </template>
  157. </el-dialog>
  158. <el-dialog title="流程详情" v-model="statesVisible" :fullscreen="true" :close-on-click-modal="false">
  159. <div class="flowSty">
  160. <iframe id="iframeContain" width="100%" height="500px"
  161. frameborder="0" class="iframe" name="iframeContain" seamless scrolling="no" :src="iframeURL">
  162. </iframe>
  163. <el-table :data="stageArr" style="width: 100%">
  164. <el-table-column type="index" label="序号" align="center" />
  165. <el-table-column label="任务名称" prop="taskName" />
  166. <el-table-column label="任务创建时间" prop="createTime" />
  167. <el-table-column label="任务处理时间" prop="approveTime" />
  168. <el-table-column label="候选人" prop="assignInfo" width="300">
  169. <template #default="scope">
  170. <span>{{changeAssignInfo(scope.row)}}</span>
  171. </template>
  172. </el-table-column>
  173. <el-table-column label="执行人" prop="approverName" />
  174. <el-table-column label="处理状态" prop="status">
  175. <template #default="scope">
  176. <div v-if="scope.row.status === 'start'">启动</div>
  177. <div v-else-if="scope.row.status === 'agree'">同意</div>
  178. <div v-else-if="scope.row.status === 'awaiting_check'">等待,待审批</div>
  179. <div v-else-if="scope.row.status === 'reject'">驳回</div>
  180. </template>
  181. </el-table-column>
  182. <el-table-column label="备注/意见" prop="opinion" />
  183. </el-table>
  184. </div>
  185. </el-dialog>
  186. </div>
  187. <start-from-list ref="startFromDetail"></start-from-list>
  188. <month-quarter-year-report ref="reportDia"></month-quarter-year-report>
  189. </div>
  190. </template>
  191. <script>
  192. import startFromList from './monthQuarterYearFrom.vue'
  193. import monthQuarterYearReport from './monthQuarterYearReport.vue'
  194. import btns from '../elbuttonS.vue'
  195. import seachs from '../seachGroup.vue'
  196. import {apiGetOrgEvaluationList, apiPostOrgEvaSave,apiPostOrgevaluationDelete,apiGetdoAction,apiGetgenerateEvaluateReport,
  197. apiGetgenerateUnitMonthEvaluation, apiGetdatadictionaryList, apiGetcalculatorcron, apiGetworkflowgetOpinion} from '../../api/api'
  198. export default {
  199. components: {
  200. startFromList,
  201. monthQuarterYearReport,
  202. btns,
  203. seachs
  204. },
  205. data() {
  206. return {
  207. loading: false,
  208. dialogVisible: false,
  209. statesVisible: false,
  210. stageArr: [],
  211. title: '',
  212. iframeURL: '',
  213. windframradio: {},
  214. deleteSelect: [],
  215. changeDateSelect: [],
  216. evaluationMonthData:[],
  217. page:{
  218. pagesize: 12,
  219. currentPage: 1,
  220. total: 0
  221. },
  222. ruleForm: {
  223. organizationType: '',
  224. evaluationCycle: '',
  225. evaluateRule: '',
  226. year: '',
  227. month: 0,
  228. desc: ''
  229. },
  230. rules: {
  231. organizationType: [
  232. { required: true, message: '请选择考评类别', trigger: 'change' }
  233. ],
  234. evaluationCycle: [
  235. { required: true, message: '请选择考评周期', trigger: 'blur' }
  236. ],
  237. evaluateRule: [
  238. { required: true, message: '请选择考评规则', trigger: 'change' }
  239. ],
  240. year: [
  241. { required: true, message: '请选择年份', trigger: 'change' }
  242. ],
  243. desc: [
  244. { required: true, message: '请输入描述', trigger: 'blur' }
  245. ]
  246. },
  247. organizationType: [],
  248. periodData: [],
  249. ruleDataAll: [],
  250. rescode: '',
  251. resDes: '',
  252. isReportshow: false,
  253. winPix: window.devicePixelRatio,
  254. innerWidth: window.innerWidth
  255. }
  256. },
  257. created() {
  258. this.organizationType = [
  259. {
  260. label: '单位考评',
  261. code: 'DWKP'
  262. },
  263. {
  264. label: '部门考评',
  265. code: 'BMKP'
  266. }
  267. ]
  268. this.getevaluStartList()
  269. this.getPeriodData()
  270. },
  271. methods:{
  272. // 查询列表页面
  273. getevaluStartList() {
  274. let that = this
  275. let params = {
  276. pageNum: that.page.currentPage,
  277. pageSize: that.page.pagesize,
  278. checkCycle: 'YDKP',
  279. organizationEvaluationCode: that.rescode,
  280. des: that.resDes
  281. }
  282. apiGetOrgEvaluationList(params).then(datas =>{
  283. if (datas && datas.data) {
  284. that.evaluationMonthData = datas.data.records
  285. that.page.total = datas.data.total
  286. }
  287. })
  288. },
  289. //考评周期
  290. getPeriodData() {
  291. let that = this
  292. let params = {
  293. superKey: 'KPZQ0001'
  294. }
  295. apiGetdatadictionaryList(params).then(datas =>{
  296. if (datas && datas.data) {
  297. that.periodData = datas.data
  298. }
  299. })
  300. },
  301. saveevaluaStart(formName) {
  302. let that = this
  303. that.$refs[formName].validate((valid) => {
  304. if (valid) {
  305. that.saveAndEditIndicatorData()
  306. }
  307. });
  308. },
  309. //新增/修改考评启动数据
  310. saveAndEditIndicatorData() {
  311. let that = this
  312. let userMes = JSON.parse(window.sessionStorage.getItem('user'))
  313. let params = {
  314. organizationType: that.ruleForm.organizationType,
  315. checkCycle: that.ruleForm.evaluationCycle,
  316. // organizationEvaluationRuleId: that.ruleForm.evaluateRule,
  317. year: that.ruleForm.year,
  318. month: that.ruleForm.month,
  319. des: that.ruleForm.desc,
  320. createOrgId: userMes.unitId,
  321. createOrgName: userMes.unitName,
  322. createBy: userMes.id,
  323. createName: userMes.name
  324. }
  325. if (that.isSave) {
  326. params.id = this.evalradio.id
  327. }
  328. apiPostOrgEvaSave(params).then(datas =>{
  329. if (!datas.success) {
  330. that.$message({
  331. message: datas.message,
  332. type: 'error'
  333. });
  334. } else {
  335. if (!that.isSave) {
  336. that.$message({
  337. message: '月度单位考评新增成功',
  338. type: 'success'
  339. });
  340. } else {
  341. that.$message({
  342. message: '月度单位考评修改成功',
  343. type: 'success'
  344. });
  345. }
  346. that.dialogVisible = false
  347. that.changeDateSelect = []
  348. that.getevaluStartList()
  349. }
  350. })
  351. },
  352. agetdeptresponsibility(row) {
  353. let that = this
  354. let par = {
  355. defKey: "yddwkplc",
  356. businessKey: row.id,
  357. action: "start",
  358. opinion: "月度单位考评",
  359. iamCode: window.localStorage.getItem('code')
  360. }
  361. apiGetdoAction(par).then(datas =>{
  362. if (datas && datas.data) {
  363. if (datas.data.isOk) {
  364. that.$message({
  365. message: '月度单位考评已启动',
  366. type: 'success'
  367. });
  368. that.getevaluStartList()
  369. } else {
  370. that.$message({
  371. message: datas.data.msg,
  372. type: 'error'
  373. });
  374. }
  375. }
  376. })
  377. },
  378. getGenerateUnitMonthFn(row) {
  379. let that = this
  380. let params = {
  381. evaluationIds: row.id
  382. }
  383. apiGetgenerateUnitMonthEvaluation(params).then(datas =>{
  384. if (datas && datas.data) {
  385. if (!datas.success) {
  386. that.$message({
  387. message: datas.message,
  388. type: 'error'
  389. });
  390. } else {
  391. that.$message({
  392. message: '月度单位考评数据已生成',
  393. type: 'success'
  394. });
  395. }
  396. that.getevaluStartList()
  397. }
  398. })
  399. },
  400. changeAssignInfo(row) {
  401. let showStr = ''
  402. if (row.assignInfo) {
  403. showStr = row.assignInfo.substring(row.assignInfo.indexOf('-')+1, row.assignInfo.length).substring(0, row.assignInfo.substring(row.assignInfo.indexOf('-')+1, row.assignInfo.length).indexOf('-'))
  404. }
  405. return showStr
  406. },
  407. seeStates(row) {
  408. if (!row.instId) {
  409. this.$message({
  410. type: 'error',
  411. message: '无法查看流程'
  412. });
  413. } else {
  414. this.statesVisible = true
  415. let url = ''
  416. if (window.location.hostname === '10.65.78.81') {
  417. url = 'http://10.65.79.85:8080'
  418. } else {
  419. url = 'http://10.65.78.23:8080'
  420. }
  421. this.iframeURL = url+'/agilebpm-ui/bpm/instance/instanceImageDialog.html?instanceId='+row.instId+'&iamCode='+window.localStorage.getItem('code')
  422. this.getstageData(row.instId)
  423. }
  424. },
  425. // 根据流程id获取业务id
  426. getstageData(id) {
  427. let that = this
  428. let params = {
  429. instId: id,
  430. iamCode: window.localStorage.getItem('code')
  431. }
  432. apiGetworkflowgetOpinion(params).then(datas =>{
  433. if (datas && datas.data) {
  434. that.stageArr = datas.data.data
  435. }
  436. })
  437. },
  438. //明细
  439. getDetail(row) {
  440. this.$refs.startFromDetail.init(row, '月度')
  441. },
  442. //计算得分
  443. calculateScore(row) {
  444. let that = this
  445. that.loading = true
  446. let params = {
  447. id: row.id
  448. }
  449. apiGetcalculatorcron(params).then(datas =>{
  450. if (datas) {
  451. if (datas.success) {
  452. that.$message({
  453. message: datas.message,
  454. type: 'success'
  455. });
  456. that.loading = false
  457. } else {
  458. that.$message({
  459. message: datas.message,
  460. type: 'error'
  461. });
  462. }
  463. }
  464. }).catch(e =>{
  465. that.loading = false
  466. that.$message({
  467. message: '计算得分失败,请联系管理员',
  468. type: 'error'
  469. });
  470. })
  471. },
  472. //生成报表
  473. generateReport(row) {
  474. let that = this
  475. that.isReportshow = true
  476. that.loading = true
  477. let params = {
  478. organizationEvaluationId: row.id
  479. }
  480. apiGetgenerateEvaluateReport(params).then(datas =>{
  481. if (datas) {
  482. that.isReportshow = false
  483. if (datas.success) {
  484. that.$message({
  485. message: datas.message,
  486. type: 'success'
  487. });
  488. that.loading = false
  489. } else {
  490. that.$message({
  491. message: datas.message,
  492. type: 'error'
  493. });
  494. }
  495. }
  496. }).catch(e =>{
  497. that.loading = false
  498. that.$message({
  499. message: '生成报表失败,请联系管理员',
  500. type: 'error'
  501. });
  502. })
  503. },
  504. getSeachData() {
  505. this.page.currentPage = 1
  506. this.getevaluStartList()
  507. },
  508. resetSeach() {
  509. this.page.currentPage = 1
  510. this.rescode = ''
  511. this.resDes = ''
  512. this.getevaluStartList()
  513. },
  514. handleSizeChange(val){
  515. this.page.pagesize = val
  516. this.getevaluStartList()
  517. },
  518. handleCurrentChange(val){
  519. this.page.currentPage =val
  520. this.getevaluStartList()
  521. },
  522. rowClick(selection, row) {
  523. this.changeDateSelect = selection
  524. },
  525. handleAdd() {
  526. this.dialogVisible = true
  527. this.title = '新建表单填报'
  528. let year = new Date().getFullYear()
  529. let month = new Date().getMonth()
  530. this.$nextTick(() =>{
  531. this.$refs['ruleForm'].resetFields()
  532. this.ruleForm = {
  533. organizationType: 'DWKP',
  534. evaluationCycle: 'YDKP',
  535. // evaluateRule: '',
  536. year: year.toString(),
  537. month: month,
  538. desc: ''
  539. }
  540. })
  541. },
  542. //删除
  543. handleDelete() {
  544. this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
  545. confirmButtonText: '确定',
  546. cancelButtonText: '取消',
  547. type: 'warning'
  548. }).then(() => {
  549. let that = this
  550. let paramsArr = []
  551. that.changeDateSelect.forEach(it =>{
  552. paramsArr.push(it.id)
  553. })
  554. apiPostOrgevaluationDelete(paramsArr.join(',')).then(datas =>{
  555. that.$message({
  556. type: 'success',
  557. message: '删除成功!'
  558. });
  559. that.getevaluStartList()
  560. that.changeDateSelect = []
  561. })
  562. })
  563. },
  564. handleReport(row) {
  565. this.$refs.reportDia.init(row)
  566. },
  567. monthTableSty() {
  568. if (this.winPix === 1.25 || this.innerWidth < 1800) {
  569. return 'month125Table'
  570. } else {
  571. return 'month100Table'
  572. }
  573. }
  574. }
  575. }
  576. </script>
  577. <style lang="less">
  578. .evaluationMonth{
  579. .evaluationMonthBtn{
  580. .collectSeach{
  581. display: flex;
  582. padding: 24px 20px;
  583. border-bottom: 1px solid#D6DBEA;
  584. .exceed{
  585. display: flex;
  586. .exceedSpan{
  587. width: 100px;
  588. height: 12px;
  589. font-size: 14px;
  590. font-family: Microsoft YaHei;
  591. font-weight: 400;
  592. color: #8991B0;
  593. line-height: 12px;
  594. margin-top: 14px;
  595. }
  596. .el-input{
  597. margin-right:10px;
  598. height: 40px;
  599. .el-input__inner{
  600. height:40px;
  601. }
  602. .el-input__suffix{
  603. .el-select__caret{
  604. line-height:30px;
  605. }
  606. }
  607. }
  608. }
  609. .el-select{
  610. margin-right:10px;
  611. .el-input__inner{
  612. height:30px;
  613. }
  614. .el-input__suffix{
  615. .el-select__caret{
  616. line-height:30px;
  617. }
  618. }
  619. }
  620. }
  621. span{
  622. font-size:14px;
  623. }
  624. .PeriodBtn{
  625. display: flex;
  626. justify-content: flex-end;
  627. padding: 20px 0;
  628. }
  629. .el-button{
  630. height: 30px;
  631. // width:100px;
  632. padding: 0 20px ;
  633. // padding-top: 8px;
  634. span{
  635. margin:0;
  636. }
  637. }
  638. .evaluationMonthTableData{
  639. .month125Table{
  640. .el-table__body-wrapper{
  641. height: 53vh !important;
  642. }
  643. }
  644. .month100Table{
  645. .el-table__body-wrapper{
  646. height: 60vh !important;
  647. }
  648. }
  649. .el-table{
  650. .el-input__inner{
  651. height: 30px !important;
  652. }
  653. .el-radio__label{
  654. display: none;
  655. }
  656. .tooltipCC{
  657. width: 300px;
  658. display: inline-block;
  659. overflow: hidden;
  660. text-overflow: ellipsis;
  661. white-space: nowrap;
  662. }
  663. .tooltipCCDes{
  664. width: 200px;
  665. display: inline-block;
  666. overflow: hidden;
  667. text-overflow: ellipsis;
  668. white-space: nowrap;
  669. }
  670. .indicitem{
  671. color: #409EFF;
  672. font-size: 12px;
  673. margin-right: 20px;
  674. cursor:pointer;
  675. &:hover{
  676. text-decoration: underline;
  677. }
  678. }
  679. }
  680. .el-pagination{
  681. margin-top: 20px;
  682. text-align: end;
  683. position: relative;
  684. }
  685. }
  686. .el-overlay{
  687. .el-dialog{
  688. .el-dialog__body{
  689. padding: 30px 60px 30px 20px !important;
  690. .periodFrom{
  691. .el-select, .el-input{
  692. width: 100%;
  693. }
  694. .el-input{
  695. height: 30px;
  696. }
  697. }
  698. }
  699. }
  700. }
  701. }
  702. }
  703. </style>