| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2022-08-18 15:58:10 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-03-06 09:52:30 |
| | | * @LastEditTime: 2023-03-06 14:42:43 |
| | | * @FilePath: \srs-police-affairs\src\App.vue |
| | | * @Description: app.vue |
| | | * |
| | |
| | | |
| | | created () { |
| | | if (window.screen.availWidth) { |
| | | this.currentWidth = window.innerWidth |
| | | this.currentHeight = window.innerHeight |
| | | this.currentWidth = window.screen.width |
| | | this.currentHeight = window.screen.height |
| | | } |
| | | |
| | | window.addEventListener('resize', this.setDomStyle) |
| | | }, |
| | | |
| | | methods: { |
| | | getWidth () { |
| | | return this.currentWidth |
| | | }, |
| | | |
| | | setDomStyle () { |
| | | this.currentWidth = window.innerWidth |
| | | this.currentHeight = window.innerHeight |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .add-polygon-box { |
| | | .el-dialog { |
| | | width: countSizeVw(340, 1920); |
| | | height: countSizeVh(220); |
| | | width: countSizeVw(300, 1920); |
| | | height: countSizeVh(166); |
| | | |
| | | .el-dialog__body { |
| | | .el-button { |
| | |
| | | } |
| | | |
| | | .value-name-box { |
| | | width: countSizeVh(110); |
| | | } |
| | | |
| | | .alpha { |
| | | width: calc(100% - countSizeVw(130, 1920)); |
| | | width: countSizeVh(90); |
| | | } |
| | | |
| | | input { |
| | | height: countSizeVh(30); |
| | | font-size: countSizeVh(16); |
| | | border: countSizeVh(1) solid rgb(0, 92, 169); |
| | | } |
| | | |
| | | .placeholder { |
| | | height: countSizeVh(26); |
| | | } |
| | | |
| | | } |
| | |
| | | .edit-plot-box { |
| | | .el-dialog { |
| | | width: countSizeVw(300, 1920); |
| | | height: countSizeVh(220); |
| | | height: countSizeVh(180); |
| | | |
| | | .el-dialog__body { |
| | | .el-button { |
| | |
| | | height: countSizeVh(32); |
| | | line-height: countSizeVh(32); |
| | | width: countSizeVw(120, 1920); |
| | | } |
| | | |
| | | .alpha { |
| | | width: calc(100% - countSizeVw(130, 1920)); |
| | | } |
| | | |
| | | input { |
| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2023-01-13 15:52:59 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2023-03-06 10:20:32 |
| | | * @LastEditTime: 2023-02-24 14:35:04 |
| | | * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue |
| | | * @Description: |
| | | * |
| | |
| | | <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型" |
| | | min-width="8%"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注" min-width="12%"></el-table-column> |
| | | </el-table> |
| | | </el-table> |
| | | |
| | | <div class="pages all-pagination-sty" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" |
| | | :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> |
| | | <div class="pages all-pagination-sty" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount" |
| | | :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <svg class="border-svg"> |
| | | <defs> |
| | | <path id="bottom-box-path" |
| | | d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" |
| | |
| | | <mask id="border-box-mask"> |
| | | <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)"> |
| | | <animateMotion dur="8s" |
| | | path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" |
| | | rotate="auto" repeatCount="indefinite" /> |
| | | </circle> |
| | | </mask> |
| | | </defs> |
| | | path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" |
| | | rotate="auto" repeatCount="indefinite" /> |
| | | </circle> |
| | | </mask> |
| | | </defs> |
| | | |
| | | <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <svg class="border-svg"> |
| | | <defs> |
| | | <path |
| | | id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5 |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" |
| | | fill="transparent" |
| | | /> |
| | | <radialGradient |
| | | id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" |
| | | cx="50%" |
| | | cy="50%" |
| | | r="50%" |
| | | > |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" /> |
| | | <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%"> |
| | | <stop offset="0%" stop-color="#fff" stop-opacity="1" /> |
| | | <stop offset="100%" stop-color="#fff" stop-opacity="0" /> |
| | | </radialGradient> |
| | | <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c"> |
| | | <circle |
| | | cx="0" |
| | | cy="0" |
| | | r="150" |
| | | fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)" |
| | | > |
| | | <animateMotion |
| | | dur="8s" |
| | | <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"> |
| | | <animateMotion dur="8s" |
| | | path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5 |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" |
| | | rotate="auto" |
| | | repeatCount="indefinite" |
| | | /> |
| | | c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0 |
| | | c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0 |
| | | c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0 |
| | | c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" |
| | | rotate="auto" repeatCount="indefinite" /> |
| | | </circle> |
| | | </mask> |
| | | </defs> |
| | | |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | <div class="house-box" style="position: relative;"> |
| | | <div class="box"> |
| | |
| | | <div id="houseEcharts" class="echarts-box"></div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <svg class="border-svg"> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | <div class="land-box" style="position: relative;"> |
| | | <div class="box"> |
| | |
| | | <div id="landEcharts" class="echarts-box"></div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <use |
| | | stroke-width="2" |
| | | xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" |
| | | stroke="#4fd2dd" |
| | | > |
| | | <animate |
| | | attributeName="stroke-dasharray" |
| | | from="0, 1442" |
| | | to="1442, 0" |
| | | dur="8s" |
| | | repeatCount="indefinite" |
| | | /> |
| | | <svg class="border-svg"> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <template> |
| | | <div class="container" ref="Container"> |
| | | <div class="case-box" ref="caseBox"> |
| | | <div class="box" ref="caseBoxBox"> |
| | | <div class="box"> |
| | | <div class="title" ref="alertBoxTitle"> |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | <div class="table-box" ref="caseTableBox"> |
| | | <div class="table-box"> |
| | | <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | |
| | | <el-table-column prop="person" label="姓名"></el-table-column> |
| | | <el-table-column prop="contact" label="联系方式"></el-table-column> |
| | | </el-table> |
| | | <div class="pointList" ref="casePointListBox"> |
| | | <div class="pointList"> |
| | | <el-tooltip class="item" effect="dark" :content="item.dept" placement="top" |
| | | v-for="(item, index) in schedulingDeptList" :key="index"> |
| | | <div class="point" @click="getSchedlingList(item)"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <svg class="border-svg"> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | |
| | | <div class="alert-box" ref="alertBox "> |
| | |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <svg class="border-svg"> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | |
| | | <!-- <div class="alert-box" ref="alertBox"> |
| | |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | | </div> |
| | | |
| | | <!-- <svg class="border-svg"> |
| | | <svg class="border-svg"> |
| | | <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" |
| | | mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd"> |
| | | <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" |
| | | repeatCount="indefinite" /> |
| | | </use> |
| | | </svg> --> |
| | | </svg> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | this.$nextTick(() => { |
| | | window.addEventListener("resize", this.echartsResize) |
| | | this.tableHeight = this.$refs.caseTableBox.offsetHeight - this.$refs.casePointListBox.offsetHeight |
| | | this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 86 |
| | | }) |
| | | |
| | | }, |
| | |
| | | }, |
| | | |
| | | echartsResize () { |
| | | this.tableHeight = this.$refs.caseTableBox.offsetHeight - this.$refs.casePointListBox.offsetHeight |
| | | equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize() |
| | | eventchangemychart && eventchangemychart != null && eventchangemychart.resize() |
| | | }, |
| | |
| | | } |
| | | |
| | | .table-box { |
| | | padding: 12px; |
| | | padding-top: 0; |
| | | width: 100%; |
| | | height: calc(100% - 17.6%); |
| | | padding: 0 12px; |
| | | flex: 1; |
| | | |
| | | .pointList { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | align-items: center; |
| | | height: 40px; |
| | | margin-top: 15px; |
| | | |
| | | .point { |
| | | width: 12px; |