forked from srs-police-affairs
| src/views/home/components/bottomContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/leftContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/rightContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.vue | ●●●●● patch | view | raw | blame | history |
src/views/home/components/bottomContainer.vue
@@ -1,55 +1,89 @@ <template> <div class="container"> <div class="header"> <div class="bottom-title">警情动态</div> <div class="timeTab" v-show="historytype"> <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span> <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span> </div> <div class="timeSeclect" v-show="historytype"> <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker> </div> <div class="history-tab"> <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span> <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span> <div class="box"> <div class="header"> <div class="bottom-title">警情动态</div> <div class="timeTab" v-show="historytype"> <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span> <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span> </div> <div class="timeSeclect" v-show="historytype"> <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker> </div> <div class="history-tab"> <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span> <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span> </div> </div> </div> <div class="body" ref="tableBox" @click="handleSelectClick($event)"> <ul class="title-header"> <li> <span class="num">序号</span> <span class="type">警情类别</span> <span class="dealTime">接警时间</span> <span class="state">警情状态</span> <span class="dealPolice">经办民警</span> <span class="callPeople">报警人</span> <span class="comingPhone">报警电话</span> <span class="callPhone">报警人联系人</span> <span class="callContent">报警内容</span> </li> </ul> <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr" class="warp" :class-option="classOption"> <ul class="item"> <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)" :key="index" :data-obj="JSON.stringify(item)" class="row"> <!-- <span class="num" v-text="item.num"></span> --> <span class="num" v-text="index + 1"></span> <span class="type" v-text="item.type"></span> <span class="dealTime" v-text="item.dealTime"></span> <span class="state" v-text="item.state"></span> <span class="dealPolice" v-text="item.dealPolice"></span> <span class="callPeople" v-text="item.callPeople"></span> <span class="comingPhone" v-text="item.comingPhone"></span> <span class="callPhone" v-text="item.callPhone"></span> <span class="callContent" v-text="item.callContent"></span> <div class="body" ref="tableBox" @click="handleSelectClick($event)"> <ul class="title-header"> <li> <span class="num">序号</span> <span class="type">警情类别</span> <span class="dealTime">接警时间</span> <span class="state">警情状态</span> <span class="dealPolice">经办民警</span> <span class="callPeople">报警人</span> <span class="comingPhone">报警电话</span> <span class="callPhone">报警人联系人</span> <span class="callContent">报警内容</span> </li> </ul> </vue-seamless-scroll> <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr" class="warp" :class-option="classOption"> <ul class="item"> <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)" :key="index" :data-obj="JSON.stringify(item)" class="row"> <!-- <span class="num" v-text="item.num"></span> --> <span class="num" v-text="index + 1"></span> <span class="type" v-text="item.type"></span> <span class="dealTime" v-text="item.dealTime"></span> <span class="state" v-text="item.state"></span> <span class="dealPolice" v-text="item.dealPolice"></span> <span class="callPeople" v-text="item.callPeople"></span> <span class="comingPhone" v-text="item.comingPhone"></span> <span class="callPhone" v-text="item.callPhone"></span> <span class="callContent" v-text="item.callContent"></span> </li> </ul> </vue-seamless-scroll> </div> </div> <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,0 c55.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,25 c0,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,10 c-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-20 c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent"> </path> <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop> <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop> </radialGradient> <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,0 c55.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,25 c0,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,10 c-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-20 c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion> </circle> </mask> </defs> <use stroke-width="4" 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"> </animate> </use> </svg> </div> </template> @@ -242,6 +276,15 @@ background-size: 100% 100%; background-repeat: no-repeat; .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .header { position: relative; width: 100%; @@ -399,5 +442,15 @@ } } } .border-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } } </style> src/views/home/components/leftContainer.vue
@@ -1,33 +1,35 @@ <template> <div class="container"> <div class="person-box" style="position: relative;"> <div class="title"> <div class="title-tab"> <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/ <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> <div class="box"> <div class="title"> <div class="title-tab"> <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>/ <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> </div> <div class="title-num"> 共 <span :class="{ choosed: peopletype == 0 }">100</span>/ <span :class="{ choosed: peopletype == 1 }">1</span>人 </div> </div> <div class="title-num"> 共 <span :class="{ choosed: peopletype == 0 }">100</span>/ <span :class="{ choosed: peopletype == 1 }">1</span>人 <div class="sub-tab" v-show="peopletype == 0"> <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> <div class="num">164.57万人</div> <div class="type">户籍人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)"> <div class="num">17.52万人</div> <div class="type">流动人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> <div class="num">91995人</div> <div class="type">境外人口</div> </div> </div> <div id="PersonEcharts" class="echarts-box"></div> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div> </div> <div class="sub-tab" v-show="peopletype == 0"> <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)"> <div class="num">164.57万人</div> <div class="type">户籍人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)"> <div class="num">17.52万人</div> <div class="type">流动人口</div> </div> <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)"> <div class="num">91995人</div> <div class="type">境外人口</div> </div> </div> <div id="PersonEcharts" class="echarts-box"></div> <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div> <svg class="border-svg"> <defs> @@ -56,9 +58,8 @@ </circle> </mask> </defs> <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7"> </use> <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" <use stroke-width="4" 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"> @@ -67,18 +68,20 @@ </svg> </div> <div class="house-box" style="position: relative;"> <div class="title">现有房屋</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> <div class="tab-title-small">实有房屋:</div> <div class="tab-title-small">182万户</div> <div class="box"> <div class="title">现有房屋</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)"> <div class="tab-title-small">实有房屋:</div> <div class="tab-title-small">182万户</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> <div class="tab-title-small">关注场所:</div> <div class="tab-title-small">634个</div> </div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)"> <div class="tab-title-small">关注场所:</div> <div class="tab-title-small">634个</div> </div> <div id="houseEcharts" class="echarts-box"></div> </div> <div id="houseEcharts" class="echarts-box"></div> <svg class="border-svg"> <defs> @@ -107,9 +110,8 @@ </circle> </mask> </defs> <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7"> </use> <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" <use stroke-width="4" 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"> @@ -118,18 +120,20 @@ </svg> </div> <div class="land-box" style="position: relative;"> <div class="title">现有地</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">634个</div> <div class="box"> <div class="title">现有地</div> <div class="sub-tab"> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)"> <div class="tab-title-small">小区:</div> <div class="tab-title-small">634个</div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> <div class="tab-title-small">责任区:</div> <div class="tab-title-small">634个</div> </div> </div> <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)"> <div class="tab-title-small">责任区:</div> <div class="tab-title-small">634个</div> </div> <div id="landEcharts" class="echarts-box"></div> </div> <div id="landEcharts" class="echarts-box"></div> <svg class="border-svg"> <defs> @@ -158,9 +162,8 @@ </circle> </mask> </defs> <use stroke-width="1" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" stroke="#235fa7"> </use> <use stroke-width="3" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c" <use stroke-width="4" 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"> @@ -1046,6 +1049,18 @@ background-size: 100% 100%; background-repeat: no-repeat; .box { display: flex; position: absolute; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .title { padding: 0 18px 0 18px; position: relative; @@ -1152,7 +1167,7 @@ left: 0; width: 100%; height: 100%; z-index: -1; z-index: 1; } .mypath { src/views/home/components/rightContainer.vue
@@ -1,18 +1,20 @@ <template> <div class="container" ref="Container"> <div class="case-box" ref="caseBox"> <div class="title" ref="alertBoxTitle"> <div>值班信息(当日)</div> </div> <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' }" :row-class-name="tableRowClassName"> <el-table-column prop="station" label="岗位"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="contact" label="联系方式"></el-table-column> </el-table> <div class="box"> <div class="title" ref="alertBoxTitle"> <div>值班信息(当日)</div> </div> <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' }" :row-class-name="tableRowClassName"> <el-table-column prop="station" label="岗位"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="contact" label="联系方式"></el-table-column> </el-table> </div> </div> <svg class="border-svg"> @@ -54,15 +56,17 @@ </div> <div class="alert-box" ref="alertBox "> <div class="title"> 案件统计 <div class="timer"> <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker> <div class="box"> <div class="title"> 案件统计 <div class="timer"> <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker> </div> </div> <div id="EventChangeEcharts" class="echarts-box"></div> </div> <div id="EventChangeEcharts" class="echarts-box"></div> <svg class="border-svg"> <defs> @@ -131,14 +135,16 @@ </div>--> <div class="crowd-box" ref="crowdBox"> <div class="title"> <div>现有设备</div> <div class="title-tab"> <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/ <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span> <div class="box"> <div class="title"> <div>现有设备</div> <div class="title-tab"> <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/ <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span> </div> </div> <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> </div> <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> <svg class="border-svg"> <defs> @@ -782,6 +788,17 @@ // margin-left: 8px; // } .box { display: flex; position: absolute; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .title { display: flex; justify-content: space-between; @@ -887,7 +904,7 @@ left: 0; width: 100%; height: 100%; z-index: -1; z-index: 1; } } </style> src/views/home/index.vue
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-08-18 16:18:17 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-01-03 10:02:49 * @LastEditTime: 2023-01-03 11:18:43 * @FilePath: \srs-police-affairs\src\views\home\index.vue * @Description: 小区-栋-层-房屋 *
