设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/components/canvas/index.vue

@@ -42,7 +42,7 @@
</template>
<script>
import canvasDialog from "./Dialog";
import { updateSnapshot } from "@/api/camera";
import { updateSnapshot, updategb28181 } from "@/api/camera";
export default {
  name: "myCanvas",
  components: {
@@ -79,9 +79,8 @@
      },
      type: Object,
    },
    currentCameraId: {
      type: String,
      default: "",
    currentCamera: {
      type: Object,
    },
    snapshot_url: {
      type: String,
@@ -116,10 +115,15 @@
          return this.snapshot_url.replace("/opt/vasystem", "");
        }

        if (this.snapshot_url.indexOf("data:image/png;base64,") != -1) {
          return `${this.snapshot_url}`;
        }

        if (this.sourceType == 2) {
          return `${this.snapshot_url}`;
        } else {
          return `/httpImage/${this.snapshot_url}`;
          console.log(this.snapshot_url);
          return `http://${this.snapshot_url}`;
        }
      } else {
        return this.blackImg;
@@ -148,7 +152,6 @@
  watch: {
    loading: {
      handler(newVal, oldVal) {
        // console.log(newVal,'loading')
        if (newVal) {
          this.baseImg = "";
          this.refresh();
@@ -182,30 +185,54 @@
    async getCanvasPic() {
      // this.$emit('changeBaseImg',this.currentCameraId)
      this.$emit("changeLoading", true);
      if (this.currentCameraId) {
      if (this.currentCamera.cameraId) {
        let _this = this;
        await updateSnapshot(this.currentCameraId)
          .then((res) => {
            if (res.data.cameraId === _this.currentCameraId) {
              this.baseImg = res.data.snapshotUrl;
              this.$emit(

        if (_this.currentCamera.type === 1) {
          await updategb28181({
            id: _this.currentCamera.cameraId,
          }).then((res) => {
            if (res.data.cameraId === _this.currentCamera.cameraId) {
              _this.baseImg = "data:image/png;base64," + res.data.base64;
              _this.$emit(
                "refresh",
                res.data.snapshotUrl,
                _this.currentCameraId
                _this.baseImg,
                _this.currentCamera.cameraName
              );
              this.$forceUpdate();
              this.$notify({
              _this.$forceUpdate();
              _this.$notify({
                type: "success",
                message: "底图已刷新",
              });
            }
          })
          .catch((err) => {
            this.$notify({
              type: "error",
              message: "底图刷新失败",
            });
          });

          this.$emit("changeLoading", false);

          return;
        }

        await updateSnapshot({
          id: _this.currentCamera.cameraId,
          name: _this.currentCamera.cameraName,
          type: _this.currentCamera.type,
          rtsp: _this.currentCamera.rtsp,
        }).then((res) => {
          if (res.data.cameraId === _this.currentCamera.cameraId) {
            _this.baseImg = "data:image/png;base64," + res.data.base64;
            _this.$emit(
              "refresh",
              _this.baseImg,
              _this.currentCamera.cameraName
            );
            _this.$forceUpdate();
            _this.$notify({
              type: "success",
              message: "底图已刷新",
            });
          }
        });

        this.$emit("changeLoading", false);
      }
    },
@@ -523,8 +550,9 @@
      ctx.restore();
    },
    async refresh() {
      // console.log(this.loading,'刷新底图',this.snapshot_url)
      if (!this.currentCameraId) {
      console.log("刷新底图");
      if (!this.currentCamera.cameraId) {
        console.log("没刷新");
        return false;
      }
      // await this.$emit('changeLoading', true)
@@ -631,7 +659,7 @@

  .dialog-footer {
    display: flex;
    justify-content: end;
    justify-content: flex-end;
    text-align: center;
    line-height: 32px;
    font-size: 14px;