diff --git a/src/api/index.ts b/src/api/index.ts index 4d82f62..22dea66 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -21,6 +21,10 @@ export interface GET_FIRE_OR_FLOOD_PARAM { warehouseId: number; // 仓库id } +export interface GET_HEAT_IMAGING_PARAM { + id: number; // 热成像设备id +} + // 查询仓库列表及仓库下的摄像头 export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param }); @@ -32,3 +36,6 @@ export const getMbpsByTime = (param: GET_MBPS_BY_TIME_PARAM) => http.post('/mbps // 查询火灾水灾警报 export const getFireOrFlood = (param: GET_FIRE_OR_FLOOD_PARAM) => http.post('/mbps/selFireOrFlood', { param }); + +// 查询热成像信息 +export const getHeatImaging = (param: GET_HEAT_IMAGING_PARAM) => http.post('/mbps/selHeatImaging', { param }); diff --git a/src/assets/img/monitor-left.png b/src/assets/img/monitor-left.png new file mode 100644 index 0000000..4ce44b5 Binary files /dev/null and b/src/assets/img/monitor-left.png differ diff --git a/src/assets/img/monitor.png b/src/assets/img/monitor.png new file mode 100644 index 0000000..c18263a Binary files /dev/null and b/src/assets/img/monitor.png differ diff --git a/src/components/amount.vue b/src/components/amount.vue index de7f0ed..b6ec1a0 100644 --- a/src/components/amount.vue +++ b/src/components/amount.vue @@ -57,7 +57,28 @@ export default defineComponent({ }, }, + watch: { + carOfInLists: { + deep: true, + handler(value) { + if (value) { + this.getOptions(); + } + }, + }, + + carOfOutLists: { + deep: true, + handler(value) { + if (value) { + this.getOptions(); + } + }, + }, + }, + created() { + this.getMbpsByTime(); setInterval(() => { // 获取数据 this.getMbpsByTime(); @@ -87,7 +108,7 @@ export default defineComponent({ this.carOfInLists = data.carOfInsByTime; this.carOfOutLists = data.carOfOutsByTime; // 绘制图表 - this.getOptions(); + // this.getOptions(); } catch (error) { console.log("error: ", error); } @@ -109,7 +130,7 @@ export default defineComponent({ }, }, grid: { - left: "0", + left: "7%", right: "6%", top: "15%", bottom: "0", @@ -117,12 +138,25 @@ export default defineComponent({ }, xAxis: { type: "category", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, boundaryGap: false, data: timeArray, }, yAxis: { type: "value", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, name: "数量", + nameTextStyle: { + color: "#fff", + }, min: 0, splitLine: { show: true, diff --git a/src/components/curve.vue b/src/components/curve.vue index 40182a3..44d14e1 100644 --- a/src/components/curve.vue +++ b/src/components/curve.vue @@ -69,7 +69,28 @@ export default defineComponent({ }, }, + watch: { + weightOfInLists: { + deep: true, + handler(value) { + if (value) { + this.getOptions(); + } + }, + }, + + weightOfOutLists: { + deep: true, + handler(value) { + if (value) { + this.getOptions(); + } + }, + }, + }, + created() { + this.getMbpsByTime(this.currentIndex); setInterval(() => { // 获取数据 this.getMbpsByTime(this.currentIndex); @@ -105,7 +126,7 @@ export default defineComponent({ this.weightOfInLists = data.weightOfInsByTime; this.weightOfOutLists = data.weightOfOutsByTime; // 绘制图表 - this.getOptions(); + // this.getOptions(); } catch (error) { console.log("error: ", error); } @@ -135,12 +156,25 @@ export default defineComponent({ }, xAxis: { type: "category", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, boundaryGap: false, data: timeArray, }, yAxis: { type: "value", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, name: "重量（吨）", + nameTextStyle: { + color: "#fff", + }, min: 0, splitLine: { show: true, diff --git a/src/components/finance.vue b/src/components/finance.vue index a30c6c6..28969ac 100644 --- a/src/components/finance.vue +++ b/src/components/finance.vue @@ -44,11 +44,24 @@ export default defineComponent({ }, xAxis: { type: "category", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, data: ["2016", "2017", "2018", "2019", "2020"], }, yAxis: { type: "value", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, name: "万", + nameTextStyle: { + color: "#fff", + }, splitLine: { show: true, lineStyle: { @@ -60,6 +73,7 @@ export default defineComponent({ { data: [300, 250, 280, 220, 290], type: "bar", + barCategoryGap: "50%", itemStyle: { barBorderRadius: [10, 10, 0, 0], //柱形图圆角，初始化效果 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ diff --git a/src/components/footer-bar.vue b/src/components/footer-bar.vue index c1f2eaa..112003a 100644 --- a/src/components/footer-bar.vue +++ b/src/components/footer-bar.vue @@ -65,7 +65,6 @@ export default defineComponent({ } }); this.$router.push({ path: item.path, query: item.param }); - this.$emit("showMonitor"); }, }, }); diff --git a/src/components/heat.vue b/src/components/heat.vue new file mode 100644 index 0000000..6123fc1 --- /dev/null +++ b/src/components/heat.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/components/humidity.vue b/src/components/humidity.vue index 54006b9..00b639b 100644 --- a/src/components/humidity.vue +++ b/src/components/humidity.vue @@ -104,10 +104,24 @@ export default defineComponent({ }, xAxis: { type: "category", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, data: timeArray, }, yAxis: { type: "value", + name: "%RH", + nameTextStyle: { + color: "#fff", + }, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, splitLine: { show: true, lineStyle: { diff --git a/src/components/memorabilia.vue b/src/components/memorabilia.vue index f640e9a..291024c 100644 --- a/src/components/memorabilia.vue +++ b/src/components/memorabilia.vue @@ -1,69 +1,76 @@ - diff --git a/src/components/side-item.vue b/src/components/side-item.vue index ad49458..519ab26 100644 --- a/src/components/side-item.vue +++ b/src/components/side-item.vue @@ -29,6 +29,6 @@ export default defineComponent({ } .box-bg { - background: rgba(0, 0, 0, 0.3); + /* background: rgba(0, 0, 0, 0.3); */ } diff --git a/src/components/statistics.vue b/src/components/statistics.vue new file mode 100644 index 0000000..ea62952 --- /dev/null +++ b/src/components/statistics.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/components/temperature.vue b/src/components/temperature.vue index 20b3195..211f6bf 100644 --- a/src/components/temperature.vue +++ b/src/components/temperature.vue @@ -104,10 +104,24 @@ export default defineComponent({ }, xAxis: { type: "category", + axisLabel: { + textStyle: { + color: "#fff", + }, + }, data: timeArray, }, yAxis: { type: "value", + name: "℃", + nameTextStyle: { + color: "#fff", + }, + axisLabel: { + textStyle: { + color: "#fff", + }, + }, splitLine: { show: true, lineStyle: { diff --git a/src/components/totalCargo.vue b/src/components/totalCargo.vue index ac2f238..2b08702 100644 --- a/src/components/totalCargo.vue +++ b/src/components/totalCargo.vue @@ -33,69 +33,116 @@ export default defineComponent({ series: [ { type: "gauge", - startAngle: 90, - endAngle: -270, + center: ["50%", "60%"], + startAngle: 200, + endAngle: -20, + min: 0, max: 10000, - pointer: { - show: false, + splitNumber: 5, + itemStyle: { + color: "#FFAB91", }, progress: { show: true, - overlap: false, - roundCap: true, - clip: false, - itemStyle: { - borderWidth: 1, - borderColor: "#ccc", - color: "#FAC858", - }, + width: -20, + }, + + pointer: { + show: false, }, axisLine: { lineStyle: { - width: 50, + width: -20, }, }, axisTick: { - show: true, + distance: 30, + splitNumber: 5, + lineStyle: { + width: 2, + color: "#999", + }, }, splitLine: { - length: 15, + distance: 30, + length: 14, lineStyle: { - width: 2, + width: 3, color: "#999", }, }, axisLabel: { - distance: 60, + show: false, + distance: 0, color: "#999", fontSize: 20, }, + anchor: { + show: false, + }, + title: { + fontSize: 14, + color: "#fff", + lineHeight: 34, + padding: [0, 6], + borderColor: "#fff", + borderWidth: 1, + borderRadius: 15, + }, + detail: { + valueAnimation: true, + width: "60%", + lineHeight: 40, + height: "15%", + borderRadius: 8, + offsetCenter: [0, "-15%"], + fontSize: 18, + fontWeight: "bolder", + color: "auto", + }, data: [ { value: 4530.88, - name: "Perfect", + name: "总货物", title: { - offsetCenter: ["0%", "-30%"], + offsetCenter: ["0%", "-10%"], }, detail: { - offsetCenter: ["0%", "-20%"], - }, - itemStyle: { - color: "#FAC858", + offsetCenter: ["0%", "70%"], }, }, ], - title: { - fontSize: 18, + }, + + { + type: "gauge", + center: ["50%", "60%"], + startAngle: 200, + endAngle: -20, + min: 0, + max: 60, + itemStyle: { + color: "#FD7347", }, - detail: { - width: 50, - height: 14, - fontSize: 14, - color: "auto", - borderColor: "auto", - borderRadius: 20, - borderWidth: 1, + progress: { + show: true, + width: 8, + }, + + pointer: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, }, }, ], diff --git a/src/views/jht.vue b/src/views/jht.vue index a2e010d..229efcb 100644 --- a/src/views/jht.vue +++ b/src/views/jht.vue @@ -39,6 +39,13 @@ + +
摄像头监控视频
@@ -97,16 +104,24 @@ export default defineComponent({ showIndex: 0, }; }, - methods: { - showMonitor() { - console.log("显示"); - this.show = true; - }, - }, + methods: {}, });