Skip to content

W
wuye-monitor
Commit 2afbf3cc authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

接入mock数据

parent 40b73871
Hide whitespace changes
Inline Side-by-side
Showing with 710 additions and 380 deletions
src/components/MonitorCard/monitor-card.vue
View file @ 2afbf3cc
......@@ -74,4 +74,5 @@ $size()
opacity 0.3
.card-content
height calc(100% - 2rem)
overflow-y auto
</style>
src/components/MonitorForm/monitor-form.vue
View file @ 2afbf3cc
......@@ -5,7 +5,7 @@
<i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
&nbsp;&nbsp;
<img v-if="col.type == 'img'" @click="handleView(model[key])" :src="require(`@/assets/images/${model[key]}`)" alt="">
<img v-if="col.type == 'img'" @click="handleView(model[key])" :src="model[key]"/>
<div v-else>{{model[key]}}</div>
</i-col>
</Row>
......
src/components/MonitorModal/monitor-modal.vue
View file @ 2afbf3cc
......@@ -64,6 +64,7 @@ export default {
max-height 70vh
padding 0 1rem
overflow-y auto
overflow-x hidden
>img
position absolute
&.close-btn
......
src/components/MonitorTable/monitor-table.vue
View file @ 2afbf3cc
......@@ -10,7 +10,15 @@
<div>
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<img v-if="col.type == 'img'" @click="handleView(row[col.key])" :src="require(`@/assets/images/${row[col.key]}`)" />
<template v-if="col.type == 'img'">
<template v-if="row[col.key] && row[col.key].length > 0">
<img
v-for="(img, i) in row[col.key]"
:key="img + i"
:src="img"
@click="handleView(img)" />
</template>
</template>
<div v-else :style="`text-align: ${col.align || 'left'};color: ${col.color} `">{{row[col.key]}}</div>
</i-col>
</Row>
......@@ -84,6 +92,7 @@ export default {
padding 0 1rem
display flex
align-items center
flex-wrap wrap
img
width 50%
margin 0.5rem 0
......
src/main.js
View file @ 2afbf3cc
......@@ -10,6 +10,7 @@ import {Row, Col} from 'view-design'
import animate from 'animate.css'
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
import moment from 'moment'
import MonitorCard from '@/components/MonitorCard'
import MonitorCount from '@/components/MonitorCount'
......@@ -28,6 +29,7 @@ Vue.config.productionTip = false
// Vue.prototype.$echarts = echarts
Vue.prototype.$ajax = ajax
Vue.prototype.$api = api
Vue.prototype.$com = common
Vue.prototype.$moment = moment
Vue.use(animate)
Vue.use(MonitorCard)
......
src/server/ajax.js
View file @ 2afbf3cc
......@@ -64,6 +64,7 @@ export default {
return request({ method: 'GET', ...args })
},
post(args) {
args.contentType = 'application/x-www-form-urlencoded;charset=UTF-8'
return request({ method: 'POST', ...args })
},
put(args) {
......
src/server/api.js
View file @ 2afbf3cc
let IMG_URL = ''
let FILE_URL = ''
let BASE_URL = ''
switch (process.env.NODE_ENV) {
case 'production':
IMG_URL = 'http://10.221.1.181:8080/dist/static/'
......@@ -8,9 +9,16 @@ case 'production':
default:
IMG_URL = 'http://localhost:8080/static/'
FILE_URL = '/static/'
BASE_URL = 'https://yapi.omniview.pro/mock/54/propertyinspector/api/v1'
};
export default {
BASE_URL: 'http://sunmonster.vicp.cc:41318/pudong/',
// BASE_URL: 'http://sunmonster.vicp.cc:41318/pudong/',
BASE_URL,
IMG_URL,
FILE_URL,
POST_THEME_LIST: '/sharingplatform/themeListForOneDay',
POST_COMMUNITY_LIST: '/sharingplatform/sectListForOneDay',
POST_COMMUNITY_DETAIL: '/sharingplatform/detailForOneDay',
POST_PERSON_LIST: '/sharingplatform/getInspectors',
POST_PERSON_DETAIL: '/sharingplatform/inspectorInfo',
}
src/store/actions.js
View file @ 2afbf3cc
import ajax from '@/server/ajax'
import api from '@/server/api'
import common from '@/util/common'
export default {
GET_THEME_LIST({commit}, data = {}) {
ajax.post({
url: api.POST_THEME_LIST,
params: data,
}).then(res => {
commit('SET_THEME_LIST', common.confirm(res, 'data.content', []))
})
},
GET_COMMUNITY_LIST({commit}, data = {}) {
ajax.post({
url: api.POST_COMMUNITY_LIST,
params: {isPublish: 0, ...data},
}).then(res => {
commit('SET_CHECKED_LIST', common.confirm(res, 'data.content', []))
})
ajax.post({
url: api.POST_COMMUNITY_LIST,
params: {isPublish: 1, ...data},
}).then(res => {
commit('SET_RECTIFY_LIST', common.confirm(res, 'data.content', []))
})
},
GET_PERSON_LIST({commit}, data = {}) {
ajax.post({
url: api.POST_PERSON_LIST,
params: {pageNo: 1, pageSize: 10000, ...data},
}).then(res => {
commit('SET_PERSON_LIST', common.confirm(res, 'data.content', []))
})
},
GET_THEME_DATA({commit}, data) {
// TODO
ajax.get({
url: 'test',
params: data,
}).then(res => {
commit('SET_COMMUNITY', res.data)
commit('SET_PERSON', res.data)
})
}
}
src/store/mutations.js
View file @ 2afbf3cc
......@@ -2,4 +2,20 @@ export default {
SET_LOADING(state, val) {
state.showLoading = val
},
SET_THEME_LIST(state, data) {
state.themeList = data
state.situation[0].count = data.length
},
SET_PERSON_LIST(state, data) {
state.personList = data
state.situation[1].count = data.length
},
SET_CHECKED_LIST(state, data) {
state.checkedCommunityList = data
state.situation[2].count = data.length
},
SET_RECTIFY_LIST(state, data) {
state.rectifyCommunityList = data
state.situation[3].count = data.length
},
}
src/store/state.js
View file @ 2afbf3cc
export default {
showLoading: false,
themeList: [],
checkedCommunityList: [],
rectifyCommunityList: [],
personList: [],
situation: [
{
label: '检查主题数',
icon: 'theme',
count: 3,
},
{
label: '检查人员数',
icon: 'person',
count: 9,
},
{
label: '完成检查小区数',
icon: 'complete',
count: 64,
},
{
label: '开具整改单数',
icon: 'rectify',
count: 12,
},
]
}
src/util/common.js
View file @ 2afbf3cc
/** 公共方法 */
const _defaultConfig = {
name: 'test-point',
mode: 'add',
dataArray: [
{
codX: -1000,
codY: -1000,
codZ: 100,
attrs: {
att1: '测试属性',
attm: '第1类',
},
}
],
popupEnabled: false, // 是否打开弹出框
legendVisible: false, // 图例是否可见
type: 'point',
fieldJsonArray: [
{
name: 'att1',
alias: '属性1',
type: 'string',
},
{
name: 'attm',
alias: '属性m',
type: 'string',
},
],
renderer: {
type: 'unique-value',
field: 'attm',
defaultLabel: '无数据',
uniqueValueInfos: [
{
value: '第1类',
label: '第I类',
symbol: {
type: 'point-3d',
symbolLayers: [
{
type: 'icon',
size: 24,
resource: {
href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
// href: 'http://localhost:8080/static/person-bg.png'
},
},
]
}
},
]
},
labelSymbol: {
symbol: {
type: 'text',
color: 'red',
haloSize: 2,
haloColor: '#fff',
},
labelPlacement: 'center-right',
}
}
export default {
/**
* 在深层数据结构中取值（为了替代类似 res && res.data && res.data.content这种写法）
......@@ -35,205 +97,67 @@ export default {
}
},
/**
* 判断一维数组中是否存在某个值
* @param {String} value 需要校验的字符串
* @param {Array} validList 被查找的一维数组
* @return {Boolean} 是否存在的结果
*/
oneOf(value, validList) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i]) {
return true
}
}
return false
},
/**
* 转换为金钱格式(千分位且保留两位小数)
* @param {Number | String} num [需转换的数字或字符串]
*/
toMoney(num) {
if (!num) {
return 0.00
}
num = this.toFloat(num).toFixed(2)
const arr = num.toString().split('.')
let int = (arr[0] || 0).toString(),
result = ''
while (int.length > 3) {
result = ',' + int.slice(-3) + result
int = int.slice(0, int.length - 3)
}
if (int) {
result = int + result
}
return `${result}.${arr[1]}`
},
/**
* 手机号码校验
* @param {String} num [需校验的手机号码]
*/
checkPhone(num) {
if (!num) return false
const filter = /^1[3-9][0-9]{9}$/
return filter.test(num)
},
/**
* 固定电话号码校验
* @param {String} num [需校验的固话]
*/
checkTel(num) {
if (!num) return false
const filter = /^(?:0[1-9][0-9]{1,2}-)?[2-8][0-9]{6,7}$/
return filter.test(num)
},
/**
* 身份证号码校验
* @param {String} num [需校验的身份证号码]
*/
checkID(num) {
if (!num) return false
const filter = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
return filter.test(num)
},
/**
* 数字校验(整数或者小数)
* @param {String} num [需校验的数字]
*/
checkNumber(num) {
if (!num && num != 0) return false
const filter = /^[0-9]+\.{0,1}[0-9]{0,2}$/
return filter.test(num)
},
/**
* 邮编校验(整数或者小数)
* @param {String} num [需校验的数字]
*/
checkZipCode(num) {
if (!num && num != 0) return false
const filter = /^[0-9]{6}$/
return filter.test(num)
},
/**
* 文本校验(只能为中文、英文、数字组合，不允许其他特殊符号)
* @param {String} txt [需校验的文本]
*/
checkContent(txt) {
const filter = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
return filter.test(txt)
},
/**
* 密码校验(6位以上数字字母的组合)
* @param {String} txt [需校验的文本]
*/
checkPassword(num) {
if (!num && num != 0) return false
const filter = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
return filter.test(num)
},
/**
* 获取URL执行参数值
* @param {String} variable 地址参数名
* @return false 未找到；
*/
getQueryVariable(variable) {
var query = window.location.search.substring(1)
var vars = query.split('&')
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=')
if (pair[0] == variable) {
return pair[1]
}
}
},
/**
* 获取当前年
*
*/
getCurrentYear() {
var date = new Date
return date.getFullYear()
},
/**
* 接收带时分秒的时间格式，返回去掉时分秒的时间格式
* @param {String} val
*/
strTime(val) {
if (val === undefined || val == null) return
val = val.toString()
if (val == null || val == '') {
return ''
} else {
return val.slice(0, val.indexOf(' '))
}
},
/**
* 判断传入参数的类型，以字符串的形式返回
* @obj：数据
**/
dataType(obj) {
if (obj === null) return 'Null'
if (obj === undefined) return 'Undefined'
return Object.prototype.toString.call(obj).slice(8, -1)
},
/**
* 处理对象参数值，排除对象参数值为”“、null、undefined，并返回一个新对象
**/
dealObjectValue(obj) {
var param = {}
if (obj === null || obj === undefined || obj === '') return param
for (var key in obj) {
if (this.dataType(obj[key]) === 'Object') {
param[key] = dealObjectValue(obj[key])
} else if (obj[key] !== null && obj[key] !== undefined && obj[key] !== '') {
param[key] = obj[key]
}
}
return param
},
/**
* 判断是否是ie并返回版本号
* ------ 从数据中整理出地图撒点所需的参数 -------
* @param {Array} data [必填 - 获取的数据]
* @param {String} key [必填 - 根据哪个关键字区别撒点（一般是id）]
*/
IEVersion() {
const userAgent = navigator.userAgent //取得浏览器的userAgent字符串
const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
const isEdge = userAgent.indexOf('Edge') > -1 && !isIE //判断是否IE的Edge浏览器
const isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
if(isIE) {
const reIE = new RegExp('MSIE (\\d+\\.\\d+);')
reIE.test(userAgent)
const fIEVersion = parseFloat(RegExp['$1'])
if(fIEVersion == 7) {
return 7
} else if(fIEVersion == 8) {
return 8
} else if(fIEVersion == 9) {
return 9
} else if(fIEVersion == 10) {
return 10
} else {
return 6//IE版本<=7
getMapParams(data = [], key) {
const dataArray = []
const uniqueValueInfos = []
const fieldJsonArray = []
for (let e in data[0]) {
fieldJsonArray.push({
name: e,
alias: e,
type: 'string',
})
}
data.forEach(item => {
dataArray.push({
codX: item.X,
codY: item.Y,
codZ: 100,
attrs: {
...item,
},
})
uniqueValueInfos.push({
value: item[key],
label: '?', // TODO
symbol: {
type: 'point-3d',
symbolLayers: [
{
type: 'icon',
size: 24,
resource: {
href: 'http://localhost:8080/static/person-bg.png'
},
},
]
}
})
})
return {
dataArray,
popupEnabled: false, // 是否打开弹出框
legendVisible: false, // 图例是否可见
type: 'point',
fieldJsonArray,
renderer: {
type: 'unique-value',
field: key,
uniqueValueInfos,
},
labelSymbol: {
symbol: {
type: 'text',
color: 'red',
haloSize: 2,
haloColor: '#fff',
},
labelPlacement: 'center-right',
}
} else if(isEdge) {
return 'edge'//edge
} else if(isIE11) {
return 11 //IE11
}else{
return -1//不是ie浏览器
}
},
/**
* 输入数字转换成大写字母，比如 输入 0 输出 'A'
* @param {Number} num 输入的数字
*/
numToLetter(num) {
if (!num && num != 0) return null
return (Number(num) + 10).toString(36).toUpperCase()
}
}
src/views/components/community-list.vue
View file @ 2afbf3cc
......@@ -3,11 +3,11 @@
<div
v-for="(item, index) in list"
:key="index"
:class="`${getClass(index + 1)} ${curCommunity == item ? 'on' : ''}`"
:class="`${getClass(index + 1)} ${curCommunity == item.COMMUNITYID ? 'on' : ''}`"
@click="handleClick(item)"
>
<div class="dot" />
{{item}}
<p :title="item.COMMUNITYNAME">{{item.COMMUNITYNAME | check}}</p>
</div>
</div>
</template>
......@@ -17,23 +17,17 @@ export default {
name: 'CommunityList',
data() {
return {
list: [
'金港花园一期',
'顺驰蓝调国际',
'枫蓝国际中心',
'旺座中心',
'美林·香槟小镇',
'定福家园',
'万豪君天下',
'永泰园-新风景',
'光彩国际公寓',
'城市复兴·华城',
'万泉新新家园',
'金地·格林小镇',
],
curCommunity: null,
}
},
props: {
list: {
type: Array,
default() {
return []
}
}
},
methods: {
getClass(i) {
const row = Math.ceil(i / 2)
......@@ -43,13 +37,22 @@ export default {
return 'row-odd'
}
},
handleClick(name) {
this.curCommunity = name
this.$emit('select', name)
handleClick(data) {
this.curCommunity = data.COMMUNITYID
this.$emit('select', data)
},
reset() {
this.curCommunity = null
}
},
filters: {
check(val) {
if (val && val.length > 7) {
return ([].slice.call(val, 0, 7)).join('') + '...'
} else {
return val
}
},
}
}
</script>
......@@ -63,9 +66,11 @@ export default {
>div
display flex
align-items center
justify-content flex-start
width 47%
color #fff
padding 0 0.5rem
height 3rem
margin 0 0.3rem
cursor pointer
&.row-even
......@@ -76,7 +81,7 @@ export default {
width 0.2rem
height 1rem
background gold
margin-right 1rem
margin-right 0.5rem
&.on
$selected()
</style>
src/views/components/day-check-comparison.vue
View file @ 2afbf3cc
......@@ -4,10 +4,10 @@
<span class="line line2"/>
<span class="label label1">
<span class="dot"/>
开具整改单数：12
开具整改单数：{{count.rectify}}
</span>
<span class="label label2">
完成检查小区数：64
完成检查小区数：{{count.checked}}
<span class="dot"/>
</span>
<div>
......@@ -19,6 +19,15 @@
<script>
export default {
name: 'DayCheckComparison',
computed: {
count() {
const sum = this.$store.state.situation
return {
rectify: sum[3].count,
checked: sum[2].count,
}
}
},
methods: {
getClass(i) {
if (i < 10) {
......
src/views/components/day-check-situation.vue
View file @ 2afbf3cc
......@@ -13,30 +13,9 @@
<script>
export default {
name: 'DayCheckSituation',
data() {
return {
list: [
{
label: '检查主题数',
icon: 'theme',
count: 3,
},
{
label: '检查人员数',
icon: 'person',
count: 9,
},
{
label: '完成检查小区数',
icon: 'complete',
count: 64,
},
{
label: '开具整改单数',
icon: 'rectify',
count: 12,
},
]
computed: {
list() {
return this.$store.state.situation
}
}
}
......
src/views/components/map-operate-bottom.vue 0 → 100644
View file @ 2afbf3cc
<template>
<div class="map-operate">
<img class="bottom" src="@/assets/images/bottom.png" draggable="false"/>
<div class="btn-list">
<img
v-for="btn in btns"
:key="btn"
:src="require(`@/assets/images/${btn}.png`)"
:class="`${btn == curBtn ? 'on' : ''}`"
@click="handleClick(btn)"
draggable="false"
/>
</div>
<transition name="custom-classes-transition" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
<SearchBar v-if="curBtn == 'search'" class="search-bar"/>
</transition>
</div>
</template>
<script>
import SearchBar from './search-bar'
export default {
name: 'MapOperateBottom',
components: {
SearchBar,
},
data() {
return {
btns: [
'plus',
'minus',
'full',
'refresh',
'search',
],
curBtn: null,
}
},
methods: {
handleClick(btn) {
if (btn == 'search') {
this.curBtn = btn == this.curBtn ? null : btn
}
// TODO
},
}
}
</script>
<style lang="stylus" scoped>
.map-operate
position relative
>img
position absolute
width 18%
&.bottom
bottom 0
left 0
right 0
width 100%
.btn-list
display flex
justify-content space-around
position absolute
bottom 1rem
width 30%
left 0
right 0
margin 0 auto
>img
width 3rem
cursor pointer
transition all 0.3s
&:hover
transform scale(1.3)
&.on
transform scale(1.3)
transform translate(0, -0.5rem)
.search-bar
position absolute
bottom 80%
width 50%
left 0
right 0
margin 0 auto
</style>
src/views/components/map-operate-top.vue 0 → 100644
View file @ 2afbf3cc
<template>
<div class="map-operate">
<img class="top-left" src="@/assets/images/top-left.png" draggable="false"/>
<img class="top-right" src="@/assets/images/top-right.png" draggable="false"/>
<div class="map-menu">
<img class="menu-btn" src="@/assets/images/list-btn.png" draggable="false"/>
<div class="menu">
<div
v-for="item in mapTypes"
:key="item"
:class="`${item == curMapType ? 'on' : ''}`"
@click="choiceMapType(item)"
>
{{item}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MapOperateTop',
data() {
return {
mapTypes: ['暗色地图', '政务地图', '航空影像', '2.5维地图', '简易地形图'],
curMapType: '暗色地图',
}
},
methods: {
choiceMapType(type) {
this.curMapType = type
},
}
}
</script>
<style lang="stylus" scoped>
.map-operate
position relative
height 0
.map-menu
position absolute
top 1rem
right 1rem
&:hover
>.menu
display block
.menu-btn
width 2rem
cursor pointer
position absolute
right 0
padding-bottom 1rem
.menu
position absolute
top 2rem
right 0
width 10rem
padding 0.5rem
border 0.1rem solid $color-map(0.5)
margin-top 0.5rem
background $color-map(0.2)
display none
>div
cursor pointer
color #fff
text-align center
line-height 2rem
&:hover
background $color-map()
&.on
background $color-map()
color $edgeColor
>img
position absolute
width 18%
&.top-left
top 0
left 0
&.top-right
top 0
right 0
</style>
src/views/components/person-list.vue
View file @ 2afbf3cc
......@@ -3,11 +3,11 @@
<div
v-for="(item, index) in list"
:key="index"
:class="`${item == curName ? 'on' : ''}`"
:class="`${item.OPER_ID == curId ? 'on' : ''}`"
@click="handleClick(item)"
>
<img src="@/assets/images/location.png"/>
<span>{{item}}</span>
<span>{{item.TE_NAME}}</span>
</div>
</div>
</template>
......@@ -17,27 +17,21 @@ export default {
name: 'PersonList',
data() {
return {
curName: null,
list: [
'张三',
'李四',
'王五',
'赵柳',
'陈琦',
'周八',
'郑九',
'石十',
'赵二',
]
curId: null,
}
},
computed: {
list() {
return this.$store.state.personList
}
},
methods: {
handleClick(name) {
this.curName = name
this.$emit('select', name)
handleClick(data) {
this.curId = data.OPER_ID
this.$emit('select', data)
},
reset() {
this.curName = null
this.curId = null
}
},
}
......@@ -53,6 +47,7 @@ export default {
display flex
align-items center
width 33.3%
height 3rem
padding 0.5rem 1rem
cursor pointer
&.on
......
src/views/components/theme-list.vue
View file @ 2afbf3cc
<template>
<div class="theme-list">
<div v-for="(item, index) in list" :key="index">
<div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.flag}}</div>
<div
v-for="(item, index) in list"
:key="index"
:class="`${item.TASK_ID == curId ? 'on' : ''}`"
@click="handleClick(item.TASK_ID)"
>
<div class="flag" :style="`background-image:url(${require('@/assets/images/flag-bg.png')})`">{{item.DEPTTYPE.charAt(0)}}</div>
<div class="content">
<p class="title" :title="item.title">{{item.title | check}}<span>{{item.tag}}</span></p>
<p class="date">{{item.date}}</p>
<p class="title" :title="item.TASK_NAME">{{item.TASK_NAME | check}}<span>{{item.THEMETYPE}}</span></p>
<p class="date">{{dateFormat(item.START_DATE)}} ~ {{dateFormat(item.END_DATE)}}</p>
</div>
</div>
</div>
......@@ -15,32 +20,26 @@ export default {
name: 'ThemeList',
data() {
return {
list: [
{
flag: '市',
title: '检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '日常',
},
{
flag: '区',
title: '检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '专项',
},
{
flag: '房',
title: '检查主题名称检查主题名称检查题名称检查题名称检查',
date: '2020-01-07 ~ 2020-01-30',
tag: '重点',
},
{
flag: '区',
title: '检查主题名称检查主题名称',
date: '2020-01-07 ~ 2020-01-30',
tag: '日常',
},
]
curId: null,
}
},
computed: {
list() {
return this.$store.state.themeList
},
},
methods: {
handleClick(id) {
if (this.curId == id) {
this.curId = null
} else {
this.curId = id
}
this.$emit('select', this.curId)
},
dateFormat(date) {
if (!date) return ''
return this.$moment(date).format('YYYY-MM-DD')
}
},
filters: {
......@@ -50,7 +49,7 @@ export default {
} else {
return val
}
}
},
}
}
</script>
......@@ -62,7 +61,10 @@ export default {
>div
display flex
align-items center
margin 1rem 0
padding 0.5rem 0
cursor pointer
&.on
$selected()
.flag
display flex
align-items center
......
src/views/components/title.vue
View file @ 2afbf3cc
......@@ -2,8 +2,8 @@
<div id="title" ref="title">
<span class="moment date">{{$moment().format('LL')}}</span>
<span class="moment time">{{time}}</span>
<img :src="bgImg"/>
<img class="arrow" :src="arrowImg"/>
<img :src="bgImg" draggable="false"/>
<img class="arrow" :src="arrowImg" draggable="false"/>
<p><slot /></p>
</div>
</template>
......
src/views/main.vue
View file @ 2afbf3cc
<template>
<div class="container">
<div id="map">
<!-- <BaiduMap/> -->
</div>
<!-- <div id="map">
<BaiduMap/>
</div> -->
<iframe id="map" frameborder="no" scrolling="no" allowtransparency="true"/>
<ThemeTitle class="title">
物业督查实时专题图
</ThemeTitle>
<MapOperate class="map"/>
<MapOperateTop class="map-top"/>
<MapOperateBottom class="map-bottom"/>
<div class="box1">
<m-card title="当日检查情况">
<DayCheckSituation />
......@@ -19,12 +21,12 @@
</div>
<div class="box3">
<m-card title="检查主题列表">
<ThemeList />
<ThemeList @select="handleThemeSelect"/>
</m-card>
</div>
<div class="box4">
<m-card title="完成检查小区列表" mode="2">
<CommunityList @select="handleCommunitySelect" ref="community"/>
<CommunityList :list="checkedList" @select="handleCommunitySelect" ref="community"/>
</m-card>
</div>
<div class="box5">
......@@ -34,7 +36,7 @@
</div>
<div class="box6">
<m-card title="开具整改单列表" mode="2">
<CommunityList @select="handleCommunitySelect" ref="community2"/>
<CommunityList :list="rectifyList" @select="handleCommunitySelect" ref="community2"/>
</m-card>
</div>
<m-modal v-model="showPersonModal" @close="closePersonModal">
......@@ -50,7 +52,6 @@
</template>
<script>
const {ShsmiGis} = window
// import BaiduMap from './components/baidu'
import ThemeTitle from './components/title'
import DayCheckSituation from './components/day-check-situation'
......@@ -58,7 +59,8 @@ import ThemeList from './components/theme-list'
import PersonList from './components/person-list'
import CommunityList from './components/community-list'
import DayCheckComparison from './components/day-check-comparison'
import MapOperate from './components/map-operate'
import MapOperateTop from './components/map-operate-top'
import MapOperateBottom from './components/map-operate-bottom'
export default {
name: 'Main',
components: {
......@@ -69,7 +71,8 @@ export default {
PersonList,
CommunityList,
DayCheckComparison,
MapOperate,
MapOperateTop,
MapOperateBottom,
},
data() {
return {
......@@ -77,195 +80,328 @@ export default {
showPersonModal: false,
personLayout: [
{
name: {
TE_NAME: {
label: '检查人员姓名',
width: 12,
},
company: {
ORG_NAME: {
label: '所在单位',
width: 12
}
},
{
phone: {
MOBILE: {
label: '手机号码',
width: 12,
},
},
{
theme: {
TASK_NAME: {
label: '检查主题名称',
width: 12,
},
public: {
NAME: {
label: '发布单位',
width: 12,
},
},
{
check: {
CHECKCOMMUNITYNUMBER: {
label: '已检查小区数',
width: 12,
},
rectify: {
RECTIFICATIONNUMBER: {
label: '已发布整改单数',
width: 12,
},
},
],
personData: {
name: '张三',
company: '市物业中心',
phone: '1234567890',
theme: '主题名称',
public: '上海市房办',
check: 7,
rectify: 3,
},
personData: {},
showCommunityModal: false,
communityLayout: [
{
name: {
COMMUNITYNAME: {
label: '小区名称',
width: 12,
},
address: {
COMMUNITYADDRESS: {
label: '小区地址',
width: 12,
},
},
{
province: {
HP_NAME: {
label: '行政区',
width: 12,
},
house: {
HO_NAME: {
label: '房办',
width: 12,
},
},
{
company: {
PROPERTYNAME: {
label: '物业企业',
width: 12,
},
manager: {
COMMUNITYMANAGER: {
label: '小区经理',
width: 12,
},
},
{
phone: {
MANAGERTEL: {
label: '小区经理手机',
width: 12,
},
},
{
theme: {
THEME: {
label: '主题名称',
width: 12,
},
public: {
DEPTTYPE: {
label: '发布单位',
width: 12,
},
},
{
checker: {
TENAME: {
label: '检查人员姓名',
width: 12,
},
partner: {
TE_NAME: {
label: '同行人员姓名',
width: 12,
},
},
{
date: {
INSPECTION_DATE: {
label: '完成检查时间',
width: 12,
},
isRectify: {
IS_PUBLISH: {
label: '是否开具整改单',
width: 12,
},
},
{
sign: {
SIGNATUREIMAGE: {
label: '小区经理签名',
width: 12,
type: 'img',
},
},
],
communityData: {
name: '金港花园',
address: '上海市松江区横港路155弄',
province: '松江区',
house: '泗泾房办',
company: '上海市XXX物业公司',
manager: '张三',
phone: '12345667890',
theme: '主题名称',
public: '上海市房办',
checker: '李四',
partner: '王五',
date: '2020-01-10 15:50:00',
isRectify: '是',
sign: 'test.png',
},
communityData: {},
communityTableLayout: [
{
title: '指标名称',
key: 'name',
key: 'INDEXNAME',
width: 8,
},
{
title: '检查情况',
key: 'situation',
key: 'REMARK',
width: 8,
color: 'red',
},
{
title: '附件',
key: 'file',
key: 'imageList',
width: 8,
type: 'img',
},
],
communityTableData: [
{name: '指标1', situation: '指标有问题', file: 'test.png'},
{name: '指标2', situation: '指标有问题', file: 'test.png'},
{name: '指标3', situation: '指标有问题', file: 'test.png'},
]
communityTableData: [],
}
},
mounted() {
this.$nextTick(this.initMap)
// this.$nextTick(this.initMap)
this.initData()
},
computed: {
checkedList() {
return this.$store.state.checkedCommunityList
},
rectifyList() {
return this.$store.state.rectifyCommunityList
}
},
methods: {
initData(themeId = null) {
const communityParams = {someday: this.$moment().format('YYYYMMDD')}
const personParams = {}
if (themeId) {
communityParams.taskId = themeId
personParams.taskId = themeId
}
if (!themeId) {
this.$store.dispatch('GET_THEME_LIST', {flag: 0, someday: this.$moment().format('YYYYMMDD')})
}
this.$store.dispatch('GET_COMMUNITY_LIST', communityParams)
this.$store.dispatch('GET_PERSON_LIST', personParams)
},
initMap() {
const {ShsmiGis} = window
this.map = new ShsmiGis.Bridge({
id: 'map',
url: 'http://168.168.112.76:8181/smimap/index.html',
onReady: function () {
onReady: () => {
console.log('地图创建完成')
this.addPoint()
this.addListener()
}
})
},
addListener() {
this.map.addEventListener(arg => {
switch (arg.action.toLowerCase()) {
case 'finished':
console.log(arg)
break
default:
// console.log(arg)
break
}
}, this)
},
addPoint() {
const params = {
name: 'test-point',
mode: 'add',
dataArray: [
{
codX: -1000,
codY: -1000,
codZ: 100,
attrs: {
att1: '测试属性',
attm: '第1类',
},
}
],
popupEnabled: false, // 是否打开弹出框
legendVisible: false, // 图例是否可见
type: 'point',
fieldJsonArray: [
{
name: 'att1',
alias: '属性1',
type: 'string',
},
{
name: 'attm',
alias: '属性m',
type: 'string',
},
],
renderer: {
type: 'unique-value',
field: 'attm',
defaultLabel: '无数据',
// defaultSymbol: {
// type: 'point-3d',
// symbolLayers: [{
// type: 'icon',
// size: 24,
// resource: {
// href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/10.png'
// }
// }]
// },
uniqueValueInfos: [
{
value: '第1类',
label: '第I类',
symbol: {
// type: 'point-3d',
type: 'text',
symbolLayers: [
// {
// type: 'icon',
// size: 24,
// resource: {
// href: 'http://168.168.112.76:8181/propertybusinessmanage/tjcmv/images/marker/1.png'
// // href: 'http://localhost:8080/static/person-bg.png'
// },
// },
{
type: 'text',
value: '123',
label: 'sdjfoi',
color: 'red',
haloSize: 2,
haloColor: '#fff',
}
]
}
},
// {
// value: '第1类',
// label: '第I类',
// symbol: {
// type: 'text',
// color: 'red',
// haloSize: 2,
// haloColor: '#fff',
// },
// }
]
},
labelSymbol: {
symbol: {
type: 'text',
color: 'red',
haloSize: 2,
haloColor: '#fff',
},
labelPlacement: 'center-right',
}
}
this.map.Invoke({
ActionName: 'displayJsonData',
Parameters: JSON.stringify(params),
})
},
handlePersonSelect(name) {
this.showPersonModal = true
handlePersonSelect({OPER_ID, TASK_ID}) {
this.$ajax.post({
url: this.$api.POST_PERSON_DETAIL,
params: {
taskId: TASK_ID,
operId: OPER_ID,
}
}).then(res => {
this.personData = (this.$com.confirm(res, 'data.content', []))[0]
this.showPersonModal = true
})
},
closePersonModal() {
this.$refs.person.reset()
},
handleCommunitySelect(name) {
this.showCommunityModal = true
handleCommunitySelect({COMMUNITYID, CHECKID}) {
this.$ajax.post({
url: this.$api.POST_COMMUNITY_DETAIL,
params: {
checkId: CHECKID,
communityId: COMMUNITYID,
}
}).then(res => {
const followList = this.$com.confirm(res, 'data.content.fellowList', [])
this.communityData = (this.$com.confirm(res, 'data.content.content', []))[0]
const follower = followList.find(item => item.THEMEID == this.communityData.TASK_ID)
this.communityData.TE_NAME = (follower && follower.TE_NAME) || '无'
this.communityData.IS_PUBLISH = this.communityData.IS_PUBLISH == '1' ? '是' : '否'
this.communityTableData = this.$com.confirm(res, 'data.content.indexList', [])
this.showCommunityModal = true
})
},
closeCommunityModal() {
this.$refs.community.reset()
this.$refs.community2.reset()
},
handleThemeSelect(id) {
this.initData(id)
},
}
}
</script>
......@@ -275,13 +411,13 @@ export default {
$layout()
grid-template-areas \
'title title title'\
'box1 map box2'\
'box1 map box4'\
'box3 map box4'\
'box3 map box4'\
'box3 map box6'\
'box5 map box6'\
'box5 map box6'
'box1 map-top box2'\
'box1 . box4'\
'box3 . box4'\
'box3 . box4'\
'box3 . box6'\
'box5 . box6'\
'box5 map-bottom box6'
grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-columns 1fr 2.2fr 1fr
#map
......@@ -295,11 +431,15 @@ export default {
bottom 0
.title
grid-area title
.map
grid-area map
.map-top
grid-area map-top
.map-bottom
grid-area map-bottom
.box1
grid-area box1
.box2
height 20vh
overflow hidden
grid-area box2
.box3
grid-area box3
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment