jianguan
/
yxt-supervise-gd36524-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-11-19

master
guoxing 2 years ago
parent
ab38cede57
commit
6bc32c75a2
7 changed files with 1711 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/api/gd36524/allData.js
  2. 10
      src/router/index.js
  3. 139
      src/views/echarts/barlineEacharts2.vue
  4. 168
      src/views/echarts/pieLineEacharts2.vue
  5. 1276
      src/views/mortgage/allData.vue
  6. 53
      src/views/mortgage/index2.vue
  7. 6
      src/views/mortgage/yqpb.vue

66
src/api/gd36524/allData.js
View File

@ -0,0 +1,66 @@
import request from '@/utils/request'
export default {
// 左侧数据总览
getProjectDaily: function(data) {
return request({
url: '/datacenter/getProjectDailyNew',
method: 'post',
data: data
});
},
// 库存分析图 ,
getReportInventory: function(data) {
return request({
url: '/datacenter/getReportInventoryNew',
method: 'post',
data: data
});
},
// 获取基础信息 ,
getProjectBySid: function(data) {
return request({
url: '/datacenter/getProjectBySid?projectSid='+data,
method: 'get',
data: data
});
},
// 获取仓库sid,
getProjectIsJk: function(data) {
return request({
url: '/datacenter/getProjectIsJk?projectSid='+data,
method: 'get'
});
},
// 获取摄像头 设备列表,
getOtherList: function(data) {
return request({
url: '/datacenter/getOtherList?type=1&ckId='+data,
method: 'get'
});
},
// 实时监控 ,
getVedioPcLiveById: function(data) {
return request({
url: '/datacenter/getVedioPcLiveByIdNew?id=' + data,
method: 'get'
});
},
// 回放监控 ,
getVedioPcRecById: function(data) {
return request({
url: '/datacenter/getVedioPcRecByIdNew?id=' + data,
method: 'get'
});
},
}

10
src/router/index.js
View File

@ -59,11 +59,21 @@ export const constantRoutes = [
name:'mortgage', name:'mortgage',
component:()=>import('@/views/mortgage/index.vue') component:()=>import('@/views/mortgage/index.vue')
}, },
{
path:"/mortgage2",
name:'mortgage2',
component:()=>import('@/views/mortgage/index2.vue')
},
{ {
path:"/yqpb", path:"/yqpb",
name:'yqpb', name:'yqpb',
component:()=>import('@/views/mortgage/yqpb.vue') component:()=>import('@/views/mortgage/yqpb.vue')
}, },
{
path:"/allData",
name:'allData',
component:()=>import('@/views/mortgage/allData.vue')
},
// 404 page must be placed at the end !!! // 404 page must be placed at the end !!!
// { path: '*', redirect: '/404', hidden: true } // { path: '*', redirect: '/404', hidden: true }

139
src/views/echarts/barlineEacharts2.vue
View File

@ -0,0 +1,139 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
// require('echarts/theme/macarons') // echarts theme
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
height: {
deep: true,
handler(val) {
console.log(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({
title,
xAxis,
series,
legend,
unit,
rotate,
time,
serviceData,
serviceData2,
} = {}) {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid:{
show:false,
top:'20%',
right:'5%',
bottom:'10%',
left:'20%'
},
legend: {
textStyle: {
color: '#fff',
fontSize: 16,
padding: [0, 10]
},
},
xAxis: {
type: 'category',
data: this.chartData.date,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 16,
}
}
},
yAxis: [{
type: 'value',
name: '人民币/元',
min: 10000,
max: 250000000,
interval: 50000000,
axisLabel: {
formatter: '{value} 元',
textStyle: {
color: '#fff',
fontSize: 18,
}
},
align:'right',//看这里
}],
series: [{
data: this.chartData.amount,
type: 'bar'
}]
});
this.chart.on("click", function(param) {
this.callParents(param);
});
},
// 调用父组件
callParents(name) {
this.$emit("pieChartFunction", name);
},
},
};
</script>

168
src/views/echarts/pieLineEacharts2.vue
View File

@ -0,0 +1,168 @@
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
// require('echarts/theme/macarons') // echarts theme
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
height: {
deep: true,
handler(val) {
console.log(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({
title,
xAxis,
series,
legend,
unit,
rotate,
time,
serviceData,
serviceData2,
} = {}) {
this.chart.setOption({
title: [
{
text: this.chartData.pledgeRatePercent+"%",
subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
textStyle:{
fontSize:20,
color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
},
subtextStyle: {
fontSize: 18,
color: '#bbbaba'
},
textAlign:"center",
x: '30%',
y: '48%',
}],
tooltip: {
trigger: 'item',
formatter:function (parms){
var str=
parms.marker+""+parms.data.name+"</br>"+
"价值："+ parms.data.value+"</br>"+
"占比："+ parms.percent+"%";
return str ;
}
},
legend: {
type:"plain",
icon:'rect',
y: 'center',
x:"right",
orient: 'vertical',
left:'65%',
align:'left',
top:'50',
itemGap:50,
padding:[20,0,20,10],
textStyle: {
color:'#fff',
fontSize:18,
padding:[0,5]
},
height:'auto',
itemWidth:20,
itemHeight:20
},
series: [
{
name:'标签',
type:'pie',
center: ['31%', '55%'],
radius: ['45%', '70%'],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
normal: {
show: false,
}
},
labelLine: {
normal: {
length:5,
length2:3,
smooth:true,
}
},
data: this.chartData.data
// [
// {value:335, legendname:'种类01',name:"账户余额",itemStyle:{color:"#5087ec"}},
// {value:310, legendname:'种类02',name:"应收账款",itemStyle:{color:"#68bbc4"}},
// {value:234, legendname:'种类03',name:"物质库存价值",itemStyle:{color:"#58a55c"}},
// {value:154, legendname:'种类04',name:"在途货物价值",itemStyle:{color:"#f2bd42"}},
// {value:335, legendname:'种类05',name:"预付款",itemStyle:{color:"#ee752f"}},
// ]
}
]
});
this.chart.on("click", function (param) {
this.callParents(param);
});
},
// 调用父组件
callParents(name) {
this.$emit("pieChartFunction", name);
},
},
};
</script>

1276
src/views/mortgage/allData.vue
View File

File diff suppressed because it is too large

53
src/views/mortgage/index - 副本.vue → src/views/mortgage/index2.vue
View File

@ -259,10 +259,13 @@
}], }],
wareValue: "常温仓", wareValue: "常温仓",
day: [{ day: [{
value: "选项1", value: "7",
label: "7日",
}, {
value: "15",
label: "15日", label: "15日",
}], }],
dayValue: "15日", dayValue: "15",
dialogVisible: false, dialogVisible: false,
videos: true, videos: true,
lookvideo: false, lookvideo: false,
@ -300,9 +303,40 @@
date:[], date:[],
changwencang:[], changwencang:[],
gongyinglian:[], gongyinglian:[],
},
// 跳转接参
params:{
projectSid :'',
projectName:"",
orderDate:"",
} }
}; };
}, },
mounted() {
// 获取url中的参数
const searchParams = new URLSearchParams(/(?<=#.*\?).*/.exec(window.location.href)[0]);
console.log("searchParams>>>>",searchParams)
// 根据参数名获取参数值
const projectSid = searchParams.get('projectSid');
const projectName = searchParams.get('projectName');
const orderDate = searchParams.get('orderDate');
console.log("projectSid>>>>",projectSid)
console.log("projectName>>>>",projectName)
console.log("orderDate>>>>",orderDate)
this.params={
projectSid:projectSid,
projectName:projectName,
orderDate:orderDate,
}
this.times = orderDate
},
created() { created() {
this.loadList() this.loadList()
this.getOtherList(); this.getOtherList();
@ -312,7 +346,15 @@
}, },
methods: { methods: {
getReportInventory(){ getReportInventory(){
req.getReportInventory().then(res => {
var params = {
startDate: this.times,
intervalTime: this.dayValue,
projectSid:this.params.projectSid
}
console.log('params:', params)
req.getReportInventory(params).then(res => {
console.log('getReportInventory:', res) console.log('getReportInventory:', res)
this.chartData2 = { this.chartData2 = {
@ -388,7 +430,8 @@
loadList() { loadList() {
var params = { var params = {
orderDate: this.times orderDate: this.times,
projectSid:this.params.projectSid
} }
console.log('params:', params) console.log('params:', params)
@ -468,6 +511,7 @@
this.times = val this.times = val
this.loadList() this.loadList()
this.getInventory() this.getInventory()
this.getReportInventory()
// this.getOtherList(); // this.getOtherList();
// this.getStatusCount(); // this.getStatusCount();
}, },
@ -503,6 +547,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mortgage { .mortgage {
background-color: #040C2B;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;

6
src/views/mortgage/yqpb.vue
View File

@ -227,11 +227,11 @@
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn2" @click="cameraClock(1)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn2" @click="cameraClock(1)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn3" @click="cameraClock(2)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn3" @click="cameraClock(2)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn4" @click="cameraClock(3)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn4" @click="cameraClock(3)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn5" @click="cameraClock(4)" /> <!-- <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn5" @click="cameraClock(4)" /> -->
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn6" @click="cameraClock(5)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn6" @click="cameraClock(5)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn7" @click="cameraClock(6)" /> <!-- <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn7" @click="cameraClock(6)" /> -->
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn8" @click="cameraClock(7)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn8" @click="cameraClock(7)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn9" @click="cameraClock(8)" /> <!-- <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn9" @click="cameraClock(8)" /> -->
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn10" @click="cameraClock(9)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn10" @click="cameraClock(9)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn11" @click="cameraClock(10)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn11" @click="cameraClock(10)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn12" @click="cameraClock(11)" /> <img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn12" @click="cameraClock(11)" />

Write Preview
Loading…
Cancel
Save