From 8886d8308b83a69ae581c464243becd1e5732eda Mon Sep 17 00:00:00 2001 From: Rain <904416525@qq.com> Date: Fri, 15 Nov 2024 16:03:04 +0800 Subject: [PATCH] =?UTF-8?q?2024-11-15=20=E6=B1=BD=E8=BD=A6=E5=90=8A-?= =?UTF-8?q?=E5=B1=A5=E5=B8=A6=E5=90=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/cathangCrane.ts | 65 ++ .../images/trackCrane/Frame-2024-17.png | Bin 0 -> 434 bytes src/assets/images/trackCrane/Group 15.png | Bin 0 -> 2235 bytes src/assets/images/trackCrane/Group 16.png | Bin 0 -> 3344 bytes .../cathangCrane/StattrackLine.vue | 237 +++-- .../sevenLargeScreen/cathangCrane/index.vue | 831 ++++++++++++++++-- src/views/sevenLargeScreen/indexL.vue | 27 +- .../trackCrane/StattrackLine.vue | 236 +++-- .../sevenLargeScreen/trackCrane/index.vue | 677 ++++++++++++-- 9 files changed, 1696 insertions(+), 377 deletions(-) create mode 100644 src/api/modules/cathangCrane.ts create mode 100644 src/assets/images/trackCrane/Frame-2024-17.png create mode 100644 src/assets/images/trackCrane/Group 15.png create mode 100644 src/assets/images/trackCrane/Group 16.png diff --git a/src/api/modules/cathangCrane.ts b/src/api/modules/cathangCrane.ts new file mode 100644 index 0000000..0b3f9cf --- /dev/null +++ b/src/api/modules/cathangCrane.ts @@ -0,0 +1,65 @@ +import http from "@/api"; +const BASEURL = import.meta.env.VITE_API_URL; + +// 汽车吊 + +// 列表查询 +export const gettrucklist = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCrane/list`, params); +}; + +// 列表查询单条 +export const gettruckqueryById = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCrane/queryById`, params); +}; + +// 查询最新状态 +export const gettruckdata = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCraneCurrentData/getNewData`, params); +}; + +// 设备情况汇总 +export const gettruckstat = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCrane/onlineStat`, params); +}; + +// 设备报警分析 +export const gettruckAlam = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCraneAlarm/alarmStat`, params); +}; + +// 图表分析 +export const gettruckend = (params: {}) => { + return http.post(BASEURL + `/xmgl/truckCraneCurrentData/windSpeedTrend`, params); +}; + +// 履带吊 +// 列表查询 +export const getcrawlist = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCrane/list`, params); +}; + +// 列表查询单条 +export const getcrawqueryById = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCrane/queryById`, params); +}; + +// 查询最新状态 +export const getcrawdata = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCraneCurrentData/getNewData`, params); +}; + +// 设备情况汇总 +export const getcrawstat = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCrane/onlineStat`, params); +}; + +// 设备报警分析 +export const getcrawAlam = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCraneAlarm/alarmStat`, params); +}; + +// 图表分析 +export const getcrawend = (params: {}) => { + return http.post(BASEURL + `/xmgl/crawlerCraneCurrentData/windSpeedTrend`, params); +}; diff --git a/src/assets/images/trackCrane/Frame-2024-17.png b/src/assets/images/trackCrane/Frame-2024-17.png new file mode 100644 index 0000000000000000000000000000000000000000..9028390e44b9136539c18d0937ec6133f843d0ba GIT binary patch literal 434 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%0AV1xe}IB# zCI*y2697gdI^z^Xc#po#K-AwEG`i2)jfbCpUVL`PKs#t2MdajYGO+pYOAR!KQTY5l zwHcs5-`bJ4b;dph$k8w)@}5YvJ z-Cv(Rkq0Fef6G;-p_v@VL08_au@UX#LCH*`BN}W6mLf1RNQ=QG`evqK^OXSs2C{+m zXH;+)>!RLx%C>_i~4!Anf@_;>{wMxuA{yk};Vn5F_6o0tHk zl23za4D-WQ^HhT7Hy=Oz;%6VorzKKK20Wg+fB)fcProf@mx3bR8?(x}G*1i=Fikd3 zn6(U=f_;d#+3YnzbFQ<2g2qgzKW)uCF_>oOF=IH>D1$LLm`!89G8VChGLM4E*k-{z zG1F+fdTL>w)p`UVMzJpl;Vd!$y)?tZ*(Bz`Y_2g) z%csF8uK6@JP7S8X%n{~_?>G4j3Yzf2{JhLGO)~_>eNe}`E6fv~lPpL9n(%9qNz?Od zevN{s<@^l#=Xo#rfNeUTT;=E>e^0tb8?Hcve!CAZ_( z5gw{cV~?o!;3u+^ZR~`$?`E3I8yR*fdP1Z`16c!-0qyKjQC~(udW?OB!dWIJLWE@_ z0%w>3f)LaP+ZV5(Gw4vvrgy;6oNDR05o^=GNFK zIm59D_N#=(7?3cFp;-&N?<+zE;It_zk3)5tl ziJ1*nA(mNkgzcpe)6{gDT3D>tY}IM}mS!P$OQ(U!v3qlnfm90fM0!pwdg6f()*>^N z9bt?YLh^!H7NRHBX>M|aP26*)0h8EFXNQ&sF#H^H{`B0;D9_euNV~x-p6N8n5yp$n z=Be1OG0lQb(_$lIF!oP4?0%+BqvmNAg}s1IQ;2;@r+KZ3;4J7g zV4JE=Q)3#pA@FOMwQMdAqnR1|y{6N!nCDCr?DICvlY)lBXdAEv(8S@S(}2ay9Na1H zy_inJ&v2to^De|aHc!xL)bxaJvIZJfo81I z3b{#rW)|6`(=3R4JSfmap-?=o$kK>nrMH5@=NYMJhnssOdCjdi**|Jvh2q*fXFdrqSr>(07GS!+?A% zIt^#IZ2&9cp6x%3>j_H_U9)*&={_PTXhH-S?jM7fBc82k1RG#tu~|a35w4qdgH%XP zSlWn}Y_pU`@YC&@oO`OK5j0`RjO8JB0B%jENlde((>UR5OIUt3ekr5;r7VqD5%)|8 zBURW2pcXwILMOZnFu$X(g!8~dIw~Ko=Qq!!q*{(pSG0n!1+h)NF7Gbq? znqZlR-!U^!G`L%eunagjUs%S+ zKIEM+8b~D|VM)nImfu@UQ!S0~fn{fSD`w`aLgPebNu ztq99rX|vLtid=HwR{>o%ue@>It|QI;fv(x=?0yqU@QVm5mHlW zL>Pcd5f(}#qQL8gzDBS<<8zfp^z>YvCNv$7EI2z3pP{PLXqjm)?oPEiRUgKIlEuBO z(_p}%(*(;>B6P-JDa*}{X|p^cfujp>IbehA~!g3F}xeTIEg)1eX z0L{{OPct1ReZo>Z9@Jg?cx+4VsRE7}h`5|1vkEgihDsTs&mfY0OVfMOb!n4!PZ-HoEmsLhLsKD;Jih`rx2v z|6w4dA}kK4vrbbpBj&4&qr5~B7C&>XGy;CnQpl~oPMEZmkhJzU6k*}CW)aqcP7|i^ z**c96HXg%EU`a> z!sc-!|Fl|!wM7xu4(`%vT-<~C*-}sQ`mr4G)9c4_)5}=XX=nwB*N^2II?YVUWr6SY zW4Q@vuOG{mWuo8fkL5lazLH({wdl%MSaAw$bD@>6baf>?2P|VNLg|7>lQUy~vF$5I z>Gigv7CVrGuc+ncU?nT8d}X@OFfHeyi$JZegr)8HYE*f}tZ=e*#VkL^`sqaux>}WA zn^(fpRj}+G_=;S!6}8;|;%AGMym%$7f%NiU`E~cNV&9*~4`pu)U3gTBXvb?i^7qcT z*gm>q9fk|559ODO*T(0oQ5j3+^Yi!3xzL+GVNI&8g~42ClncDwNiB-CQ!+E0)yhIc zHu%XoEtU#_SL-iIpABV~@#53{SHFhzwQ$b-QF4A$ a9_oLjpY&Z3cuE%l0000 import * as echarts from "echarts"; import { onMounted, ref } from "vue"; -import { getExceedSpeedTrend } from "@/api/modules/vehicle"; +import { gettruckend } from "@/api/modules/cathangCrane"; import { GlobalStore } from "@/stores"; const store = GlobalStore(); let y = ref([150, 230, 224, 218, 135, 147, 260]); -let x = ref(["09.24", "09.25", "09.26", "09.27", "09.28", "09.29", "09.30"]); +let x = ref(); + +const servedata = ref([ + { + name: "暂无数据", + type: "line", + data: [0, 0, 0, 0], + // 折线变得圆滑 + smooth: true, + // 把点去掉 + showSymbol: true, + lineStyle: { + width: 3, + color: "#42b2f1" + }, + itemStyle: { + color: "#0368FF" + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(32, 102, 179, 0.4)" + }, + { + offset: 1, + color: "rgba(55, 167, 232, 0.4)" + } + ]) + } + } +]); onMounted(async () => { - await ongetExceedSpeedTrend(); + await ongetExceedSpeedTrend(1); +}); + +const ongetExceedSpeedTrend = async item => { + const res: any = await gettruckend({ + projectSn: store.sn, + selectType: item + }); + + console.log("一周内统计", res); + + if (res.result.length > 0) { + x.value = res.result[0].windSpeed.map(v => v.dayTitle); + console.log("======x.value======", x.value); + + servedata.value = res.result.map(item => { + return { + name: item.deviceName, + type: "line", + data: item.windSpeed.map(v => v.windSpeed), + // 折线变得圆滑 + smooth: true, + // 把点去掉 + showSymbol: true, + lineStyle: { + width: 3, + color: "#42b2f1" + }, + itemStyle: { + color: "#0368FF" + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(32, 102, 179, 0.4)" + }, + { + offset: 1, + color: "rgba(55, 167, 232, 0.4)" + } + ]) + } + }; + }); + } else { + x.value = ["00", "00", "00", "00"]; + // servedata.value = []; + } + const chartContainer = echarts.init(document.getElementById("charttrackContainer")); const option = { // 提示框 @@ -22,23 +102,11 @@ onMounted(async () => { //触发类型 trigger: "axis", // 提示框的背景颜色 - backgroundColor: "#2561d7", + backgroundColor: "rgba(173, 198, 255, 0.50)", // 提示框边框厚度 borderWidth: 0, // 提示款边框颜色 borderColor: "#ccc", - formatter: function (params) { - console.log("params", params); - - // params 是一个数组，包含了当前悬浮点的所有数据信息 - let result = ""; - params.forEach(function (item) { - console.log("item", item); - - result += "日期" + item.axisValue + "
" + item.seriesName + ": " + item.value; - }); - return result; - }, // 提示框字体颜色 textStyle: { color: "#fff" @@ -76,11 +144,12 @@ onMounted(async () => { itemWidth: 13, itemHeight: 3, right: "10%", - top: 0 + top: 0, + type: servedata.value.length > 5 ? "scroll" : "" }, xAxis: { type: "category", - data: x, + data: x.value, boundaryGap: false, axisTick: { show: false @@ -105,6 +174,26 @@ onMounted(async () => { } } }, + dataZoom: { + type: "slider", // 滑动条类型 + show: true, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条 + startValue: 0, // 展示区域内容的起始数值 + endValue: 6, // 展示区域内容的结束数值 + height: 6, // 滑动条组件高度 + bottom: 0, // 距离图表区域下边的距离 + showDetail: false, // 拖拽时是否显示详情 + showDataShadow: false, // 是否在组件中显示数据阴影 + fillerColor: "#6fd7f6", // 平移条的填充颜色 + borderColor: "transparent", // 边框颜色 + zoomLock: true, // 锁定视图 + brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观 + // 通过该属性可以只滑动，不显示缩放功能 + handleStyle: { + // 手柄样式 + opacity: 0 + // borderRadius: 20 + } + }, yAxis: { type: "value", splitNumber: 5, @@ -132,87 +221,43 @@ onMounted(async () => { } } }, - series: [ - { - name: "履带吊", - type: "line", - stack: "Total", - areaStyle: {}, - emphasis: { - // focus: 'series' - }, - data: y, - // 折线变得圆滑 - smooth: true, - // 把点去掉 - showSymbol: true, - lineStyle: { - width: 3, - color: "#42b2f1" - }, - itemStyle: { - color: "#0368FF" - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(32, 102, 179, 0.4)" - }, - { - offset: 1, - color: "rgba(55, 167, 232, 0.4)" - } - ]) - } - }, - { - name: "履带吊测试", - type: "line", - stack: "Total", - areaStyle: {}, - emphasis: { - // focus: 'series' - }, - data: y, - // 折线变得圆滑 - smooth: true, - // 把点去掉 - showSymbol: true, - lineStyle: { - width: 3, - color: "#42b2f1" - }, - itemStyle: { - color: "#0368FF" - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "rgba(32, 102, 179, 0.4)" - }, - { - offset: 1, - color: "rgba(55, 167, 232, 0.4)" - } - ]) - } - } - ] + series: servedata.value + // { + // name: "履带吊", + // type: "line", + // data: y, + // // 折线变得圆滑 + // smooth: true, + // // 把点去掉 + // showSymbol: true, + // lineStyle: { + // width: 3, + // color: "#42b2f1" + // }, + // itemStyle: { + // color: "#0368FF" + // }, + // areaStyle: { + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { + // offset: 0, + // color: "rgba(32, 102, 179, 0.4)" + // }, + // { + // offset: 1, + // color: "rgba(55, 167, 232, 0.4)" + // } + // ]) + // } + // } }; chartContainer.setOption(option); -}); - -const ongetExceedSpeedTrend = async () => { - const res: any = await getExceedSpeedTrend({ - projectSn: store.sn - }); - - console.log("一周内统计", res); - y = res.result.map(item => item.y); - x = res.result.map(item => item.x); }; + +// 导出方法，以便父组件可以访问 +defineExpose({ + ongetExceedSpeedTrend +});