Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision
| | |
| | | npm-debug.log*
|
| | | yarn-debug.log*
|
| | | yarn-error.log*
|
| | | package-lock.json
|
| | |
|
| | | # Editor directories and files
|
| | | .idea
|
| | |
| | | "echarts": "^5.5.0",
|
| | | "element-ui": "^2.15.14",
|
| | | "ezuikit-js": "^7.7.10",
|
| | | "html2canvas": "^1.4.1",
|
| | | "moment": "^2.29.4",
|
| | | "qs": "^6.11.2",
|
| | | "vue": "^2.6.10",
|
| | | "html2canvas": "^1.4.1",
|
| | | "vue-cookies": "^1.8.3",
|
| | | "vue-router": "^3.6.5",
|
| | | "vuex-persistedstate": "^4.1.0"
|
| | |
| | | Vue.use(ElementUI)
|
| | | Vue.prototype.$cookies = cookies;
|
| | | Vue.prototype.$baseURL = apiConfig.baseURL
|
| | | Vue.prototype.$mapKey = apiConfig.mapKey
|
| | | Vue.prototype.$secretKey = apiConfig.secretKey
|
| | | Vue.config.productionTip = false
|
| | | /* 全局TableHeight */
|
| | | Vue.prototype.$baseTableHeight = (formType) => {
|
| | |
| | | // 开发环境 |
| | | development: { |
| | | baseURL: "", |
| | | mapKey: "67968c82f27c7e2cb9f40c1a9aa3042b", |
| | | secretKey: "37ce61ae86efa5ad82b649a277f5097c", |
| | | }, |
| | | // 生产环境 |
| | | production: { |
| | |
| | |
|
| | | <script>
|
| | | import * as echarts from "echarts";
|
| | | import html2canvas from 'html2canvas';
|
| | | import html2canvas from "html2canvas";
|
| | | import AMapLoader from "@amap/amap-jsapi-loader";
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | activeIndex: "1",
|
| | | activeIndex2: "1",
|
| | | countList: [], //预警情况统计数据
|
| | | countList: [1, 2, 3], //预警情况统计数据
|
| | | rankList: [
|
| | | { name: "射洪客运公司", value: 90 },
|
| | | { name: "滴滴网约车客运公司", value: 80 },
|
| | |
| | | carList: [], //车辆列表数据
|
| | | };
|
| | | },
|
| | | watch: {
|
| | | map(val) {
|
| | | if (val) {
|
| | | HTMLCanvasElement.prototype.getContext = (function (origFn) {
|
| | | return function (type, attributes) {
|
| | | if (type.indexOf("webgl") > -1) {
|
| | | attributes = Object.assign({}, attributes, {
|
| | | preserveDrawingBuffer: true,
|
| | | });
|
| | | }
|
| | | return origFn.call(this, type, attributes);
|
| | | };
|
| | | })(HTMLCanvasElement.prototype.getContext);
|
| | | }
|
| | | },
|
| | | },
|
| | | created() {
|
| | | //初始化窗口点击事件
|
| | | window.toCarDetail = (record) => {
|
| | |
| | | window.shotScreen = () => {
|
| | | this.shotScreen();
|
| | | };
|
| | | },
|
| | | onload() {
|
| | | // if (this.carList.length > 0) {
|
| | | // }
|
| | | },
|
| | | mounted() {
|
| | | let arr = [
|
| | |
| | | this.initMap();
|
| | | setTimeout(() => {
|
| | | this.addMarker(this.carList, [105.444444, 31.523333]);
|
| | | this.getCountList();
|
| | | }, 1000);
|
| | | },
|
| | | methods: {
|
| | |
| | | let marker = new AMap.Marker({
|
| | | position: [Number(item.longitude), Number(item.latitude)], //经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
|
| | | map: this.map,
|
| | | zooms: [5, 20],
|
| | | zooms: [13, 20],
|
| | | icon: new AMap.Icon({
|
| | | size: iconConfig.size,
|
| | | image: iconConfig.icon,
|
| | |
| | | });
|
| | | }
|
| | | },
|
| | | // <img
|
| | | // style="width: 460px; height: 330px; border-radius: 9px" id="monitoringCard"
|
| | | // src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
| | | // />
|
| | | listRender(record) {
|
| | | return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
|
| | | <div style="position: relative; width: 460px; height: 330px">
|
| | | <img
|
| | | style="width: 460px; height: 330px; border-radius: 9px" id="monitoringCard"
|
| | | src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
| | | />
|
| | | |
| | | <canvas ref="canvas" id="myCanvas" style="width: 460px; height: 330px;display:none" crossOrigin="anonymous"></canvas>
|
| | | <video
|
| | | ref="video"
|
| | | style="width: 460px; height: 330px; border-radius: 9px" |
| | | id="monitoringCard"
|
| | | ref="monitoringCard"
|
| | | :controls="false"
|
| | | autoPlay
|
| | | src="${require("../../assets/homeImg/QQ20241223-103023.mp4")}"
|
| | | width="620">
|
| | | </video>
|
| | | <div style="position: absolute; right: 11px; top: 10px">
|
| | | <!-- 全屏 -->
|
| | | <div
|
| | |
| | | }
|
| | | },
|
| | | chartTnit(x, y1, y2) {
|
| | | // 基于准备好的dom,初始化echarts实例
|
| | | // 基于准备好的dom,初始化echarts实例 grid: {
|
| | | // width: "auto",
|
| | | // height: "auto",
|
| | | // left: "0",
|
| | | // right: "5%",
|
| | | // bottom: "0",
|
| | | // top: "15%",
|
| | | // containLabel: true,
|
| | | // },
|
| | | const myChart = echarts.init(document.getElementById("countChart"));
|
| | | console.log("22222222222222222", myChart);
|
| | |
|
| | | // 绘制数量图表
|
| | | myChart.setOption({
|
| | | tooltip: {
|
| | | trigger: "axis",
|
| | | axisPointer: {
|
| | | // 坐标轴指示器,坐标轴触发有效
|
| | | type: "cross", // 默认为直线,可选为:'line' | 'cross'
|
| | | type: "shadow",
|
| | | },
|
| | | // formatter: '{b}月\n'
|
| | | },
|
| | | legend: {
|
| | | x: "right",
|
| | | itemWidth: 12,
|
| | | itemHeight: 12,
|
| | | itemGap: 56, // 设置间距
|
| | | textStyle: {
|
| | | color: "rgba(68, 68, 68, 0.65)",
|
| | | fontSize: 16,
|
| | | padding: [0, 0, 0, 8],
|
| | | },
|
| | | data: ["充电电费", "充电服务费"],
|
| | | },
|
| | | grid: {
|
| | | width: "auto",
|
| | | height: "auto",
|
| | | left: "0",
|
| | | right: "5%",
|
| | | bottom: "0",
|
| | | top: "15%",
|
| | | top: "5%",
|
| | | left: "3%",
|
| | | right: "4%",
|
| | | bottom: "0%",
|
| | | containLabel: true,
|
| | | },
|
| | | xAxis: {
|
| | | type: "category",
|
| | | axisLabel: {
|
| | | color: "rgba(80, 105, 122, 1)",
|
| | | fontSize: 15,
|
| | | lineHeight: 23,
|
| | | fontFamily: "PingFangSC, PingFang SC",
|
| | | // formatter:'{value}月'
|
| | | },
|
| | | axisTick: {
|
| | | show: true,
|
| | | },
|
| | | axisLine: {
|
| | | lineStyle: {
|
| | | color: "RGBA(234, 234, 234, 1)",
|
| | | xAxis: [
|
| | | {
|
| | | type: "category",
|
| | | data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],
|
| | | axisTick: {
|
| | | alignWithLabel: true,
|
| | | lineStyle: {
|
| | | color: "#777777",
|
| | | },
|
| | | },
|
| | | axisLabel: {
|
| | | color: "rgba(0, 0, 0, 0.45)",
|
| | | },
|
| | | },
|
| | | splitLine: {
|
| | | // 去掉网格线
|
| | | show: false,
|
| | | ],
|
| | | yAxis: [
|
| | | {
|
| | | type: "value",
|
| | | },
|
| | | data: x,
|
| | | },
|
| | | yAxis: {
|
| | | type: "value",
|
| | | axisLabel: {
|
| | | color: "rgba(80, 105, 122, 1)",
|
| | | fontSize: 15,
|
| | | lineHeight: 23,
|
| | | fontFamily: "PingFangSC, PingFang SC",
|
| | | formatter: "{value} 元",
|
| | | },
|
| | | splitLine: {
|
| | | // show: false // 去掉网格线
|
| | | color: "rgb(242, 242, 242, 1)",
|
| | | },
|
| | | axisTick: {
|
| | | alignWithLabel: true,
|
| | | },
|
| | | },
|
| | | ],
|
| | | series: [
|
| | | {
|
| | | name: "充电服务费",
|
| | | type: "bar",
|
| | | barMaxWidth: 13,
|
| | | // showBackground: true,
|
| | | barWidth: "20px",
|
| | | itemStyle: {
|
| | | color: new echarts.graphic.LinearGradient(
|
| | | 0,
|
| | | 0,
|
| | | 0,
|
| | | 1, // x0, y0, x1, y1
|
| | | [
|
| | | { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色
|
| | | { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色
|
| | | ]
|
| | | ),
|
| | | borderRadius: [20, 20, 20, 20],
|
| | | color: (params) => {
|
| | | console.log("111111", params);
|
| | | return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
|
| | | params.dataIndex
|
| | | ];
|
| | | },
|
| | | },
|
| | | // label: {
|
| | | // show: true,
|
| | | // fontSize: 12,
|
| | | // lineHeight: 17,
|
| | | // // align:'right',
|
| | | // color: 'rgba(123, 123, 123, 1)',
|
| | | // position: 'right', // 设置标签显示在柱状条右侧
|
| | | // // formatter: function (params) {
|
| | | // // return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'
|
| | | // // } // 使用模板字符串保留两位小数
|
| | |
|
| | | // },
|
| | | data: y1,
|
| | | },
|
| | | {
|
| | | name: "充电电费",
|
| | | type: "bar",
|
| | | barMaxWidth: 13,
|
| | | // showBackground: true,
|
| | | itemStyle: {
|
| | | color: new echarts.graphic.LinearGradient(
|
| | | 0,
|
| | | 0,
|
| | | 0,
|
| | | 1, // x0, y0, x1, y1
|
| | | [
|
| | | { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色
|
| | | { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色
|
| | | ]
|
| | | ),
|
| | | },
|
| | |
|
| | | data: y2,
|
| | | data: [10, 52, 200, 33, 39, 30, 20],
|
| | | },
|
| | | ],
|
| | | });
|
| | |
|
| | | // myChart.setOption({
|
| | | // tooltip: {
|
| | | // trigger: "axis",
|
| | | // axisPointer: {
|
| | | // // 坐标轴指示器,坐标轴触发有效
|
| | | // type: "cross", // 默认为直线,可选为:'line' | 'cross'
|
| | | // },
|
| | | // // formatter: '{b}月\n'
|
| | | // },
|
| | | // legend: {
|
| | | // x: "right",
|
| | | // itemWidth: 12,
|
| | | // itemHeight: 12,
|
| | | // itemGap: 56, // 设置间距
|
| | | // textStyle: {
|
| | | // color: "rgba(68, 68, 68, 0.65)",
|
| | | // fontSize: 16,
|
| | | // padding: [0, 0, 0, 8],
|
| | | // },
|
| | | // data: ["充电电费", "充电服务费"],
|
| | | // },
|
| | |
|
| | | // xAxis: {
|
| | | // type: "category",
|
| | | // axisLabel: {
|
| | | // color: "rgba(80, 105, 122, 1)",
|
| | | // fontSize: 15,
|
| | | // lineHeight: 23,
|
| | | // fontFamily: "PingFangSC, PingFang SC",
|
| | | // // formatter:'{value}月'
|
| | | // },
|
| | | // axisTick: {
|
| | | // show: true,
|
| | | // },
|
| | | // axisLine: {
|
| | | // lineStyle: {
|
| | | // color: "RGBA(234, 234, 234, 1)",
|
| | | // },
|
| | | // },
|
| | | // splitLine: {
|
| | | // // 去掉网格线
|
| | | // show: false,
|
| | | // },
|
| | | // data: x,
|
| | | // },
|
| | | // yAxis: {
|
| | | // type: "value",
|
| | | // axisLabel: {
|
| | | // color: "rgba(80, 105, 122, 1)",
|
| | | // fontSize: 15,
|
| | | // lineHeight: 23,
|
| | | // fontFamily: "PingFangSC, PingFang SC",
|
| | | // formatter: "{value} 元",
|
| | | // },
|
| | | // splitLine: {
|
| | | // // show: false // 去掉网格线
|
| | | // color: "rgb(242, 242, 242, 1)",
|
| | | // },
|
| | | // axisTick: {
|
| | | // alignWithLabel: true,
|
| | | // },
|
| | | // },
|
| | | // series: [
|
| | | // {
|
| | | // name: "充电服务费",
|
| | | // type: "bar",
|
| | | // barMaxWidth: 13,
|
| | | // // showBackground: true,
|
| | | // itemStyle: {
|
| | | // color: new echarts.graphic.LinearGradient(
|
| | | // 0,
|
| | | // 0,
|
| | | // 0,
|
| | | // 1, // x0, y0, x1, y1
|
| | | // [
|
| | | // { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色
|
| | | // { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色
|
| | | // ]
|
| | | // ),
|
| | | // },
|
| | | // // label: {
|
| | | // // show: true,
|
| | | // // fontSize: 12,
|
| | | // // lineHeight: 17,
|
| | | // // // align:'right',
|
| | | // // color: 'rgba(123, 123, 123, 1)',
|
| | | // // position: 'right', // 设置标签显示在柱状条右侧
|
| | | // // // formatter: function (params) {
|
| | | // // // return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'
|
| | | // // // } // 使用模板字符串保留两位小数
|
| | |
|
| | | // // },
|
| | | // data: y1,
|
| | | // },
|
| | | // {
|
| | | // name: "充电电费",
|
| | | // type: "bar",
|
| | | // barMaxWidth: 13,
|
| | | // // showBackground: true,
|
| | | // itemStyle: {
|
| | | // color: new echarts.graphic.LinearGradient(
|
| | | // 0,
|
| | | // 0,
|
| | | // 0,
|
| | | // 1, // x0, y0, x1, y1
|
| | | // [
|
| | | // { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色
|
| | | // { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色
|
| | | // ]
|
| | | // ),
|
| | | // },
|
| | |
|
| | | // data: y2,
|
| | | // },
|
| | | // ],
|
| | | // });
|
| | | myChart.resize();
|
| | | },
|
| | | // 获取预警排行榜数据
|
| | |
| | | },
|
| | | fullScreen() {
|
| | | console.log("全屏");
|
| | | const video = document.getElementById("monitoringCard");
|
| | | if (video.requestFullscreen) {
|
| | | video.requestFullscreen();
|
| | | } else if (video.mozRequestFullScreen) {
|
| | | // Firefox
|
| | | video.mozRequestFullScreen();
|
| | | } else if (video.webkitRequestFullscreen) {
|
| | | // Chrome, Safari and Opera
|
| | | video.webkitRequestFullscreen();
|
| | | } else if (video.msRequestFullscreen) {
|
| | | // IE/Edge
|
| | | video.msRequestFullscreen();
|
| | | }
|
| | | },
|
| | | shotScreen() {
|
| | | console.log("截图");
|
| | |
|
| | | // 获取video和canvas元素
|
| | | const video = document.getElementById("monitoringCard");
|
| | | const canvas = document.getElementById("myCanvas");
|
| | | // 设置canvas的宽度和高度与video相同
|
| | | canvas.width = video.videoWidth;
|
| | | canvas.height = video.videoHeight;
|
| | | // 获取canvas的2d绘图上下文
|
| | | const context = canvas.getContext("2d");
|
| | | // 将当前video帧绘制到canvas上
|
| | | context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
| | |
|
| | | setTimeout(() => {
|
| | | let targetDom = document.querySelector("#monitoringCard");
|
| | | console.log('targetDom',targetDom)
|
| | | html2canvas(targetDom, {
|
| | | height: document.querySelector("#monitoringCard").scrollHeight,
|
| | | windowHeight: document.querySelector("#monitoringCard").scrollHeight,
|
| | | backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色(null)
|
| | | useCORS: true, //支持图片跨域
|
| | | scale: 2, //设置放大的倍数
|
| | | }).then((canvas) => {
|
| | | let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
|
| | | this.downloadImage(url);
|
| | | });
|
| | | }, 10);
|
| | | // 将canvas内容转换为图片
|
| | | let dataURL = canvas.toDataURL("image/png");
|
| | | this.downloadImage(dataURL);
|
| | | }, 100);
|
| | | },
|
| | | downloadImage(base64) {
|
| | | const link = document.createElement("a");
|
| | | link.href = base64;
|
| | | link.download = "image.png"; // 你希望下载的文件名
|
| | | link.download = "screenshot.png"; // 你希望下载的文件名
|
| | | document.body.appendChild(link);
|
| | | link.click();
|
| | | document.body.removeChild(link);
|
| | |
| | | .warnCount {
|
| | | position: relative;
|
| | |
|
| | | .countChart {
|
| | | #countChart {
|
| | | width: 453px;
|
| | | height: 150px;
|
| | | }
|
| | |
| | | </div> |
| | | <!-- 行程轨迹 --> |
| | | <div v-show="tabPosition == 'track'"> |
| | | |
| | | <div class="mapContainer" id="mapContainer"></div> |
| | | </div> |
| | | <!-- 行程监控 --> |
| | | <div v-show="tabPosition == 'monitoring'"></div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import AMapLoader from "@amap/amap-jsapi-loader"; |
| | | export default { |
| | | components: {}, |
| | | props: {}, |
| | | data() { |
| | | return { |
| | | dialogVisible: true, |
| | | dialogVisible: false, |
| | | tabPosition: 'order', |
| | | }; |
| | | }, |
| | | computed: {}, |
| | | watch: {}, |
| | | created() { }, |
| | | mounted() { }, |
| | | mounted() { |
| | | this.initMap(); |
| | | }, |
| | | methods: { |
| | | initMap() { |
| | | window._AMapSecurityConfig = { |
| | | securityJsCode: this.$secretKey, |
| | | }; |
| | | AMapLoader.load({ |
| | | key: this.$mapKey, |
| | | version: "2.0", |
| | | plugins: [ |
| | | "AMap.ToolBar", |
| | | ], |
| | | }) |
| | | .then((AMap) => { |
| | | this.map = new AMap.Map("mapContainer", { |
| | | center: [105.574542, 30.5061493], |
| | | zoom: 15, |
| | | }); |
| | | this.map.addControl(new AMap.ToolBar()); |
| | | let path = [ |
| | | new AMap.LngLat(105.57, 30.51), |
| | | new AMap.LngLat(116.382122, 39.901176), |
| | | new AMap.LngLat(116.387271, 39.912501), |
| | | new AMap.LngLat(116.398258, 39.9046), |
| | | ] |
| | | const content = `<div class="custom-content-marker"> |
| | | <img src="${require("@/assets/logo.png")}"> |
| | | </div>`; |
| | | const marker = new AMap.Marker({ |
| | | content: content, //自定义点标记覆盖物内容 |
| | | position: [105.57, 30.51], //基点位置 |
| | | offset: new AMap.Pixel(-30, -15), //相对于基点的偏移位置 |
| | | }); |
| | | this.map.add(marker); |
| | | let polyline = new AMap.Polyline({ |
| | | path: path, |
| | | strokeWeight: 2, //线条宽度 |
| | | strokeColor: "red", //线条颜色 |
| | | lineJoin: "round", //折线拐点连接处样式 |
| | | }); |
| | | this.map.add(polyline); |
| | | }) |
| | | .catch((e) => { |
| | | }); |
| | | }, |
| | | closeClick() { |
| | | this.dialogVisible = false |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | <style> |
| | | .custom-content-marker { |
| | | width: 30px; |
| | | height: 30px; |
| | | } |
| | | |
| | | .custom-content-marker img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | </style> |
| | | <style scoped lang="less"> |
| | | ::v-deep .el-descriptions .el-descriptions-item__cell { |
| | | padding-bottom: 25px; |
| | | } |
| | | |
| | | #mapContainer { |
| | | width: 100%; |
| | | height: 600px; |
| | | } |
| | | </style> |
| | |
| | | <div class="form flex a-center j-between mt--23"> |
| | | <div class="form-left ml--30"> |
| | | <el-form :inline="true" :model="searchForm" class="demo-form-inline"> |
| | | <el-form-item label="派单时间:" prop="level" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.level" placeholder="请输入"></el-input> |
| | | <el-form-item label="派单时间:" prop="level" class="unset_m" style="margin-right: 100px;"> |
| | | <el-date-picker style="width: 400px;" v-model="value1" type="datetimerange" range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="订单编号:" prop="name" class="unset_m" style="margin-right: 15px;"> |
| | | <el-form-item label="订单编号:" prop="name" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="车辆号牌:" prop="name" class="unset_m" style="margin-right: 15px;"> |
| | | <el-form-item label="车辆号牌:" prop="name" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="驾驶员姓名:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-form-item label="驾驶员姓名:" prop="date" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="公司名称:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-form-item label="公司名称:" prop="date" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input class="companyName" v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="上车地点:" prop="date" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="上车地点:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-form-item label="下车地点:" prop="date" class="unset_m" style="margin-right: 100px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="下车地点:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="里程范围:" prop="date" class="unset_m" style="margin-right: 15px;"> |
| | | <el-input v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | <el-form-item label="里程范围:" prop="date" class="unset_m" style="margin-right: 100px;"> |
| | | <div class="flex a-center j-between"> |
| | | <el-input class="range" v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | <div class="mx--20">-</div> |
| | | <el-input class="range" v-model="searchForm.name" placeholder="请输入"></el-input> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="form-right mr--24 mb--22"> |
| | | <div class="form-right mr--24 mb--22 shrink0"> |
| | | <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small" |
| | | @click="search">查询</el-button> |
| | | <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14" |
| | |
| | | ::v-deep .el-form-item .el-input__inner { |
| | | width: 240px; |
| | | } |
| | | |
| | | ::v-deep .companyName { |
| | | .el-input__inner { |
| | | width: 400px !important; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .range { |
| | | .el-input__inner { |
| | | width: 100% !important; |
| | | } |
| | | } |
| | | </style> |