pyt
2025-03-06 7f0d3f73c6d91c15778753e21f1b90f50f689504
Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-vehicle-supervision
1个文件已添加
7个文件已修改
476 ■■■■■ 已修改文件
.gitignore 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/homeImg/QQ20241223-103023.mp4 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/baseurl.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/view/home/index.vue 355 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/view/order/component/detailModal.vue 70 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/view/order/index.vue 44 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
.gitignore
@@ -10,6 +10,7 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
# Editor directories and files
.idea
package.json
@@ -17,10 +17,10 @@
    "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"
src/assets/homeImg/QQ20241223-103023.mp4
Binary files differ
src/main.js
@@ -10,6 +10,8 @@
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) => {
src/utils/baseurl.js
@@ -2,6 +2,8 @@
    // 开发环境
    development: {
        baseURL: "",
        mapKey: "67968c82f27c7e2cb9f40c1a9aa3042b",
        secretKey: "37ce61ae86efa5ad82b649a277f5097c",
    },
    // 生产环境
    production: {
src/view/home/index.vue
@@ -206,14 +206,14 @@
<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 },
@@ -232,6 +232,22 @@
      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) => {
@@ -244,10 +260,6 @@
    window.shotScreen = () => {
      this.shotScreen();
    };
  },
  onload() {
    // if (this.carList.length > 0) {
    // }
  },
  mounted() {
    let arr = [
@@ -334,6 +346,7 @@
    this.initMap();
    setTimeout(() => {
      this.addMarker(this.carList, [105.444444, 31.523333]);
      this.getCountList();
    }, 1000);
  },
  methods: {
@@ -441,7 +454,7 @@
          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,
@@ -458,13 +471,25 @@
        });
      }
    },
    // <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
@@ -509,133 +534,189 @@
      }
    },
    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();
    },
    // 获取预警排行榜数据
@@ -646,28 +727,44 @@
    },
    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);
@@ -1044,7 +1141,7 @@
    .warnCount {
      position: relative;
      .countChart {
      #countChart {
        width: 453px;
        height: 150px;
      }
src/view/order/component/detailModal.vue
@@ -28,7 +28,7 @@
            </div>
            <!-- 行程轨迹 -->
            <div v-show="tabPosition == 'track'">
                <div class="mapContainer" id="mapContainer"></div>
            </div>
            <!-- 行程监控 -->
            <div v-show="tabPosition == 'monitoring'"></div>
@@ -37,28 +37,88 @@
</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>
src/view/order/index.vue
@@ -3,33 +3,39 @@
        <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"
@@ -123,4 +129,16 @@
::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>