新增我要查页面，老的页面修改为我要巡

Administrator

2021-06-22 ee7a99184338ee5d7b4d9712706aeb6af6e15b43

新增我要查页面，老的页面修改为我要巡

 components/pColumn/pColumn.vue

@@ -6,7 +6,14 @@
                    <view class="t-type">{{Pdata.alarmType}} </view>
                    <view class="t-id"> 警单编号：{{Pdata.id}}</view>
                </view>
                <view class="bottom">{{Pdata.place}}</view>
                <view class="image-time">
                    <image src="../../static/images/pColumn/alarm.png"></image>
                    <view class="t-time"> {{Pdata.alarmTime}}</view>
                </view>
                <view class="image-place">
                    <image src="../../static/images/pColumn/position-bule.png"></image>
                    <view class="place">{{Pdata.place}}</view>
                </view>
            </view>
            <view class="right">
                <button type="default" @click="PClick">{{fromW == 0?'详情':fromW == 1?'接受':""}}</button>
@@ -109,6 +116,8 @@
    .inPColumn,
    .left,
    .right,
    .image-time,
    .image-place,
    .top {
        display: flex;
    }
@@ -120,9 +129,10 @@
        padding-top: 0.8rem;

        .inPColumn {
            // background-color: #00BFFF;
            margin: 0.2rem 0 0.4rem 0;
            width: 95%;
            height: 4rem;
            height: 5rem;
            border-bottom: 1px rgb(207, 207, 207) solid;
            align-items: center;
            justify-content: space-between;
@@ -136,6 +146,7 @@
                    .t-type {
                        font-size: 1.1rem;
                        color: #ff0000;
                        letter-spacing: 1px;
                    }
                
                    .t-id {
@@ -147,9 +158,42 @@
                    }
                }

                .bottom {
                    font-size: 0.9rem;
                .image-time{
                    align-items: center;
                    height: 30px;
					
                    image{
                        width: 35rpx;
                        height: 35rpx;
                    }
					
                    .t-time{
                        font-size: 0.8rem;
                        color: #808080;
                        height: 20rpx;
                        line-height: 20rpx;
                        margin-left: 15rpx;
                    }
                }
				
                .image-place{
                    align-items: center;
                    height: 20px;
					
                    image{
                        width: 35rpx;
                        height: 35rpx;
                    }
					
                    .place {
                        font-size: 0.8rem;
                        margin-left: 15rpx;
                        color: #808080;
                        height: 20rpx;
                        line-height: 20rpx;
                    }
                }
				
            }

            .right {

 manifest.json

@@ -83,6 +83,9 @@
                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
                    }
                }
            },
            "splashscreen" : {
                "androidStyle" : "common"
            }
        }
    },

 pages.json

@@ -199,6 +199,13 @@
            "path": "pages/workbench/workbench",
            "name": "workbench",
            "style": {
                "navigationBarTitleText": "我要巡"
            }
        },
        {
            "path": "pages/alarm_list/alarm_list",
            "name": "alarm_list",
            "style": {
                "navigationBarTitleText": "我要查"
            }
        },
@@ -258,7 +265,7 @@
        "selectedColor": "#0faeff",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/workbench/workbench",
                "pagePath": "pages/alarm_list/alarm_list",
                "text": "我要查",
                "iconPath": "static/tabbar/workbench.png",
                "selectedIconPath": "static/tabbar/workbenchH.png"
@@ -279,11 +286,16 @@
                "text": "我要说",
                "iconPath": "static/tabbar/investigation.png",
                "selectedIconPath": "static/tabbar/investigationH.png"
            }, {
            },{
                "pagePath": "pages/workbench/workbench",
                "text": "我要巡",
                "iconPath": "static/img/bar/patrol.png",
                "selectedIconPath": "static/img/bar/patrol-blue.png"
            },{
                "pagePath": "pages/myself/myself",
                "text": "个人中心",
                "iconPath": "static/tabbar/user.png",
                "selectedIconPath": "static/tabbar/userHL.png"
                "text": "我的",
                "iconPath": "static/tabbar/userHL.png",
                "selectedIconPath": "static/workbench/user01.png"
            }

        ]

 pages/alarm_list/alarm_list.vue

New file
@@ -0,0 +1,396 @@
<template>
    <view class="alarm-list">
        <view class="navigation-bar">
            <view class="alarm-bar-total" :style="{color:totalColor,borderBottom:totalBoder}" @click="getAlarmListInfo(1)">全部({{totalNumber}})</view>
            <view class="alarm-bar-load" :style="{color:loadColor,borderBottom:loadBoder}" @click="getAlarmListInfo(2)">未处理({{untreatedNumber}})</view>
            <view class="alarm-bar-load-before" :style="{color:loadBeforeColor,borderBottom:loadBeforeBoder}" @click="getAlarmListInfo(3)">已处理({{finishNumber}})</view>
        </view>
        <view class="alarm-list-content">
            <view class="alarm-info" v-for="item in data" @click="gotoDetail(item)">
                <view class="alarm-id-type-status">
                    <view class="alarm-id-type">({{item.id}}){{item.alarmType}}</view>
                    <view class="alarm-status" :style="{color:untreatedColor}" v-if="item.securityId==null">未处理</view>
                    <view class="alarm-status" :style="{color:processedColor}" v-if="item.securityId!=null && item.jtype==1">处理中</view>
                    <view class="alarm-status" :style="{color:finishColor}" v-if="item.jtype==2">已处理</view>
                </view>
                <view class="alarm-position-time">
                    <view class="image-place">
                        <image src="../../static/images/pColumn/position.png"></image>
                        <view class="place">{{item.place}}</view>
                    </view>
                    <view class="image-time">
                        <image src="../../xcxMapJQ/img/alarm.png"></image>
                        <view class="t-time"> {{item.alarmTime}}</view>
                    </view>
                </view>
            </view>
        </view>
		
        <view class="butPopup" v-show="popuShow">
            <view class="b-main" :style="{bottom: bmainb}">
                <view class="b-m-title">
                    是否接该任务
                </view>
                <button class="b-m-Y" hover-class='b-m-Y-hove' type="default" @click="popupBY">接受</button>
                <button class="b-m-N" hover-class='b-m-N-hove' type="default" @click="popupBN">取消</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                // pathUrl:"http://localhost:89",
                pathUrl:"http://s16s652780.51mypc.cn/api/blade-jfpts",
                totalColor:"#51A2FE",
                loadColor:"#000000",
                loadBeforeColor:"#000000",
                totalBoder:"2px solid #2E7EED",
                loadBoder:"0px solid #2E7EED",
                loadBeforeBoder:"0px solid #2E7EED",
                untreatedColor:"#ED6154",
                processedColor:"#44AC33",
                finishColor:"#808080",
                popuShow: false,
                bmainb:"",
                totalNumber:null,
                untreatedNumber:null,
                finishNumber:null,
                data:[],
                itemData:{}
            }
        },
        onLoad() {
            this.getAlarmListInfo(1);
        },
        methods:{
            //获取警情数据
            getAlarmListInfo(tab){
                //修改菜单颜色样式
                this.updateBarStyle(tab);
                //获取警情数据
                this.getAlarmData(tab);
            },
			
            //修改菜单颜色样式
            updateBarStyle(tab){
                if(tab==1){
                    //字体颜色改变
                    this.totalColor = "#51A2FE";
                    this.loadColor = "#000000";
                    this.loadBeforeColor = "#000000";
                    //下划线样式改变
                    this.totalBoder = "2px solid #2E7EED";
                    this.loadBoder = "0px solid #2E7EED";
                    this.loadBeforeBoder = "0px solid #2E7EED";
                }
				
                if(tab==2){
                    //字体颜色改变
                    this.totalColor = "#000000";
                    this.loadColor = "#51A2FE";
                    this.loadBeforeColor = "#000000";
                    //下划线样式改变
                    this.totalBoder = "0px solid #2E7EED";
                    this.loadBoder = "2px solid #2E7EED";
                    this.loadBeforeBoder = "0px solid #2E7EED";
                }
				
                if(tab==3){
                    //字体颜色改变
                    this.totalColor = "#000000";
                    this.loadColor = "#000000";
                    this.loadBeforeColor = "#51A2FE";
                    //下划线样式改变
                    this.totalBoder = "0px solid #2E7EED";
                    this.loadBoder = "0px solid #2E7EED";
                    this.loadBeforeBoder = "2px solid #2E7EED";
                }
            },
			
            //获取警情数据
            getAlarmData(tab){
                var that = this;
                if(this.$store.state.puserID){
                    //获取全部的数据
                    uni.request({
                        url:this.pathUrl + "/alarm/alarm/APP-getAlarmListPage",
                        method:"GET",
                        data:{
                            securityId:this.$store.state.puserID,
                            status:tab
                        },
                        header: {
                            "content-type": "application/x-www-form-urlencoded"
                        },
                        success(res) {
                            console.log(res,123);
                            if(res.data.code==200){
                                that.data = res.data.data.page;
                                that.totalNumber = res.data.data.number[0];
                                that.untreatedNumber = res.data.data.number[1];
                                that.finishNumber = res.data.data.number[2];
                            }
                        }
                    })
                }
            },
		
            //跳转详情页面或者接受任务
            gotoDetail(item){
                if(item.securityId==null){
                    this.itemData = item;
                    this.popuShow = true;
                }else{
                    //跳转详情页面
                    var datas = item;
                    datas.state = 0;
                    datas.dtype = 0;
                    datas.size = 300;
                    var data = [datas]; //传给地图的参数
                    uni.navigateTo({
                        url: '/pages/map/map?data=' + JSON.stringify(data)
                    })
                }
            },
			
            //触摸遮罩事件
            onClose() { 
                this.setData({
                    popuShow: false
                });
            },
            popupBY() {
                this.receives();
                // console.log('接收成功');
                this.$emit('refreshTask', this.fromW)
                // this.triggerEvent('myevent', this.data.fromW);
                this.popuShow = false;
            },
            popupBN() {
                // console.log('接收取消');
                this.popuShow = false;
            },
            //接收任务
            receives() {
                var url = this.$store.state.piAPI + "blade-jfpts/alarm/alarm/APP-setAlarm",
                    Pid = this.itemData.id,
                    id = this.$store.state.puserID, //警察id
                    name = this.$store.state.puserName, //警察id
                    data = {
                        id: Pid,
                        securityId: id,
                        alarmPeople: name
                    },
                    that = this;
                console.log(data);
                uni.request({
                    url: url,
                    data: data,
                    header: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    method: 'POST',
                    success(res) {
                        // console.log(res.data.msg);
                    }
                })
            }
		
        }
    }
</script>
<style> 
    page{
        width: 100%;
        height: 100%;
        background-color: rgba(243,243,243,1);
    }
</style>
<style lang="scss" scoped>
    .alarm-list,
    .alarm-list-content,
    .alarm-info,
    .alarm-id-type-status,
    .alarm-position-time,
    .alarm-bar-total,
    .alarm-bar-load,
    .alarm-bar-load-before,
    .image-place,
    .image-time,
    .navigation-bar{
        display: flex;
    }
	
    .alarm-list{
        width: 100%;
        margin-bottom: 3.4rem;
        flex-direction: column;
		
        .navigation-bar{
            border-top: 1rpx solid rgba(243,243,243,1);
            background-color: #FFFFFF;
            width: 100%;
            height: 90rpx;
            flex-direction: row;
            letter-spacing: 1px;
            position: fixed;
            z-index: 999;
			
            .alarm-bar-total{
                align-items: center;
                justify-content: center;
                width: 33.33%;
            }
			
            .alarm-bar-load{
                width: 33.33%;
                align-items: center;
                justify-content: center;
            }
			
            .alarm-bar-load-before{
                width: 33.33%;
                align-items: center;
                justify-content: center;
            }
        }
		
        .alarm-list-content{
            width: 100%;
            // flex: 1;
            flex-direction: column;
            margin-top: 90rpx;
			
            .alarm-info{
                background-color: #FFFFFF;
                height: 230rpx;
                width: 96%;
                margin: 0 auto;
                margin-top: 10rpx;
                border-radius: 2px;
                flex-direction: column;
				
                .alarm-id-type-status{
                    width: 90%;
                    height: 45%;
                    margin: 0 auto;
                    align-items: center;
					
                    .alarm-id-type{
                        font-size: 18px;
                        // font-weight: 550;
                        letter-spacing: 1px;
                    }
					
                    .alarm-status{
                        font-size: 14px;
                        flex: 1;
                        text-align: right;
                    }
                }
				
                .alarm-position-time{
                    width: 82%;
                    margin: 0 auto;
                    flex-direction: column;
					
                    .image-place{
                        align-items: center;
                        height: 20px;
						
                        image{
                            width: 35rpx;
                            height: 35rpx;
                        }
						
                        .place {
                            font-size: 0.9rem;
                            margin-left: 15rpx;
                            color: #808080;
                            height: 20rpx;
                            line-height: 20rpx;
                        }
                    }
					
                    .image-time{
                        align-items: center;
                        height: 30px;
						
                        image{
                            width: 35rpx;
                            height: 35rpx;
                        }
						
                        .t-time{
                            font-size: 0.9rem;
                            color: #808080;
                            height: 20rpx;
                            line-height: 20rpx;
                            margin-left: 15rpx;
                        }
                    }
					
                }
			
            }
			
        }
		
        .butPopup {
            z-index: 4;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #000000, $alpha: 0.5);
		
            .b-main {
                position: absolute;
                z-index: 2;
                bottom: 3.1rem;
                width: 100%;
                // border: 1px solid #007AFF;
                border-radius: 1.5rem;
                background-color: #fff;
                // align-self: flex-end;
		
                // height: 20rem;
                .b-m-title {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 2.8rem;
                }
		
                .b-m-Y,
                .b-m-N {
                    color: #fff;
                    border-radius: 0;
                }
		
                .b-m-Y {
                    background-color: #07C160 !important;
                }
		
                .b-m-Y-hove {
                    background-color: #048c44 !important;
                }
		
                .b-m-N {
                    background-color: #FF976A !important;
                }
		
                .b-m-N-hove {
                    background-color: #e1855d !important;
                }
            }
        }
		
    }
	

</style>

 pages/reported/reported.vue

@@ -6,7 +6,7 @@
        </view>
        <view class="time">
            <view class="title">时间</view>
            <e-picker mode="dateTime" :style="{color:stimeColor}" class="select_time"  @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
            <e-picker :showValue="date" fields="month" mode="dateTime" :style="{color:stimeColor}" class="select_time"  @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
        </view>
        <view class="desc">
            <view class="title">备注</view>
@@ -42,6 +42,7 @@
            return {
                datas: '',
                stime:'',
                date:'',
                stimeColor:"#808080",
                result:'',
                place:"",
@@ -55,6 +56,7 @@
            //日期选择
            stimeChange(e) {
                // this.stime = e.substr(0,e.length-3);
                this.showValue = e.substr(0,e.length-3),
                this.stime = e;
                //修改颜色
                this.stimeColor = "#000000";
@@ -130,14 +132,14 @@
                        }
                        var tempFilePath = res.tempFilePaths;
                        // try {
                            wx.showLoading({
                            uni.showLoading({
                                title: "上传中...",
                                mask: true
                            })
                            var that = this;
                            // 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
                            for (var i = 0; i < tempFilePath.length; i++) {
                                wx.uploadFile({
                                uni.uploadFile({
                                    // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', //仅为示例，非真实的接口地址
                                    url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                                    filePath: tempFilePath[i],
@@ -146,7 +148,7 @@
                                        'user': 'test' // 上传附带参数
                                    },
                                    success: (data) => {
                                        wx.showToast({
                                        uni.showToast({
                                            title: '上传图片成功！',
                                            duration: 1000
                                        });
@@ -175,11 +177,11 @@
                    success(res) {
                        var tempFilePath = res.tempFilePath;
                        // try {
                            wx.showLoading({
                            uni.showLoading({
                                title: "上传中...",
                                mask: true
                            })
                            wx.uploadFile({
                            uni.uploadFile({
                                // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', 
                                url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
                                filePath: tempFilePath,
@@ -188,7 +190,7 @@
                                    'user': 'test' // 上传附带参数
                                },
                                success: (data) => {
                                    wx.showToast({
                                    uni.showToast({
                                        title: '上传视频成功！',
                                        duration: 1000
                                    });

 pages/workbench/workbench.vue

@@ -20,7 +20,7 @@
                </navigator>
            </view>
        </view>
        <view class="main">
        <view class="main" style="display: none;">
            <div>
                <div class="m-title" id="mtitle">
                    <div class="m-t" @click="ingss" :style="{ borderBottom: ingsDB}">正在进行</div>
@@ -40,7 +40,6 @@
            </div>
        </view>
        <view class="zhanwei" :style="{height:zhanwei}">

        </view>
    </view>
</template>

 static/images/pColumn/alarm.png

 static/images/pColumn/position-bule.png

 static/images/pColumn/position.png

 static/img/bar/patrol-blue.png

 static/img/bar/patrol.png