大屏功能完善
This commit is contained in:
BianLzhaoMin
parent
baef8909bf
commit
917829ce1b
|
|
@ -13,6 +13,7 @@ var testUrl = '10.40.92.8:8080'
|
|||
// var testUrl = ''
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"',
|
||||
// API_ROOT: '/screen'
|
||||
//API调用地址
|
||||
// API_ROOT: '"http://' + testUrl + '"',
|
||||
// BASE_URL: '/cockpit-screen/'
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ var proxyUrl =
|
|||
// target: 'http://112.29.103.165:21626',//重庆
|
||||
// target: 'http://192.168.0.14:21624',//测试
|
||||
// target: 'http://112.29.103.165:21624/', //宁夏
|
||||
target: 'http://192.168.2.145:28080',
|
||||
target: 'http://192.168.2.152:28080',
|
||||
changeOrigin: true,
|
||||
// secure: true, //如果是https接口，需要配置这个参数
|
||||
pathRewrite: {
|
||||
|
|
|
|||
|
|
@ -9629,7 +9629,7 @@
|
|||
},
|
||||
"moment": {
|
||||
"version": "2.30.1",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/moment/-/moment-2.30.1.tgz",
|
||||
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"js-base64": "^3.6.0",
|
||||
"js-md5": "^0.7.3",
|
||||
"less-loader": "^4.1.0",
|
||||
"moment": "^2.29.1",
|
||||
"moment": "^2.30.1",
|
||||
"scss": "^0.2.4",
|
||||
"svg-sprite-loader": "^6.0.11",
|
||||
"swiper": "^3.4.2",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import axios from 'axios';
|
|||
axios.defaults.timeout = 30000
|
||||
|
||||
// 默认配置
|
||||
axios.defaults.baseURL = process.env.API_ROOT;
|
||||
axios.defaults.baseURL = '';
|
||||
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,11 @@ export const getMaterialReturnByMonthApi = params => POST(`/screen/base/largeScr
|
|||
//当月维修分析
|
||||
export const getMaintenanceByMonthApi = params => POST(`/screen/base/largeScreen/home/getMaintenanceByMonth?maType=${params.maType}`,)
|
||||
//设备分布图
|
||||
export const getEquipmentDisByMapApi = params => POST(`/screen/base/largeScreen/home/getEquipmentDisByMap`,)
|
||||
export const getEquipmentDisByMapApi = params => GET(`/screen/base/largeScreen/home/getEquipmentDisByMap`,)
|
||||
//获取工程的位置信息
|
||||
export const getProjectByMapApi = params => GET(`/screen/base/largeScreen/home/getEquipmentDis`, params)
|
||||
//获取设备的位置信息
|
||||
export const getDeviceByMapApi = params => GET(`/screen/base/largeScreen/home/getIotMaCodeMachine`, params)
|
||||
//施工机具/
|
||||
export const getTotalOwnershipApi = params => POST(`/screen/base/largeScreen/home/getTotalOwnership`,)
|
||||
// 当月使用车辆
|
||||
|
|
@ -25,3 +29,17 @@ export const getMaintenanceWarningApi = params => POST(`/screen/base/largeScreen
|
|||
//各公司机具保有量
|
||||
export const getTotalOwnershipByCompany = params => POST(`/screen/base/largeScreen/home/getTotalOwnershipByCompany`)
|
||||
|
||||
|
||||
/** 获取机具设备的行程信息 */
|
||||
export const getIotDeviceTripApi = params => POST(`/screen/material/iotMachine/searchItinerary`, params)
|
||||
/** 获取机具设备的停留点信息 */
|
||||
export const getIotDeviceParkDetailApi = params => POST(`/screen/material/iotMachine/reportParkDetailByTime`, params)
|
||||
/** 获取工程领料的记录 */
|
||||
export const getProjectOutApi = params => GET(`/screen/base/largeScreen/home/getLeaseRecordListByLotId`, params)
|
||||
/** 获取工程退料的记录 */
|
||||
export const getProjectReturnApi = params => GET(`/screen/base/largeScreen/home/getBackRecordListByLotId`, params)
|
||||
/** 获取工程退料的记录 */
|
||||
export const getProjectDeviceNumApi = params => GET(`/screen/base/largeScreen/home/getUseNumByLotId`, params)
|
||||
/** 获取单位数据 */
|
||||
export const getUnitListApi = params => POST(`/screen/system/select/getUnitCbx`, params)
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="{'hidden':hidden}" class="pagination-container">
|
||||
<div :class="{ hidden: hidden }" class="pagination-container">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
:current-page.sync="currentPage"
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
v-bind="$attrs"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
style="color: #E1E3E6;"
|
||||
:popper-append-to-body="false"
|
||||
style="color: #e1e3e6"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,47 +25,46 @@ export default {
|
|||
props: {
|
||||
total: {
|
||||
required: true,
|
||||
type: Number
|
||||
type: Number,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
default: 1
|
||||
default: 1,
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20
|
||||
default: 20,
|
||||
},
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [10, 20, 30, 50]
|
||||
}
|
||||
},
|
||||
},
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: document.body.clientWidth < 992 ? 5 : 7
|
||||
default: document.body.clientWidth < 992 ? 5 : 7,
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, sizes, prev, pager, next, jumper'
|
||||
default: 'total, sizes, prev, pager, next, jumper',
|
||||
},
|
||||
background: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
autoScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
hidden: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
currentPage: {
|
||||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
},
|
||||
set(val) {
|
||||
this.$emit('update:page', val)
|
||||
}
|
||||
},
|
||||
},
|
||||
pageSize: {
|
||||
get() {
|
||||
|
|
@ -81,8 +81,8 @@ export default {
|
|||
},
|
||||
set(val) {
|
||||
this.$emit('update:limit', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
|
|
@ -99,8 +99,8 @@ export default {
|
|||
if (this.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,12 @@
|
|||
<div class="box1-item_two">
|
||||
<div>
|
||||
<div class="box_header_div">
|
||||
<div class="box_list" v-for="(item, index) of newArr" :key="index" @click="handleClickItem(index)">
|
||||
<div
|
||||
class="box_list"
|
||||
v-for="(item, index) of newArr"
|
||||
:key="index"
|
||||
@click="handleClickItem(index)"
|
||||
>
|
||||
<div class="item-value">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
|
|
@ -34,13 +39,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import GROUP from '../../assets/img/myImage/group.png';
|
||||
import { getTotalOwnershipApi } from "../../api/screen";
|
||||
import GROUP from '../../assets/img/myImage/group.png'
|
||||
import { getTotalOwnershipApi } from '../../api/screen'
|
||||
import inventoryDialog from './inventoryDialog.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
inventoryDialog
|
||||
inventoryDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -65,22 +70,28 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$refs['box1'].scrollHeight); // 110
|
||||
console.log(this.$refs['box1'].scrollHeight) // 110
|
||||
this.$refs['box1'].style.height = 'auto'
|
||||
this.$refs['box1'].style.height = window.getComputedStyle(this.$refs['box1']).height
|
||||
this.$refs['box1'].style.height = window.getComputedStyle(
|
||||
this.$refs['box1']
|
||||
).height
|
||||
this.getTotalOwnershipApiPage()
|
||||
setInterval(() => {
|
||||
this.getTotalOwnershipApiPage()
|
||||
}, 60 * 1000);
|
||||
}, 60 * 1000)
|
||||
},
|
||||
methods: {
|
||||
getTotalOwnershipApiPage() {
|
||||
this.newArrOne = []
|
||||
this.newArr = []
|
||||
getTotalOwnershipApi().then(res => {
|
||||
getTotalOwnershipApi().then((res) => {
|
||||
this.newArrOne.push(
|
||||
{ name: '机具设备总保有量', value: res.data[0].totalOwnershipNum },
|
||||
{ url: GROUP, name: '调试设备总保有量', value: res.data[1].totalOwnershipNum },
|
||||
{
|
||||
url: GROUP,
|
||||
name: '调试设备总保有量',
|
||||
value: res.data[1].totalOwnershipNum,
|
||||
}
|
||||
)
|
||||
this.newArr.push(
|
||||
{ url: GROUP, name: '在库机具', value: res.data[0].stockNum },
|
||||
|
|
@ -92,7 +103,7 @@ export default {
|
|||
{ url: GROUP, name: '待入库工器具', value: res.data[1].storedNum },
|
||||
{ url: GROUP, name: '在用工器具', value: res.data[1].useNum },
|
||||
{ url: GROUP, name: '在修工器具', value: res.data[1].repairNum },
|
||||
{ url: GROUP, name: '报废工器具', value: res.data[1].scrapNum },
|
||||
{ url: GROUP, name: '报废工器具', value: res.data[1].scrapNum }
|
||||
)
|
||||
})
|
||||
},
|
||||
|
|
@ -116,8 +127,8 @@ export default {
|
|||
} else {
|
||||
this.$refs.inventoryDialog.setOpen({ open: true, maType: 2 })
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export default {
|
|||
isCity: 0,
|
||||
cityCount: [],
|
||||
gozoom: 1,
|
||||
mapList: [], // 查询后的地图数据
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -54,13 +55,22 @@ export default {
|
|||
// this.getCityCount()
|
||||
},
|
||||
mounted() {
|
||||
this.getEquipmentDisByMapApiPage()
|
||||
this.getInitData()
|
||||
},
|
||||
methods: {
|
||||
getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then((res) => {
|
||||
console.log('res=====地图数据---', res)
|
||||
|
||||
this.mapList = res.data
|
||||
this.getInitData()
|
||||
})
|
||||
// this.getEquipmentDisByMapApiPage().then((res) => {
|
||||
// this.getInitData()
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
async getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then((res) => {
|
||||
console.log('res=====地图数据---', res)
|
||||
|
||||
this.mapList = res.data
|
||||
})
|
||||
},
|
||||
getCompanyList() {
|
||||
|
|
@ -174,28 +184,46 @@ export default {
|
|||
}
|
||||
})
|
||||
|
||||
let mapData = [
|
||||
{
|
||||
name: '青海省',
|
||||
value: ['101.778', '36.623'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
value: ['106.278', '38.466'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
value: ['117.283', '31.861'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
value: ['112.982', '28.194'],
|
||||
a: '100',
|
||||
},
|
||||
]
|
||||
// let mapData = [
|
||||
// {
|
||||
// name: '青海省',
|
||||
// // value: ['101.778', '36.623'],
|
||||
// a: 10,
|
||||
// value: [],
|
||||
// },
|
||||
// {
|
||||
// name: '宁夏回族自治区',
|
||||
// // value: ['106.278', '38.466'],
|
||||
// a: 0,
|
||||
// value: [],
|
||||
// },
|
||||
// // {
|
||||
// // name: '安徽省',
|
||||
// // value: ['117.283', '31.861'],
|
||||
// // a: 0,
|
||||
// // },
|
||||
// // {
|
||||
// // name: '湖南省',
|
||||
// // value: ['112.982', '28.194'],
|
||||
// // a: 0,
|
||||
// // },
|
||||
// ]
|
||||
console.log(this.mapList, 'this.mapList')
|
||||
let mapData = this.mapList.map((e) => {
|
||||
return {
|
||||
name: e.province,
|
||||
a: e.num,
|
||||
value: [],
|
||||
}
|
||||
})
|
||||
|
||||
for (let i = 0; i < mapData.length; i++) {
|
||||
let geoCoord = geoCoordMap[mapData[i].name]
|
||||
if (geoCoord) {
|
||||
mapData[i].value = geoCoord.concat(mapData[i].value)
|
||||
}
|
||||
}
|
||||
|
||||
let that = this
|
||||
this.pointAll = this.cityCount
|
||||
this.pointAll.push({
|
||||
|
|
@ -208,140 +236,229 @@ export default {
|
|||
},
|
||||
})
|
||||
let splitList = [
|
||||
{ name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
||||
{
|
||||
name: '北京市',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '天津市',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '云南省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#2187FF' } },
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
count: 0,
|
||||
value: [],
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
]
|
||||
|
||||
for (let i = 0; i < splitList.length; i++) {
|
||||
let geoCoord = geoCoordMap[splitList[i].name]
|
||||
if (geoCoord) {
|
||||
splitList[i].value = geoCoord.concat(splitList[i].value)
|
||||
}
|
||||
}
|
||||
|
||||
mapData.forEach((e) => {
|
||||
splitList.forEach((v) => {
|
||||
if (e.name == v.name) {
|
||||
v.count = e.a
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// console.log(splitList, '数量问题---', mapData)
|
||||
|
||||
let imgUrl = require('../../assets/img/myImage/tankuang.png')
|
||||
let echartOption = {
|
||||
geo: [
|
||||
|
|
@ -492,26 +609,27 @@ export default {
|
|||
zlevel: 1,
|
||||
symbolSize: [45, 55],
|
||||
symbol: (value, params) => {
|
||||
if (params.name == '安徽省') {
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '湖南省') {
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '宁夏回族自治区') {
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '青海省') {
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
// if (params.name == '安徽省') {
|
||||
// return (
|
||||
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
// )
|
||||
// }
|
||||
// if (params.name == '湖南省') {
|
||||
// return (
|
||||
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
// )
|
||||
// }
|
||||
// if (params.name == '宁夏回族自治区') {
|
||||
// return (
|
||||
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
// )
|
||||
// }
|
||||
// if (params.name == '青海省') {
|
||||
// return (
|
||||
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
// )
|
||||
// }
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
|
|
@ -525,9 +643,10 @@ export default {
|
|||
fontFamily: 'cursive',
|
||||
fontWeight: 'bold',
|
||||
position: 'top',
|
||||
padding: [0, 0, -15, 0],
|
||||
padding: [0, 0, 0, 0],
|
||||
formatter: function (params) {
|
||||
return params.data.count
|
||||
// 设置工程数量
|
||||
return params.data.a
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -564,8 +683,20 @@ export default {
|
|||
})
|
||||
const _this = this
|
||||
this.mapEcharts.on('click', function (params) {
|
||||
console.log('点击事件---参数params', params)
|
||||
_this.$router.push({ path: '/home-new' })
|
||||
if (params.data && params.data.a > 0) {
|
||||
_this.$router.push({
|
||||
path: '/home-new',
|
||||
query: { province: params.data.name, location: params.data.value },
|
||||
})
|
||||
} else if (params.region.count > 0) {
|
||||
_this.$router.push({
|
||||
path: '/home-new',
|
||||
query: { province: params.name, location: params.region.value },
|
||||
})
|
||||
} else {
|
||||
_this.$message.error('当前省份没有工程数据！')
|
||||
}
|
||||
|
||||
if (params.seriesType === 'scatter' && !params.name) {
|
||||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
// 点击变黄
|
||||
|
|
|
|||
|
|
@ -12,64 +12,64 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts'
|
||||
import CountFlopOne from './countFlopOne.vue'
|
||||
import { getScrapAnalysisByMonthApi } from "../../api/screen";
|
||||
import { getScrapAnalysisByMonthApi } from '../../api/screen'
|
||||
import scrapAnalysisDialog from './scrapAnalysisDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'accessRatePage',
|
||||
components: {
|
||||
CountFlopOne,
|
||||
scrapAnalysisDialog
|
||||
scrapAnalysisDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nameList: [],
|
||||
valueList2: [],
|
||||
valueList: [],
|
||||
maType: ''
|
||||
maType: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('maType', (maType) => {
|
||||
this.maType = maType
|
||||
this.getScrapAnalysisByMonthApiPage()
|
||||
});
|
||||
})
|
||||
setInterval(() => {
|
||||
this.getScrapAnalysisByMonthApiPage()
|
||||
}, 60 * 1000);
|
||||
}, 60 * 1000)
|
||||
},
|
||||
destroyed() {
|
||||
this.$eventBus.$off('maType');
|
||||
this.$eventBus.$off('maType')
|
||||
},
|
||||
methods: {
|
||||
getScrapAnalysisByMonthApiPage() {
|
||||
let params = {
|
||||
maType: this.maType
|
||||
maType: this.maType,
|
||||
}
|
||||
this.nameList = []
|
||||
this.valueList2 = []
|
||||
this.valueList = []
|
||||
getScrapAnalysisByMonthApi(params).then(res => {
|
||||
getScrapAnalysisByMonthApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.nameList.map(item => {
|
||||
res.data.nameList.map((item) => {
|
||||
this.nameList.push(item)
|
||||
})
|
||||
res.data.valueList.map(item => {
|
||||
res.data.valueList.map((item) => {
|
||||
this.valueList.push(item)
|
||||
})
|
||||
res.data.valueList2.map(item => {
|
||||
res.data.valueList2.map((item) => {
|
||||
this.valueList2.push(item)
|
||||
})
|
||||
this.getInitData();
|
||||
this.getInitData()
|
||||
}
|
||||
})
|
||||
},
|
||||
getInitData() {
|
||||
var echartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
itemHeight: 12,
|
||||
itemGap: 10,
|
||||
icon: 'circle',
|
||||
x: "right",
|
||||
x: 'right',
|
||||
y: '4%',
|
||||
data: ['领用数量', '报废数量'],
|
||||
textStyle: {
|
||||
|
|
@ -90,8 +90,9 @@ export default {
|
|||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.nameList,
|
||||
axisTick: { //y轴刻度线
|
||||
show: false
|
||||
axisTick: {
|
||||
//y轴刻度线
|
||||
show: false,
|
||||
},
|
||||
//x轴数字颜色
|
||||
axisLine: {
|
||||
|
|
@ -124,7 +125,7 @@ export default {
|
|||
lineStyle: {
|
||||
color: '#c1c1c1',
|
||||
width: 1, //这里是为了突出显示加上的
|
||||
}
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
|
@ -137,7 +138,7 @@ export default {
|
|||
right: '4%',
|
||||
bottom: '5%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -149,9 +150,9 @@ export default {
|
|||
show: false,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: "#F7B500",
|
||||
fontSize: 12
|
||||
}
|
||||
color: '#F7B500',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
stack: 'Total',
|
||||
symbolSize: 8, //折点大小
|
||||
|
|
@ -161,9 +162,9 @@ export default {
|
|||
normal: {
|
||||
color: '#F7B500', //折点颜色
|
||||
lineStyle: {
|
||||
color: '#F7B500' //折线颜色
|
||||
}
|
||||
}
|
||||
color: '#F7B500', //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
//线下阴影
|
||||
areaStyle: {
|
||||
|
|
@ -173,16 +174,19 @@ export default {
|
|||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F7B500" // 0% 处的颜色
|
||||
}, {
|
||||
color: '#F7B500', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#272240" // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
color: '#272240', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -194,9 +198,9 @@ export default {
|
|||
show: false,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: "#1ED6FF",
|
||||
fontSize: 12
|
||||
}
|
||||
color: '#1ED6FF',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
stack: 'Total',
|
||||
symbolSize: 8, //折点大小
|
||||
|
|
@ -206,9 +210,9 @@ export default {
|
|||
normal: {
|
||||
color: '#1ED6FF', //折点颜色
|
||||
lineStyle: {
|
||||
color: '#1ED6FF' //折线颜色
|
||||
}
|
||||
}
|
||||
color: '#1ED6FF', //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
//线下阴影
|
||||
areaStyle: {
|
||||
|
|
@ -218,27 +222,33 @@ export default {
|
|||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#1ED6FF" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "#053469" // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
color: '#1ED6FF', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#053469', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
let myCharts = echarts.init(document.querySelector('#accessRateEcharts'));
|
||||
let myCharts = echarts.init(document.querySelector('#accessRateEcharts'))
|
||||
myCharts.setOption(echartOption)
|
||||
myCharts.off('click').on('click', () => {
|
||||
this.$refs.scrapAnalysisDialog.setOpen({ open: true, maType: this.maType})
|
||||
this.$refs.scrapAnalysisDialog.setOpen({
|
||||
open: true,
|
||||
maType: this.maType,
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,18 @@
|
|||
<h5 class="access-rate-box-title">退料数据</h5>
|
||||
</div>
|
||||
<div @click="handleClick(1)">
|
||||
<CountFlopTwo :val="num" sonTitle="机具设备今日退库" ref="countFlop"></CountFlopTwo>
|
||||
<CountFlopTwo
|
||||
:val="num"
|
||||
sonTitle="机具设备今日退库"
|
||||
ref="countFlop"
|
||||
></CountFlopTwo>
|
||||
</div>
|
||||
<div class="access-rate-box-top" @click="handleClick(2)">
|
||||
<CountFlopTwo :val="num2" sonTitle="调试设备今日退库" ref="countFlopTools"></CountFlopTwo>
|
||||
<CountFlopTwo
|
||||
:val="num2"
|
||||
sonTitle="调试设备今日退库"
|
||||
ref="countFlopTools"
|
||||
></CountFlopTwo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,11 +24,11 @@
|
|||
|
||||
<script>
|
||||
import CountFlopTwo from './countFlopTwo.vue'
|
||||
import { getMaterialReturnDataApi } from "../../api/screen";
|
||||
import { getMaterialReturnDataApi } from '../../api/screen'
|
||||
export default {
|
||||
name: 'accessRatePage',
|
||||
components: {
|
||||
CountFlopTwo
|
||||
CountFlopTwo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -32,22 +40,22 @@ export default {
|
|||
this.getMaterialReturnDataApiPage()
|
||||
setInterval(() => {
|
||||
this.getMaterialReturnDataApiPage()
|
||||
}, 60 * 1000);
|
||||
}, 60 * 1000)
|
||||
},
|
||||
methods: {
|
||||
formatNumber(num) {
|
||||
const str = String(num); // 将数字转换成字符串
|
||||
const str = String(num) // 将数字转换成字符串
|
||||
if (str.length < 6) {
|
||||
const prefix = '0'.repeat(6 - str.length); // 在前面补零
|
||||
const formattedStr = prefix + str; // 组合补零后的字符串
|
||||
const result = formattedStr.replace(/(\d{3})(?=\d)/g, '$1,'); // 在中间用逗号分割
|
||||
return result;
|
||||
const prefix = '0'.repeat(6 - str.length) // 在前面补零
|
||||
const formattedStr = prefix + str // 组合补零后的字符串
|
||||
const result = formattedStr.replace(/(\d{3})(?=\d)/g, '$1,') // 在中间用逗号分割
|
||||
return result
|
||||
} else {
|
||||
return str.replace(/(\d{3})(?=\d)/g, '$1,'); // 直接在中间用逗号分割
|
||||
return str.replace(/(\d{3})(?=\d)/g, '$1,') // 直接在中间用逗号分割
|
||||
}
|
||||
},
|
||||
getMaterialReturnDataApiPage() {
|
||||
getMaterialReturnDataApi().then(res => {
|
||||
getMaterialReturnDataApi().then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.num = this.formatNumber(res.data.num)
|
||||
this.num2 = this.formatNumber(res.data.num2)
|
||||
|
|
@ -60,9 +68,8 @@ export default {
|
|||
} else {
|
||||
this.$refs.countFlopTools.handleClick(maType)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,21 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getProjectByMapApi, getDeviceByMapApi } from '@/api/screen.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
projectList: [],
|
||||
deviceList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
Promise.all([this.getProjectByMapData(), this.getDeviceByMapData()]).then(
|
||||
() => {
|
||||
this.initMap()
|
||||
}
|
||||
)
|
||||
},
|
||||
beforeDestroy() {
|
||||
/** 组件销毁之前 先清除地图实例 */
|
||||
|
|
@ -26,15 +33,18 @@ export default {
|
|||
// 初始化地图和轨迹
|
||||
initMap() {
|
||||
this.$nextTick(() => {
|
||||
console.log(this.projectList, '工程信息--', this.deviceList)
|
||||
const _this = this
|
||||
this.map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
let point = new BMapGL.Point(
|
||||
this.$route.query.location[0] || 117.13805,
|
||||
this.$route.query.location[1] || 31.8734
|
||||
) // 创建点坐标
|
||||
// let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
|
||||
var icon1 = new BMapGL.Icon(
|
||||
require('../../assets/img/location-icon.png'),
|
||||
new BMapGL.Size(30, 42),
|
||||
|
|
@ -50,63 +60,102 @@ export default {
|
|||
}
|
||||
)
|
||||
|
||||
var points = [
|
||||
{
|
||||
title: '工程标点',
|
||||
point: new BMapGL.Point(117.13805, 31.8734),
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
title: '设备标点',
|
||||
point: new BMapGL.Point(118.13805, 32.8734),
|
||||
type: 2,
|
||||
},
|
||||
]
|
||||
var points = []
|
||||
|
||||
this.projectList.forEach((e) => {
|
||||
points.push({
|
||||
point: new BMapGL.Point(e.longitude * 1, e.latitude * 1),
|
||||
type: 1,
|
||||
...e,
|
||||
})
|
||||
})
|
||||
|
||||
this.deviceList.forEach((e) => {
|
||||
points.push({
|
||||
iotId: e.iotLocationVo.iotId,
|
||||
voltagepercent: e.iotLocationVo.voltagepercent,
|
||||
point: new BMapGL.Point(
|
||||
e.iotLocationVo.callon,
|
||||
e.iotLocationVo.callat
|
||||
),
|
||||
type: 2,
|
||||
...e,
|
||||
})
|
||||
})
|
||||
let positionList = []
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
let marker = new BMapGL.Marker(points[i].point, {
|
||||
icon: points[i].type === 1 ? icon2 : icon1,
|
||||
}) // 创建标点
|
||||
marker.data = {
|
||||
type: points[i].type,
|
||||
...points[i],
|
||||
}
|
||||
this.map.addOverlay(marker) // 将标点添加到地图中
|
||||
|
||||
positionList.push(
|
||||
marker.getPosition(points[i].longitude, points[i].latitude)
|
||||
)
|
||||
// 可以添加标注
|
||||
// this.addInfoWindow(marker, points[i].title)
|
||||
|
||||
let opts = {
|
||||
width: 180, // 信息窗口宽度
|
||||
height: 240, // 信息窗口高度
|
||||
title: points[i].title, // 信息窗口标题
|
||||
}
|
||||
|
||||
const mapHtml = `<div><span>设备编码：</span>12345466</div><div><span>设备状态：${points[i].title}</span>12345466</div><div><span>领用工程：</span>12345466</div><div style='border-bottom: 1px solid #3484ff'></div><div><span>设备编码：</span>12345466</div><div><span>设备状态：</span>12345466</div><div><span>当前位置：</span>12345466</div>`
|
||||
|
||||
let infoWindow = new BMapGL.InfoWindow(mapHtml, opts) // 创建信息窗口对象
|
||||
|
||||
if (points[i].type === 2) {
|
||||
// let opts = {
|
||||
// width: 320, // 信息窗口宽度
|
||||
// height: 280, // 信息窗口高度
|
||||
// title: points[i].typeModelName, // 信息窗口标题
|
||||
// }
|
||||
// const mapHtml = `<div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码：</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程：${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码：${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：在用/电量/${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置：</span></div>`
|
||||
const mapHtml = `<div class='my-info-window'><h3 class='my-info-window-title'>${points[i].typeModelName}</h3><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码：</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程：${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码：${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：在用/ 电量${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置：</span></div></div></div>`
|
||||
let infoWindow = new BMapGL.InfoWindow(mapHtml) // 创建信息窗口对象
|
||||
// marker.openInfoWindow(infoWindow) // 打开信息窗口
|
||||
|
||||
// 可以绑定点击事件打开信息窗口
|
||||
marker.addEventListener('mouseover', function () {
|
||||
this.openInfoWindow(infoWindow)
|
||||
this.openInfoWindow(infoWindow, this.map.getCenter())
|
||||
})
|
||||
marker.addEventListener('mouseout', function () {
|
||||
this.closeInfoWindow(infoWindow)
|
||||
})
|
||||
}
|
||||
|
||||
marker.addEventListener('click', function (e) {
|
||||
// infoWindow.open(this.map, marker)
|
||||
// infoWindow.setPosition(marker.getPosition())
|
||||
// this.map.openInfoWindow(infoWindow, this.map.getCenter())
|
||||
|
||||
console.log(e, '地图点击了--')
|
||||
|
||||
_this.$emit('openDrawer', e.target.data.type)
|
||||
_this.$emit('openDrawer', e.target.data)
|
||||
})
|
||||
}
|
||||
|
||||
this.map.setViewport(positionList)
|
||||
})
|
||||
},
|
||||
// 获取工程和设备的标点等信息
|
||||
async getProjectByMapData() {
|
||||
if (this.$route.query && this.$route.query.province) {
|
||||
const { data: res } = await getProjectByMapApi({
|
||||
province: this.$route.query.province,
|
||||
})
|
||||
this.projectList = res
|
||||
}
|
||||
},
|
||||
// 获取工程和设备的标点等信息
|
||||
async getDeviceByMapData() {
|
||||
if (this.$route.query && this.$route.query.province) {
|
||||
const { data: res } = await getDeviceByMapApi({
|
||||
province: this.$route.query.province,
|
||||
})
|
||||
this.deviceList = res
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(newValue) {
|
||||
console.log(newValue, '路由参数')
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -136,4 +185,24 @@ export default {
|
|||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ll {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
letter-spacing: 1px;
|
||||
border: 1px dashed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.my-info-window {
|
||||
margin: 15px;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.my-info-window-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,19 @@
|
|||
<h5 class="access-rate-box-title">当月领料分析</h5>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart" ref="chart" id="pieChartMap" @click="handleClick"></div>
|
||||
<div
|
||||
class="chart"
|
||||
ref="chart"
|
||||
id="pieChartMap"
|
||||
@click="handleClick"
|
||||
></div>
|
||||
<!-- 底座背景 -->
|
||||
<div class="bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<materialAnalysisDialog ref="materialAnalysisDialog"></materialAnalysisDialog>
|
||||
<materialAnalysisDialog
|
||||
ref="materialAnalysisDialog"
|
||||
></materialAnalysisDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,43 +30,43 @@
|
|||
// HighchartsMore(Highcharts);
|
||||
// HighchartsDrilldown(Highcharts);
|
||||
// Highcharts3D(Highcharts);
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl' // 3d图表库
|
||||
import { getPickingAnalysisByMonthApi } from "../../api/screen";
|
||||
import materialAnalysisDialog from "./materialAnalysisDialog";
|
||||
import { getPickingAnalysisByMonthApi } from '../../api/screen'
|
||||
import materialAnalysisDialog from './materialAnalysisDialog'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
materialAnalysisDialog
|
||||
materialAnalysisDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
maType: ''
|
||||
};
|
||||
maType: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('maType', (maType) => {
|
||||
this.maType = maType
|
||||
this.getPickingAnalysisByMonthApiPage()
|
||||
});
|
||||
})
|
||||
setInterval(() => {
|
||||
this.getPickingAnalysisByMonthApiPage()
|
||||
}, 60 * 1000);
|
||||
|
||||
}, 60 * 1000)
|
||||
},
|
||||
destroyed() {
|
||||
this.$eventBus.$off('maType');
|
||||
this.$eventBus.$off('maType')
|
||||
},
|
||||
methods: {
|
||||
getPickingAnalysisByMonthApiPage() {
|
||||
this.data = []
|
||||
let params = {
|
||||
maType: this.maType
|
||||
maType: this.maType,
|
||||
}
|
||||
getPickingAnalysisByMonthApi(params).then(res => {
|
||||
getPickingAnalysisByMonthApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.data.push({
|
||||
this.data.push(
|
||||
{
|
||||
name: '数量领料',
|
||||
value: res.data.num,
|
||||
rate: res.data.rate,
|
||||
|
|
@ -68,130 +75,164 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
name: '编码领料', value: res.data.num2,
|
||||
name: '编码领料',
|
||||
value: res.data.num2,
|
||||
rate: res.data.rate2,
|
||||
itemStyle: {
|
||||
color: '#077E98',
|
||||
},
|
||||
})
|
||||
this.mastery(this.data);
|
||||
}
|
||||
)
|
||||
this.mastery(this.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
||||
|
||||
getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelected,
|
||||
isHovered,
|
||||
k,
|
||||
height
|
||||
) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
let midRatio = (startRatio + endRatio) / 2
|
||||
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
let startRadian = startRatio * Math.PI * 2
|
||||
let endRadian = endRatio * Math.PI * 2
|
||||
let midRadian = midRatio * Math.PI * 2
|
||||
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
isSelected = false
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||
k = typeof k !== 'undefined' ? k : 1 / 3
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
|
||||
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
let hoverRate = isHovered ? 1.05 : 1
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
)
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return (
|
||||
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
)
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
)
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return (
|
||||
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
)
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < - Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u)
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
return Math.sin(u)
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
return Math.sin(v) > 0 ? 1 * height : -1
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||
let series = []
|
||||
let sumValue = 0
|
||||
let startValue = 0
|
||||
let endValue = 0
|
||||
let legendData = []
|
||||
let k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
sumValue += pieData[i].value
|
||||
let seriesItem = {
|
||||
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||
name:
|
||||
typeof pieData[i].name === 'undefined'
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k
|
||||
k: k,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != 'undefined') {
|
||||
let itemStyle = {};
|
||||
typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
||||
typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
||||
let itemStyle = {}
|
||||
typeof pieData[i].itemStyle.color != 'undefined'
|
||||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||||
: null
|
||||
typeof pieData[i].itemStyle.opacity != 'undefined'
|
||||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||||
: null
|
||||
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
seriesItem.itemStyle = itemStyle
|
||||
}
|
||||
series.push(seriesItem);
|
||||
series.push(seriesItem)
|
||||
}
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
console.log(series[i]);
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
endValue = startValue + series[i].pieData.value
|
||||
console.log(series[i])
|
||||
series[i].pieData.startRatio = startValue / sumValue
|
||||
series[i].pieData.endRatio = endValue / sumValue
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
)
|
||||
startValue = endValue
|
||||
legendData.push(series[i].name)
|
||||
}
|
||||
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
|
||||
series.push({
|
||||
|
|
@ -217,16 +258,16 @@ export default {
|
|||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2
|
||||
},
|
||||
y: function (u, v) {
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2
|
||||
},
|
||||
z: function (u, v) {
|
||||
return Math.cos(v) > 0 ? -0.5 : -5;
|
||||
return Math.cos(v) > 0 ? -0.5 : -5
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
// // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
|
||||
series.push({
|
||||
|
|
@ -252,16 +293,16 @@ export default {
|
|||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2
|
||||
},
|
||||
y: function (u, v) {
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2
|
||||
},
|
||||
z: function (u, v) {
|
||||
return Math.cos(v) > 0 ? -5 : -7;
|
||||
return Math.cos(v) > 0 ? -5 : -7
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
series.push({
|
||||
name: 'mouseoutSeries',
|
||||
type: 'surface',
|
||||
|
|
@ -272,7 +313,6 @@ export default {
|
|||
itemStyle: {
|
||||
opacity: 0.1,
|
||||
color: '#E1E8EC',
|
||||
|
||||
},
|
||||
parametricEquation: {
|
||||
u: {
|
||||
|
|
@ -286,20 +326,20 @@ export default {
|
|||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2
|
||||
},
|
||||
y: function (u, v) {
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2
|
||||
},
|
||||
z: function (u, v) {
|
||||
return Math.cos(v) > 0 ? -7 : -7;
|
||||
return Math.cos(v) > 0 ? -7 : -7
|
||||
},
|
||||
},
|
||||
});
|
||||
return series;
|
||||
})
|
||||
return series
|
||||
},
|
||||
mastery(data) {
|
||||
var myChart = echarts.init(document.querySelector("#pieChartMap"));
|
||||
var myChart = echarts.init(document.querySelector('#pieChartMap'))
|
||||
// const optionsData = [
|
||||
// {
|
||||
// name: '数量领料',
|
||||
|
|
@ -316,7 +356,7 @@ export default {
|
|||
// },
|
||||
// },
|
||||
// ];
|
||||
const series = this.getPie3D(this.data, 0.8, 360, 18, 56, 1);
|
||||
const series = this.getPie3D(this.data, 0.8, 360, 18, 56, 1)
|
||||
|
||||
series.push({
|
||||
type: 'pie',
|
||||
|
|
@ -340,7 +380,7 @@ export default {
|
|||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
})
|
||||
let option = {
|
||||
legend: {
|
||||
show: false,
|
||||
|
|
@ -367,24 +407,24 @@ export default {
|
|||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: params => {
|
||||
formatter: (params) => {
|
||||
return `${params.percent}%\n${params.name}`
|
||||
},
|
||||
borderWidth: 0,
|
||||
padding: [0, -50],
|
||||
height: 70,
|
||||
fontSize: 14,
|
||||
align: "center",
|
||||
color: "#ffffff",
|
||||
align: 'center',
|
||||
color: '#ffffff',
|
||||
rich: {
|
||||
hr: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 3,
|
||||
width: 3,
|
||||
height: 3,
|
||||
padding: [3, 3, 0, -12]
|
||||
padding: [3, 3, 0, -12],
|
||||
},
|
||||
},
|
||||
}
|
||||
// rich: {
|
||||
// b: {
|
||||
// fontSize: 14,
|
||||
|
|
@ -423,16 +463,19 @@ export default {
|
|||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option);
|
||||
}
|
||||
if (option && typeof option === 'object') {
|
||||
myChart.setOption(option)
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
this.$refs.materialAnalysisDialog.setOpen({ open: true, maType: this.maType })
|
||||
}
|
||||
this.$refs.materialAnalysisDialog.setOpen({
|
||||
open: true,
|
||||
maType: this.maType,
|
||||
})
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.access-rate-page {
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { getMaintenanceByMonthApi } from "../../api/screen";
|
||||
import fixMaterialAnalysisDialog from './fixMaterialAnalysisDialog.vue';
|
||||
import * as echarts from 'echarts'
|
||||
import { getMaintenanceByMonthApi } from '../../api/screen'
|
||||
import fixMaterialAnalysisDialog from './fixMaterialAnalysisDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'accessRatePage',
|
||||
|
|
@ -47,32 +47,31 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
dataObj: {},
|
||||
maType: ''
|
||||
maType: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('maType', (maType) => {
|
||||
this.maType = maType
|
||||
this.getMaintenanceByMonthApiPage()
|
||||
});
|
||||
})
|
||||
setInterval(() => {
|
||||
this.getMaintenanceByMonthApiPage()
|
||||
}, 60 * 1000);
|
||||
|
||||
}, 60 * 1000)
|
||||
},
|
||||
destroyed() {
|
||||
this.$eventBus.$off('maType');
|
||||
this.$eventBus.$off('maType')
|
||||
},
|
||||
methods: {
|
||||
getMaintenanceByMonthApiPage() {
|
||||
let params = {
|
||||
maType: this.maType
|
||||
maType: this.maType,
|
||||
}
|
||||
this.dataObj = {}
|
||||
getMaintenanceByMonthApi(params).then(res => {
|
||||
getMaintenanceByMonthApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.dataObj = res.data
|
||||
this.getInitData();
|
||||
this.getInitData()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -96,7 +95,7 @@ export default {
|
|||
subtextStyle: {
|
||||
color: '#D9D9D9',
|
||||
fontSize: 14,
|
||||
lineHeight: 20
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -143,14 +142,16 @@ export default {
|
|||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
let myCharts = echarts.init(document.querySelector('#accessRateEchartsPie'));
|
||||
let myCharts = echarts.init(
|
||||
document.querySelector('#accessRateEchartsPie')
|
||||
)
|
||||
myCharts.setOption(option)
|
||||
},
|
||||
handleClick() {
|
||||
this.$refs.fixMaterial.setOpen({ open: true, maType: this.maType })
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
</div>
|
||||
<div class="box_header">
|
||||
<div class="box_header_div">
|
||||
<div class="box_list" v-for="(item, index) of newArr" :key="index" @click="handleClick(item)">
|
||||
<div
|
||||
class="box_list"
|
||||
v-for="(item, index) of newArr"
|
||||
:key="index"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div :style="{ color: item.color }" class="item-value">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
|
|
@ -21,11 +26,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ONE from '../../assets/img/myImage/one.png';
|
||||
import TWO from '../../assets/img/myImage/TWO.png';
|
||||
import THREE from '../../assets/img/myImage/THREE.png';
|
||||
import { getMaterialReturnByMonthApi } from "../../api/screen";
|
||||
import returnMaterialAnalysisDialog from './returnMaterialAnalysisDialog';
|
||||
import ONE from '../../assets/img/myImage/one.png'
|
||||
import TWO from '../../assets/img/myImage/TWO.png'
|
||||
import THREE from '../../assets/img/myImage/THREE.png'
|
||||
import { getMaterialReturnByMonthApi } from '../../api/screen'
|
||||
import returnMaterialAnalysisDialog from './returnMaterialAnalysisDialog'
|
||||
|
||||
export default {
|
||||
name: 'accessRatePage',
|
||||
|
|
@ -37,34 +42,48 @@ export default {
|
|||
{ color: '#66FFFF', url: TWO, name: '实际退料', value: 0 },
|
||||
{ color: '#32C0FF', url: THREE, name: '计划完成率', value: '0%' },
|
||||
],
|
||||
maType: ''
|
||||
maType: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('maType', (maType) => {
|
||||
this.maType = maType
|
||||
this.getMaterialReturnByMonthApiPage()
|
||||
});
|
||||
})
|
||||
setInterval(() => {
|
||||
this.getMaterialReturnByMonthApiPage()
|
||||
}, 60 * 1000);
|
||||
|
||||
}, 60 * 1000)
|
||||
},
|
||||
destroyed() {
|
||||
this.$eventBus.$off('maType');
|
||||
this.$eventBus.$off('maType')
|
||||
},
|
||||
methods: {
|
||||
getMaterialReturnByMonthApiPage() {
|
||||
this.newArr = []
|
||||
let params = {
|
||||
maType: this.maType
|
||||
maType: this.maType,
|
||||
}
|
||||
getMaterialReturnByMonthApi(params).then(res => {
|
||||
getMaterialReturnByMonthApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.newArr.push(
|
||||
{ color: '#0BDC8C', url: ONE, name: '计划退料', value: res.data.num },
|
||||
{ color: '#66FFFF', url: TWO, name: '实际退料', value: res.data.num2 },
|
||||
{ color: '#32C0FF', url: THREE, name: '计划完成率', value: res.data.rate },
|
||||
{
|
||||
color: '#0BDC8C',
|
||||
url: ONE,
|
||||
name: '计划退料',
|
||||
value: res.data.num,
|
||||
},
|
||||
{
|
||||
color: '#66FFFF',
|
||||
url: TWO,
|
||||
name: '实际退料',
|
||||
value: res.data.num2,
|
||||
},
|
||||
{
|
||||
color: '#32C0FF',
|
||||
url: THREE,
|
||||
name: '计划完成率',
|
||||
value: res.data.rate,
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
@ -72,7 +91,7 @@ export default {
|
|||
handleClick(item) {
|
||||
console.log('点击', item)
|
||||
this.$refs.returnMaterial.setOpen({ open: true, maType: this.maType })
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,13 +7,14 @@ import store from './store'
|
|||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import { Message } from 'element-ui';
|
||||
import { fullScreenContainer, borderBox1, borderBox2, borderBox3, borderBox4, borderBox5, borderBox8, borderBox11, decoration6, decoration3 } from '@jiaminghi/data-view'
|
||||
import { fullScreenContainer, borderBox1, borderBox2, borderBox3, borderBox4, borderBox5, borderBox7, borderBox8, borderBox11, decoration6, decoration3 } from '@jiaminghi/data-view'
|
||||
|
||||
Vue.use(borderBox1)
|
||||
Vue.use(borderBox2)
|
||||
Vue.use(borderBox3)
|
||||
Vue.use(borderBox4)
|
||||
Vue.use(borderBox5)
|
||||
Vue.use(borderBox7)
|
||||
Vue.use(borderBox8)
|
||||
Vue.use(borderBox11)
|
||||
Vue.use(borderBox8)
|
||||
|
|
|
|||
|
|
@ -10,62 +10,74 @@ Router.prototype.push = function push(location) {
|
|||
|
||||
const Layout = () => import('@/views/layout');
|
||||
const Home = () => import('@/views/Home/index');
|
||||
const Login = () => import('@/views/Login/index');
|
||||
const Login = () => import('@/views/new-login/index.vue');
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/Layout',
|
||||
path: '*',
|
||||
redirect: '/home-old',
|
||||
},
|
||||
{
|
||||
path: '/home-new',
|
||||
component: () => import('@/views/newHome/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/home-old',
|
||||
component: () => import('@/views/oldHome/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/Layout',
|
||||
component: Layout,
|
||||
name: 'Layout',
|
||||
redirect: '/Home/index',
|
||||
meta: {
|
||||
title: '南方电网',
|
||||
requireLoginAuth: true,
|
||||
},
|
||||
// path: '/Layout',
|
||||
// component: Layout,
|
||||
// name: 'Layout',
|
||||
// redirect: '/Login/index',
|
||||
// meta: {
|
||||
// title: '南方电网',
|
||||
// requireLoginAuth: true,
|
||||
// },
|
||||
children: [
|
||||
{
|
||||
path: '/Home/index',
|
||||
component: Home,
|
||||
name: 'Home',
|
||||
meta: {
|
||||
title: '首页',
|
||||
requireLoginAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/Login/index',
|
||||
path: '/login/index',
|
||||
component: Login,
|
||||
name: 'Login',
|
||||
meta: {
|
||||
title: '登录',
|
||||
requireLoginAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/Layout',
|
||||
path: '/home-new',
|
||||
name: 'home-new',
|
||||
component: () => import('@/views/newHome/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/home-old',
|
||||
name: 'home-old',
|
||||
component: () => import('@/views/oldHome/index.vue')
|
||||
},
|
||||
|
||||
// {
|
||||
// path: '/Layout',
|
||||
// component: Layout,
|
||||
// name: 'Layout',
|
||||
// redirect: '/Home/index',
|
||||
// meta: {
|
||||
// title: '南方电网',
|
||||
// requireLoginAuth: true,
|
||||
// },
|
||||
// // path: '/Layout',
|
||||
// // component: Layout,
|
||||
// // name: 'Layout',
|
||||
// // redirect: '/Login/index',
|
||||
// // meta: {
|
||||
// // title: '南方电网',
|
||||
// // requireLoginAuth: true,
|
||||
// // },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/Home/index',
|
||||
// component: Home,
|
||||
// name: 'Home',
|
||||
// meta: {
|
||||
// title: '首页',
|
||||
// requireLoginAuth: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// path: '/Login/index',
|
||||
// component: Login,
|
||||
// name: 'Login',
|
||||
// meta: {
|
||||
// title: '登录',
|
||||
// requireLoginAuth: true
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: '*',
|
||||
// redirect: '/Layout',
|
||||
// },
|
||||
]
|
||||
|
||||
const router = new Router({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,505 @@
|
|||
<template>
|
||||
<div class="login_box">
|
||||
<div class="loginContainer">
|
||||
<div class="loginInner">
|
||||
<div class="login_header">
|
||||
<div class="login_header_title">
|
||||
<!-- <a
|
||||
href="javascript:;"
|
||||
:class="{ on: loginWay }"
|
||||
@click="loginWayClick(1)"
|
||||
>账号登录</a
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
:class="{ on: !loginWay }"
|
||||
@click="loginWayClick(2)"
|
||||
>手机登录</a
|
||||
> -->
|
||||
<div class="login_header">智慧仓储管理平台</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容部分 -->
|
||||
<div class="login_content">
|
||||
<!-- 账号登录 -->
|
||||
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
|
||||
<div class="login_content_box" v-if="UserLogin">
|
||||
<el-form-item prop="userName">
|
||||
<div class="userName">
|
||||
<div class="userName_icon">
|
||||
<img src="../../assets/img/myImage/username.png" />
|
||||
</div>
|
||||
<el-input placeholder="请输入账号" v-model="form.userName">
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="passWord">
|
||||
<div class="password">
|
||||
<div class="password_icon">
|
||||
<img src="../../assets/img/myImage/password.png" />
|
||||
</div>
|
||||
<el-input
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
v-model="form.passWord"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- 手机登录-->
|
||||
<div v-else>
|
||||
<el-form-item prop="phone">
|
||||
<div class="iphone_box">
|
||||
<el-input placeholder="请输入手机号" v-model="form.phone">
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- <div class="iphone_box_icon">
|
||||
<div class="iphone_box_icon_number">
|
||||
<el-input
|
||||
placeholder="请输入图片验证码"
|
||||
v-model="form.userName"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" class="login-code-img" />
|
||||
</div>
|
||||
</div> -->
|
||||
<el-form-item prop="phoneCode">
|
||||
<div class="iphone_box_icon">
|
||||
<div class="iphone_box_icon_number">
|
||||
<el-input
|
||||
placeholder="请输入短信验证码"
|
||||
v-model="form.phoneCode"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="login-code">
|
||||
<el-button
|
||||
:disabled="!isCode"
|
||||
v-if="isCode"
|
||||
class="login-code-text"
|
||||
@click="getCode"
|
||||
>获取验证码</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="!isCode"
|
||||
v-else
|
||||
class="login-code-text"
|
||||
@click="getCode"
|
||||
>{{ computeTime }}S再次获取</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<button
|
||||
:disabled="isButtonState"
|
||||
class="login_submit"
|
||||
@click="userLogin('form')"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
authLoginApi,
|
||||
getSendIphoneCodeApi,
|
||||
loginCodeApi,
|
||||
} from '../../api/userLogin'
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
const reg =
|
||||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
||||
if (!value) {
|
||||
callback(new Error('请输入手机号'))
|
||||
} else if (!reg.test(value)) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
isButtonState: false,
|
||||
isCode: true,
|
||||
loginWay: true, //true代表短信登陆, false代表密码
|
||||
computeTime: 0,
|
||||
showPwd: false,
|
||||
captcha: '',
|
||||
form: {
|
||||
userName: '',
|
||||
passWord: '',
|
||||
phone: '',
|
||||
phoneCode: '',
|
||||
},
|
||||
UserLogin: true,
|
||||
codeUrl: '',
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: '账号不能为空', trigger: 'blur' },
|
||||
],
|
||||
passWord: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
validator: validatePhone,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
|
||||
],
|
||||
phoneCode: [
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
type: 1,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route)
|
||||
// if(localStorage.getItem('token')!=''){
|
||||
// this.$router.push('./Home/index')
|
||||
// }
|
||||
},
|
||||
|
||||
methods: {
|
||||
userLogin() {
|
||||
// 账号密码登录
|
||||
if (this.type == 1) {
|
||||
this.isButtonState = true
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
username: this.form.userName,
|
||||
password: this.form.passWord,
|
||||
}
|
||||
authLoginApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
localStorage.setItem('token', res.data.access_token)
|
||||
// this.$router.push('./Home/index')
|
||||
this.$router.push({ name: 'home-old' })
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
this.isButtonState = false
|
||||
})
|
||||
} else {
|
||||
this.isButtonState = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.type == 2) {
|
||||
this.isButtonState = true
|
||||
// 手机号登录
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
phone: this.form.phone,
|
||||
code: this.form.phoneCode,
|
||||
}
|
||||
loginCodeApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
localStorage.setItem('token', res.data.access_token)
|
||||
this.$router.push('./Home/index')
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
this.isButtonState = false
|
||||
})
|
||||
} else {
|
||||
this.isButtonState = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
loginWayClick(type) {
|
||||
if (type == 1) {
|
||||
this.type = 1
|
||||
this.UserLogin = true
|
||||
this.loginWay = true
|
||||
this.form = {}
|
||||
this.$refs.form.resetFields()
|
||||
} else {
|
||||
this.type = 2
|
||||
this.UserLogin = false
|
||||
this.loginWay = false
|
||||
this.form = {}
|
||||
this.$refs.form.resetFields()
|
||||
}
|
||||
},
|
||||
getCode() {
|
||||
const regex =
|
||||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // 手机号正则表达式
|
||||
let reg = regex.test(this.form.phone)
|
||||
if (!reg) {
|
||||
this.$refs.form.validateField('phone')
|
||||
} else {
|
||||
this.isCode = false
|
||||
let params = {
|
||||
phone: this.form.phone,
|
||||
}
|
||||
getSendIphoneCodeApi(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success('短信发送成功！')
|
||||
}
|
||||
})
|
||||
// if (!this.computeTime) {
|
||||
this.computeTime = 60
|
||||
this.timer = setInterval(() => {
|
||||
this.computeTime--
|
||||
if (this.computeTime <= 0) {
|
||||
this.isCode = true
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
login() {
|
||||
//短信验证
|
||||
if (this.loginWay) {
|
||||
console.log(this.rightPhone)
|
||||
if (!this.rightPhone) {
|
||||
alert('手机号不正确')
|
||||
} else if (!/^\d{6}$/.test(this.code)) {
|
||||
alert('验证码必须是6位')
|
||||
}
|
||||
} else {
|
||||
//密码验证
|
||||
if (!/^[\u4E00-\u9FA5]{2,4}$/.test(this.name)) {
|
||||
alert('用户名必须是2-4个汉字')
|
||||
} else if (!/^\d{6}$/.test(this.pwd)) {
|
||||
alert('密码必须是6位')
|
||||
} else if (!this.captcha) {
|
||||
alert('图片验证码不正确')
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.login_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/img/myImage/login_bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.loginContainer {
|
||||
width: 792px;
|
||||
height: 531px;
|
||||
// background: #fff;
|
||||
// box-shadow: -1px 4px 17px 2px rgba(216, 218, 224, 0.5);
|
||||
// border-radius: 12px;
|
||||
opacity: 0.9;
|
||||
margin-top: 15%;
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
.loginInner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
//padding-top: 15%;
|
||||
}
|
||||
|
||||
.loginInner .login_header .login_logo {
|
||||
color: #003996;
|
||||
font-weight: bolder;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login_header .login_header_title {
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.login_header_title a {
|
||||
text-decoration: none;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.login_header_title a:first-child {
|
||||
margin-right: 150px;
|
||||
}
|
||||
|
||||
.login_header_title a.on {
|
||||
color: #003996;
|
||||
font-weight: bolder;
|
||||
border-bottom: 5px solid #003996;
|
||||
}
|
||||
.login_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 56px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.login_content {
|
||||
margin: 110px 110px 0 110px;
|
||||
}
|
||||
|
||||
.login_content_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.userName {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.userName_icon {
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
top: 20%;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.password {
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password_icon {
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
top: 20%;
|
||||
z-index: 1;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-input__inner {
|
||||
width: 368px !important;
|
||||
height: 48px !important;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
border: 1px solid #19bfec;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 48px;
|
||||
padding: 0 42px;
|
||||
background: #000d32;
|
||||
}
|
||||
|
||||
/deep/ .el-input__icon el-icon-user {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
/deep/ .el-form-item {
|
||||
margin-left: -120px;
|
||||
}
|
||||
/deep/ .el-form-item__error {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.iphone_box {
|
||||
/deep/ .el-input__inner {
|
||||
width: 566px !important;
|
||||
height: 85px !important;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bebebe;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
line-height: 40px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.iphone_box_icon {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
|
||||
.iphone_box_icon_number {
|
||||
width: 362px;
|
||||
/deep/ .el-input__inner {
|
||||
width: 362px !important;
|
||||
height: 85px !important;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #bebebe;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
line-height: 40px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
/deep/ .el-form-item__error {
|
||||
font-size: 28px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-code {
|
||||
margin-left: 14px;
|
||||
width: 190px;
|
||||
height: 85px;
|
||||
.login-code-text {
|
||||
width: 190px;
|
||||
height: 85px;
|
||||
background: #003996;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login_submit {
|
||||
display: block;
|
||||
width: 368px;
|
||||
height: 48px;
|
||||
background: #00b2ff;
|
||||
border-radius: 4px;
|
||||
font-size: 20px;
|
||||
line-height: 48px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: none;
|
||||
margin-top: 44px;
|
||||
letter-spacing: 0.3em;
|
||||
margin-left: 102px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +1,99 @@
|
|||
<template>
|
||||
<div class="drawer-container">
|
||||
<div class="drawer-left">
|
||||
<h1 class="title-content">牵引机90KN</h1>
|
||||
<h1 class="title-content">{{ queryParams.typeModelName }}</h1>
|
||||
<ul class="info-list">
|
||||
<li>
|
||||
<span>设备编码：xxxxx</span>
|
||||
<span>在用</span>
|
||||
<span>机具设备编码：{{ queryParams.maCode }}</span>
|
||||
<span>{{ queryParams.maStatus }}</span>
|
||||
</li>
|
||||
<li>领用工程：xxxxx <span></span></li>
|
||||
<li>定位设备名称：xxxx<span></span></li>
|
||||
<li>设备编号：xxxx<span></span></li>
|
||||
<li>领用工程：{{ queryParams.projectName }} <span></span></li>
|
||||
<li>定位设备编号：{{ queryParams.iotId }}<span></span></li>
|
||||
</ul>
|
||||
<div class="date-select">
|
||||
<el-radio v-model="radio" label="1">当天</el-radio>
|
||||
<el-radio v-model="radio" label="2">本月</el-radio>
|
||||
<el-radio-group v-model="radio" @change="onChangeRadio" ref="radio">
|
||||
<el-radio :label="1">当天</el-radio>
|
||||
<el-radio :label="2">本月</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
v-model="queryForm.date"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="请选择开始日期"
|
||||
end-placeholder="请选择结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="onChangeTime"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="btn-select">
|
||||
<div class="active">行程</div>
|
||||
<div>停留点</div>
|
||||
<div
|
||||
v-for="(item, index) in checkBtnList"
|
||||
:key="index"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="handleCheck(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="location-list">
|
||||
<div>里程：10KM</div>
|
||||
<div>时长：30分种</div>
|
||||
<div class="location-list" v-loading="loading">
|
||||
<template v-if="activeIndex === 0">
|
||||
<template v-if="tripList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in tripList"
|
||||
:key="index"
|
||||
@click="handleTrip(item, index)"
|
||||
class="trip-container"
|
||||
:class="{ activeIndex: activeIndexTrip === index }"
|
||||
>
|
||||
<!-- <div>里程：10KM</div>
|
||||
<div>时长：30分种</div> -->
|
||||
<div class="location-start">
|
||||
<span>
|
||||
<img src="../../../assets/img/start.png" alt="" />
|
||||
2024-07-03 09:11:33
|
||||
<span>
|
||||
{{ item.startTime }}
|
||||
</span>
|
||||
<span>xxxx位置</span>
|
||||
<div>
|
||||
{{ item.startAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="location-start">
|
||||
<span>
|
||||
<img src="../../../assets/img/end.png" alt="" />
|
||||
2024-07-03 09:11:33
|
||||
<span>
|
||||
{{ item.endTime }}
|
||||
</span>
|
||||
<span>xxxx位置</span>
|
||||
<div>{{ item.endAddress }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ loading ? '数据加载中...' : '暂无数据...' }}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="parkList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in parkList"
|
||||
:key="index"
|
||||
class="trip-container"
|
||||
>
|
||||
<div class="location-start">
|
||||
<span>{{ item.startTime }}</span>
|
||||
<span>{{ item.hours }}时{{ item.mints }}分</span>
|
||||
</div>
|
||||
<div>{{ item.address }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ loading ? '数据加载中...' : '暂无数据...' }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-right">
|
||||
|
|
@ -56,20 +103,69 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getIotDeviceTripApi, getIotDeviceParkDetailApi } from '@/api/screen.js'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
props: {
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
radio: 1,
|
||||
value1: [],
|
||||
map: null,
|
||||
trackAni: null,
|
||||
loading: false,
|
||||
checkBtnList: [{ title: '行程' }, { title: '停留点' }],
|
||||
activeIndex: 0,
|
||||
activeIndexTrip: null,
|
||||
// 查询设备行程信息的参数
|
||||
tripParams: {
|
||||
// beginTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
beginTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
iotId: '',
|
||||
},
|
||||
queryForm: {
|
||||
date: [
|
||||
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
},
|
||||
// 行程信息
|
||||
tripList: [],
|
||||
// 停留点信息
|
||||
parkList: [],
|
||||
// 轨迹点
|
||||
linePointList: [
|
||||
{
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
{
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.radio.$children.forEach((item) => {
|
||||
item.$refs.radio.removeAttribute('aria-hidden')
|
||||
})
|
||||
console.log(this.queryParams, '参数---')
|
||||
this.getIotDeviceTripData()
|
||||
this.initMap()
|
||||
},
|
||||
beforeDestroy() {
|
||||
/** 组件销毁之前 先清除地图实例 */
|
||||
// 清除地图上面的标点覆盖物 并清除地图实例
|
||||
// 1. 判断轨迹实例是否存在 如果存在 先强制关闭动画，否则页面报错
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
// 2. 清除地图上面的标点覆盖物 并清除地图实例
|
||||
|
||||
if (this.map) {
|
||||
this.map.clearOverlays()
|
||||
|
|
@ -81,7 +177,10 @@ export default {
|
|||
initMap() {
|
||||
this.$nextTick(() => {
|
||||
this.map = new BMapGL.Map('drawer-map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
let point = new BMapGL.Point(
|
||||
this.queryParams.iotLocationVo.callon,
|
||||
this.queryParams.iotLocationVo.callat
|
||||
) // 创建点坐标
|
||||
// let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
|
|
@ -100,6 +199,160 @@ export default {
|
|||
this.map.addOverlay(marker)
|
||||
})
|
||||
},
|
||||
/** 筛选停留点和行程 */
|
||||
handleCheck(index) {
|
||||
this.activeIndex = index
|
||||
},
|
||||
/** 获取行程信息和停六点信息 */
|
||||
async getIotDeviceTripData() {
|
||||
if (!this.queryForm.date) {
|
||||
this.$message.error('请选择时间范围！')
|
||||
return
|
||||
}
|
||||
|
||||
this.tripParams.iotId = this.queryParams.iotId
|
||||
this.tripParams.beginTime = this.queryForm.date[0]
|
||||
this.tripParams.endTime = this.queryForm.date[1]
|
||||
this.loading = true
|
||||
const res = await getIotDeviceTripApi(this.tripParams)
|
||||
const resS = await getIotDeviceParkDetailApi(this.tripParams)
|
||||
this.loading = false
|
||||
|
||||
this.parkList = resS.data
|
||||
this.parkList.forEach((e) => {
|
||||
e.startTime = moment(parseInt(e.beginTime)).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
)
|
||||
|
||||
e.hours = parseInt(
|
||||
(parseInt(e.endTime) - parseInt(e.beginTime)) / 1000 / 60 / 60
|
||||
)
|
||||
e.mints = parseInt(
|
||||
((parseInt(e.endTime) - parseInt(e.beginTime)) / 1000 / 60) % 60
|
||||
)
|
||||
})
|
||||
let tripInfo = JSON.parse(res.msg)
|
||||
|
||||
let addressList = []
|
||||
if (tripInfo.addressmap) {
|
||||
addressList = Object.keys(tripInfo.addressmap)
|
||||
}
|
||||
|
||||
tripInfo.totaltrips.forEach((e) => {
|
||||
e.startTime = moment(e.trackstarttime).format('YYYY-MM-DD HH:mm:ss')
|
||||
e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
||||
e.drivingDuration = parseInt((e.trackendtime - e.trackstarttime) / 1000)
|
||||
|
||||
addressList.forEach((v) => {
|
||||
if (v.indexOf(e.slat.toString().slice(0, 7)) > -1) {
|
||||
e.startAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
if (v.indexOf(e.elat.toString().slice(0, 7)) > -1) {
|
||||
e.endAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.tripList = tripInfo.totaltrips
|
||||
|
||||
console.log(this.parkList, '停留点信息', this.tripList, '行程信息')
|
||||
},
|
||||
/** 时间选择器 */
|
||||
onChangeTime(val) {
|
||||
if (val) {
|
||||
this.tripParams.beginTime = val[0]
|
||||
this.tripParams.endTime = val[1]
|
||||
}
|
||||
|
||||
this.radio = null
|
||||
this.getIotDeviceTripData()
|
||||
},
|
||||
|
||||
/** 单选框change事件 */
|
||||
onChangeRadio(val) {
|
||||
if (val == 1) {
|
||||
this.queryForm.date = [
|
||||
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
]
|
||||
}
|
||||
if (val == 2) {
|
||||
this.queryForm.date = [
|
||||
moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
]
|
||||
}
|
||||
this.getIotDeviceTripData()
|
||||
},
|
||||
/** 点击查看行程 */
|
||||
handleTrip(item, index) {
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
this.activeIndexTrip = index
|
||||
this.map.clearOverlays()
|
||||
let pointList = []
|
||||
this.linePointList[0].lng = item.slon
|
||||
this.linePointList[0].lat = item.slat
|
||||
this.linePointList[1].lng = item.elon
|
||||
this.linePointList[1].lat = item.elat
|
||||
if (this.linePointList.length === 0) return
|
||||
for (var i = 0; i < this.linePointList.length; i++) {
|
||||
pointList.push(
|
||||
new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat)
|
||||
)
|
||||
}
|
||||
|
||||
// pointList.push(new BMapGL.Point(item.slon, item.slat))
|
||||
// pointList.push(new BMapGL.Point(item.elon, item.elat))
|
||||
let polyline = new BMapGL.Polyline(pointList)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 800, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 500, // 动画开始的延迟，默认0，单位ms
|
||||
})
|
||||
this.trackAni.start()
|
||||
// 设置起点终点图标
|
||||
this.triggerMovement()
|
||||
},
|
||||
// 轨迹运动结束后的回调
|
||||
triggerMovement() {
|
||||
// 轨迹运动结束后获取起点和终点的经纬度坐标
|
||||
let startLatLng = new BMapGL.Point(
|
||||
this.linePointList[0].lng,
|
||||
this.linePointList[0].lat
|
||||
)
|
||||
let endLatLng = new BMapGL.Point(
|
||||
this.linePointList[this.linePointList.length - 1].lng,
|
||||
this.linePointList[this.linePointList.length - 1].lat
|
||||
)
|
||||
|
||||
// 添加起点和终点的图标
|
||||
this.addStartEndMarkers(startLatLng, endLatLng)
|
||||
},
|
||||
// 添加起点和终点的标记
|
||||
addStartEndMarkers(startLatLng, endLatLng) {
|
||||
let startIcon = new BMapGL.Icon(
|
||||
require('@/assets/img/startIcon.png'),
|
||||
new BMapGL.Size(32, 32)
|
||||
)
|
||||
let startMarker = new BMapGL.Marker(startLatLng, {
|
||||
icon: startIcon,
|
||||
})
|
||||
this.map.addOverlay(startMarker)
|
||||
|
||||
let endIcon = new BMapGL.Icon(
|
||||
require('@/assets/img/endIcon.png'),
|
||||
new BMapGL.Size(32, 32)
|
||||
)
|
||||
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
||||
this.map.addOverlay(endMarker)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -121,6 +374,8 @@ export default {
|
|||
border-right: 1px dashed #0098ee;
|
||||
color: #fff;
|
||||
background-color: #030c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
@ -172,35 +427,56 @@ export default {
|
|||
margin: 8px 0;
|
||||
|
||||
div {
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 96px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
cursor: pointer;
|
||||
background: url('../../../assets/img/myImage/no_active.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url('../../../assets/img/sel (1).png') no-repeat;
|
||||
background: url('../../../assets/img/myImage/active.png') no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.location-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.trip-container {
|
||||
margin-bottom: 8px;
|
||||
padding: 15px 10px;
|
||||
border: 1px solid #035ea6;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
padding: 6px 0;
|
||||
// padding: 6px 0;
|
||||
}
|
||||
|
||||
.activeIndex {
|
||||
background-color: #3d4883;
|
||||
}
|
||||
|
||||
.location-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -221,8 +497,29 @@ export default {
|
|||
#drawer-map-container {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-radio-button__inner,
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
*::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
//定义滑块 内阴影+圆角
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.3);
|
||||
}
|
||||
|
||||
//定义滚动条轨道 内阴影+圆角
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,234 @@
|
|||
<template>
|
||||
<div class="drawer-container">
|
||||
<div class="drawer-left">
|
||||
<h1 class="title-content">宁夏至湖南700kv变电工程</h1>
|
||||
<h4 class="address-content">宁夏省吴忠市xxxx</h4>
|
||||
<h1 class="title-content">{{ queryParams.lotName || '' }}</h1>
|
||||
<h4 class="address-content">{{ queryParams.address || '' }}</h4>
|
||||
<h4 class="user-device">在用设备</h4>
|
||||
<ul>
|
||||
<li class="user-num">
|
||||
<span>1524</span>
|
||||
<span>{{ useNumJj }}</span>
|
||||
<img src="../../../assets/img/device.png" />
|
||||
<span>机具设备</span>
|
||||
</li>
|
||||
<li class="user-num">
|
||||
<span>1524</span>
|
||||
<span>{{ useNumTs }}</span>
|
||||
<img src="../../../assets/img/device.png" />
|
||||
<span>调试设备</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4 class="record-title">领料记录</h4>
|
||||
<ul class="device-list">
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
<li v-for="(item, index) in applyList" :key="index">
|
||||
<span>{{ item.createTime.split(' ')[0] }}</span>
|
||||
<span>{{ item.createTime.split(' ')[1] }}</span>
|
||||
<span>{{ item.typeModelName }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4 class="record-title">退料记录</h4>
|
||||
|
||||
<ul class="device-list">
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>2024年5月11日</span>
|
||||
<span>19:23</span>
|
||||
<span>机具设备--</span>
|
||||
<li v-for="(item, index) in returnList" :key="index">
|
||||
<span>{{ item.createTime.split(' ')[0] }}</span>
|
||||
<span>{{ item.createTime.split(' ')[1] }}</span>
|
||||
<span>{{ item.typeModelName }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="drawer-right">
|
||||
<el-row class="search-row">
|
||||
<el-input />
|
||||
<el-select />
|
||||
<el-select />
|
||||
<el-select />
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button>重置</el-button>
|
||||
<el-row style="padding-top: 8px">
|
||||
<el-form inline :model="formParams" ref="formParamsRef">
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="formParams.code"
|
||||
placeholder="请输入领料单号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="unitId">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="formParams.unitId"
|
||||
placeholder="请选择单位"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in uniList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="companyId">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择设备类型"
|
||||
v-model="formParams.companyId"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option label="机具设备" :value="101" />
|
||||
<el-option label="调试设备" :value="102" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData">
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
align="center"
|
||||
label="出库时间"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeName"
|
||||
align="center"
|
||||
label="设备类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeModelName"
|
||||
align="center"
|
||||
label="规格型号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="preNum"
|
||||
align="center"
|
||||
label="出库数量"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeKeepName"
|
||||
align="center"
|
||||
label="设备负责人"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
align="center"
|
||||
label="领料单号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="unitName"
|
||||
align="center"
|
||||
label="领料申请单位"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="proName"
|
||||
align="center"
|
||||
label="领料申请工程"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
:page.sync="formParams.pageNum"
|
||||
:limit.sync="formParams.pageSize"
|
||||
@pagination="getList"
|
||||
/> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formParams.pageNum"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400"
|
||||
popper-class="‘select_bottom’"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import {
|
||||
getProjectOutApi,
|
||||
getUnitListApi,
|
||||
getProjectReturnApi,
|
||||
getProjectDeviceNumApi,
|
||||
} from '@/api/screen.js'
|
||||
import Pagination from '@/components/Pagination/index'
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
},
|
||||
props: {
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [{ demo: '999' }],
|
||||
formParams: {
|
||||
companyId: '',
|
||||
code: '',
|
||||
unitId: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
lotId: '',
|
||||
},
|
||||
uniList: [],
|
||||
applyList: [],
|
||||
returnList: [],
|
||||
useNumJj: 0,
|
||||
useNumTs: 0,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getProjectOutData()
|
||||
this.getUnitListData()
|
||||
},
|
||||
methods: {
|
||||
async getProjectOutData() {
|
||||
console.log(this.queryParams, 'this.queryParams')
|
||||
if (this.queryParams && this.queryParams.lotId) {
|
||||
const res = await getProjectOutApi({ lotId: this.queryParams.lotId })
|
||||
const resS = await getProjectReturnApi({
|
||||
lotId: this.queryParams.lotId,
|
||||
})
|
||||
const resSs = await getProjectDeviceNumApi({
|
||||
lotId: this.queryParams.lotId,
|
||||
})
|
||||
|
||||
this.applyList = res.data.rows
|
||||
this.returnList = resS.data.rows
|
||||
this.useNumJj = resSs.data.useNumJj
|
||||
this.useNumTs = resSs.data.useNumTs
|
||||
}
|
||||
},
|
||||
/** 获取单位数据 */
|
||||
async getUnitListData() {
|
||||
const { data: res } = await getUnitListApi({})
|
||||
this.uniList = res
|
||||
},
|
||||
/** 获取列表数据 */
|
||||
async getList() {
|
||||
this.formParams.lotId = this.queryParams.lotId
|
||||
const res = await getProjectOutApi(this.formParams)
|
||||
this.total = res.data.total
|
||||
this.tableData = res.data.rows
|
||||
},
|
||||
/** 查询按钮 */
|
||||
handleQuery() {
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮 */
|
||||
handleReset() {
|
||||
this.$refs.formParamsRef.resetFields()
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -128,7 +288,7 @@ export default {}
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.user-num span:first-child {
|
||||
|
|
@ -158,12 +318,29 @@ export default {}
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #035ea6;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li span:nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
li span:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
li span:last-child {
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-right {
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
width: 70%;
|
||||
padding-left: 6px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
|
|
@ -172,17 +349,118 @@ export default {}
|
|||
rgba(11, 20, 70, 0.5) 70%,
|
||||
rgba(11, 20, 71, 0.1) 100%
|
||||
);
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/deep/.el-input__inner {
|
||||
width: 200px;
|
||||
margin-right: 6px;
|
||||
/deep/ .el-input__inner {
|
||||
// margin-right: 6px;
|
||||
background-color: #07154a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
// #253855 #30619B 背景色从上到下渐变
|
||||
background: linear-gradient(to bottom, #2b313d, #3267a7) !important;
|
||||
color: #fff !important;
|
||||
border-bottom: 1px solid #84fcfd !important;
|
||||
}
|
||||
/deep/ .el-table tr {
|
||||
background-color: #335684 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #25447d !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/deep/ .el-table td,
|
||||
.building-top .el-table th.is-leaf {
|
||||
border-bottom: 1px solid #6983a5 !important;
|
||||
}
|
||||
/deep/ .el-table::before {
|
||||
border-bottom: 1px solid #6983a5 !important;
|
||||
background-color: #6983a5 !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-pagination__sizes {
|
||||
position: relative;
|
||||
}
|
||||
// /deep/ .pagination-container .el-select-dropdown {
|
||||
// position: absolute !important;
|
||||
// left: 0 !important;
|
||||
// }
|
||||
/deep/ .el-pagination__sizes .el-input .el-input__inner {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-pagination__editor.el-input .el-input__inner {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .btn-next {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #00a5ff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
/deep/ .el-button--primary {
|
||||
background-color: #84fcfd !important;
|
||||
border: #84fcfd !important;
|
||||
color: #285050 !important;
|
||||
}
|
||||
/deep/ .el-button--default {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #84fcfd !important;
|
||||
color: #d5d6da !important;
|
||||
}
|
||||
/deep/ .el-table__empty-block {
|
||||
background-color: transparent !important;
|
||||
.el-table__empty-text {
|
||||
color: #d5d6da !important;
|
||||
}
|
||||
}
|
||||
/deep/ .el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// /deep/ .select_bottom {
|
||||
// z-index: 2008;
|
||||
// position: absolute;
|
||||
// // left: 147px !important;
|
||||
// // top: 355px !important;
|
||||
// margin: 0px;
|
||||
// border: 1px solid #55aaff;
|
||||
// .el-select-dropdown {
|
||||
// }
|
||||
// .el-select-dropdown {
|
||||
// background-color: #ffffff;
|
||||
// }
|
||||
// .el-select-dropdown__item.selected {
|
||||
// color: red;
|
||||
// }
|
||||
|
||||
// .el-select-dropdown__item.hover,
|
||||
// .el-select-dropdown__item:hover {
|
||||
// background: red;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@
|
|||
:direction="direction"
|
||||
size="80%"
|
||||
>
|
||||
<DrawerProject v-if="drawerType === 1" />
|
||||
<DrawerDevice v-else />
|
||||
<DrawerProject :queryParams="queryParams" v-if="drawerType == 1" />
|
||||
<DrawerDevice :queryParams="queryParams" v-else />
|
||||
<img
|
||||
@click="
|
||||
() => {
|
||||
|
|
@ -144,6 +144,8 @@ export default {
|
|||
direction: 'ltr',
|
||||
drawerType: null,
|
||||
maType: 1,
|
||||
// 地图点击时的查询参数
|
||||
queryParams: null,
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
|
@ -173,8 +175,10 @@ export default {
|
|||
// })
|
||||
},
|
||||
methods: {
|
||||
openDrawer(type) {
|
||||
this.drawerType = type
|
||||
openDrawer(query) {
|
||||
this.queryParams = query
|
||||
// console.log(query, 'c参数')
|
||||
this.drawerType = query.type
|
||||
this.drawer = true
|
||||
},
|
||||
routerClick() {
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@
|
|||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
v-if="open"
|
||||
width="600px"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
|
|
@ -306,8 +307,21 @@
|
|||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input disabled v-model="form.latitude" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工程地址" prop="address">
|
||||
<el-input v-model="form.address" />
|
||||
|
||||
<el-form-item
|
||||
label="工程地址"
|
||||
prop="detailsAddress"
|
||||
class="address-ipt"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.province"
|
||||
disabled
|
||||
style="width: 40%"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.detailsAddress"
|
||||
style="width: 60%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -381,6 +395,8 @@ export default {
|
|||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
province: '',
|
||||
detailsAddress: '',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -436,10 +452,10 @@ export default {
|
|||
message: '纬度不能为空',
|
||||
},
|
||||
],
|
||||
address: [
|
||||
detailsAddress: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入工程地址',
|
||||
message: '请输入详细地址',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
|
|
@ -519,6 +535,8 @@ export default {
|
|||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
detailsAddress: '',
|
||||
province: '',
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
|
|
@ -550,6 +568,9 @@ export default {
|
|||
this.reset()
|
||||
ProjectLotList({ lotId: row.lotId }).then((response) => {
|
||||
this.form = response.rows[0]
|
||||
this.form.detailsAddress = this.form.address.split(
|
||||
this.form.province,
|
||||
)[1]
|
||||
})
|
||||
this.open = true
|
||||
this.title = '编辑'
|
||||
|
|
@ -559,6 +580,8 @@ export default {
|
|||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.isLoading = true
|
||||
this.form.address =
|
||||
this.form.province + this.form.detailsAddress
|
||||
if (this.form.lotId != undefined) {
|
||||
updateProjectLot(this.form)
|
||||
.then((response) => {
|
||||
|
|
@ -649,7 +672,8 @@ export default {
|
|||
var pt = e.latlng
|
||||
geoc.getLocation(pt, function (res) {
|
||||
var addComp = res.addressComponents
|
||||
this_.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
|
||||
this_.form.detailsAddress = `${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
|
||||
this_.form.province = `${addComp.province}`
|
||||
this_.form.longitude = e.latlng.lng
|
||||
this_.form.latitude = e.latlng.lat
|
||||
})
|
||||
|
|
@ -663,3 +687,9 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.address-ipt .el-form-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -919,6 +919,7 @@ export default {
|
|||
// console.log(row)
|
||||
let obj = {}
|
||||
this.$set(obj, 'taskId', row.taskId)
|
||||
this.$set(obj, 'companyId', row.companyId)
|
||||
this.$set(obj, 'id', row.id)
|
||||
this.$set(obj, 'manageType', 1)
|
||||
this.$set(obj, 'parentId', row.parentId)
|
||||
|
|
@ -1000,6 +1001,7 @@ export default {
|
|||
outNum: 1,
|
||||
taskId: this.outObj.taskId,
|
||||
createBy: sessionStorage.getItem('userId'),
|
||||
companyId: this.outObj.companyId,
|
||||
}
|
||||
return obj
|
||||
})
|
||||
|
|
|
|||
|
|
@ -254,7 +254,8 @@
|
|||
@click="handleBackup(scope.row)"
|
||||
v-if="
|
||||
!isView &&
|
||||
scope.row.num < (scope.row.preNum - scope.row.finishedBackNum) &&
|
||||
scope.row.num <
|
||||
scope.row.preNum - scope.row.finishedBackNum &&
|
||||
scope.row.backStatus == 0
|
||||
"
|
||||
>
|
||||
|
|
@ -1072,6 +1073,7 @@ export default {
|
|||
this.codeQuery.parentId = row.id
|
||||
this.codeQuery.taskId = row.taskId
|
||||
this.codeQuery.typeId = row.modelId
|
||||
this.codeQuery.companyId = row.companyId
|
||||
this.codeQuery.agreementId = row.agreementId
|
||||
this.dialogIsView = false
|
||||
this.returnNum = Number(row.num)
|
||||
|
|
@ -1086,6 +1088,7 @@ export default {
|
|||
this.$set(row, 'scrapReason', '') //报废原因
|
||||
this.$set(row, 'scrapType', '') //损坏原因
|
||||
this.$set(row, 'fileUrl', '') //损坏图片
|
||||
this.$set(row, 'companyId', row.companyId) // companyId
|
||||
this.returnNum = Number(row.num)
|
||||
this.dialogData.typeMange = row.manageType
|
||||
this.dialogData.typeName = row.typeName
|
||||
|
|
@ -1095,6 +1098,7 @@ export default {
|
|||
this.$set(item, 'qualifiedNum', undefined)
|
||||
this.$set(item, 'serviceNum', undefined)
|
||||
this.$set(item, 'scrapNum', undefined)
|
||||
this.$set(item, 'companyId', row.companyId)
|
||||
})
|
||||
this.dialogData.maTypeDetails = row.maTypeDetails
|
||||
}
|
||||
|
|
@ -1207,6 +1211,7 @@ export default {
|
|||
createBy: this.createBy,
|
||||
backStatus: 1,
|
||||
backNum: item.qualifiedNum,
|
||||
companyId: item.companyId,
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
|
|
@ -1218,6 +1223,7 @@ export default {
|
|||
createBy: this.createBy,
|
||||
backStatus: 2,
|
||||
backNum: item.serviceNum,
|
||||
companyId: item.companyId,
|
||||
}
|
||||
arr.push(obj)
|
||||
}
|
||||
|
|
@ -1232,6 +1238,7 @@ export default {
|
|||
scrapReason: item.scrapReason,
|
||||
scrapType: item.scrapType,
|
||||
fileUrl: item.fileUrl,
|
||||
companyId: item.companyId,
|
||||
}
|
||||
arr.push(obj)
|
||||
|
||||
|
|
@ -1273,6 +1280,7 @@ export default {
|
|||
manageType: 0,
|
||||
createBy: this.createBy,
|
||||
maId: row.maId,
|
||||
companyId: this.codeQuery.companyId,
|
||||
},
|
||||
]
|
||||
let param = {
|
||||
|
|
@ -1495,7 +1503,6 @@ export default {
|
|||
row.num = maxNum
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
innerVisible: {
|
||||
|
|
|
|||
|
|
@ -742,6 +742,11 @@ export default {
|
|||
console.log(row)
|
||||
console.log(this.query.taskId)
|
||||
row.taskId = this.query.taskId
|
||||
|
||||
if (row.manageType == 0 && !row.maCode) {
|
||||
this.$message.error('当前设备未编码，无法审核！')
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
taskId: this.query.taskId,
|
||||
maId: row.maId,
|
||||
|
|
@ -769,6 +774,19 @@ export default {
|
|||
passAll() {
|
||||
console.log(this.query.taskId)
|
||||
console.log(this.ids)
|
||||
let isCode = false
|
||||
try {
|
||||
this.ids.forEach((e, index) => {
|
||||
if (e.manageType == 0 && !e.maCode) {
|
||||
this.$message.error(
|
||||
`序号${index}的设备未编码，请编码后再操作！`,
|
||||
)
|
||||
isCode = true
|
||||
throw new Error()
|
||||
}
|
||||
})
|
||||
} catch (error) {}
|
||||
if (isCode) return
|
||||
this.ids.forEach((item) => {
|
||||
item.taskId = this.query.taskId
|
||||
item.typeId = item.typeId
|
||||
|
|
@ -796,6 +814,10 @@ export default {
|
|||
console.log(row)
|
||||
console.log(this.query.taskId)
|
||||
row.taskId = this.query.taskId
|
||||
if (row.manageType == 0 && !row.maCode) {
|
||||
this.$message.error('当前设备未编码，无法审核！')
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
taskId: this.query.taskId,
|
||||
maId: row.maId,
|
||||
|
|
@ -822,6 +844,20 @@ export default {
|
|||
refusedAll() {
|
||||
console.log(this.query.taskId)
|
||||
console.log(this.ids)
|
||||
let isCode = false
|
||||
try {
|
||||
this.ids.forEach((e, index) => {
|
||||
if (e.manageType == 0 && !e.maCode) {
|
||||
this.$message.error(
|
||||
`序号${index}的设备未编码，请编码后再操作！`,
|
||||
)
|
||||
isCode = true
|
||||
throw new Error()
|
||||
}
|
||||
})
|
||||
} catch (error) {}
|
||||
|
||||
if (isCode) return
|
||||
this.ids.forEach((item) => {
|
||||
item.taskId = this.query.taskId
|
||||
item.typeId = item.typeId
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ module.exports = {
|
|||
// target: `https://test-cc.zhgkxt.com`,//线上环境-南网
|
||||
// target: `https://z.csgmall.com.cn`,
|
||||
|
||||
target: `http://192.168.2.140:28080`, //超
|
||||
target: `http://192.168.2.152:28080`, //超
|
||||
// target: `http://10.40.92.81:28080`, //韩/
|
||||
// target: `http://192.168.2.82:28080`,//旭/
|
||||
// target: `http://192.168.2.248:28080`, //帅
|
||||
|
|
|
|||
Loading…
Reference in New Issue