From 199a50c6a2b495056639867d57de000a4152eb0b Mon Sep 17 00:00:00 2001
From: Rain_ <904416525@qq.com>
Date: Thu, 24 Jul 2025 18:32:02 +0800
Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E6=8F=90=E4=BA=A4orc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../riskRankingControl/fabric_icon6.png       |  Bin 0 -> 444 bytes
 .../fabric_icon6_active.png                   |  Bin 0 -> 434 bytes
 .../riskRankingControl/fabric_icon7.png       |  Bin 0 -> 342 bytes
 .../fabric_icon7_active.png                   |  Bin 0 -> 335 bytes
 .../qualityAndSafety/components/index.css     |   84 +
 .../qualityAndSafety/components/index.min.css |    1 +
 .../qualityAndSafety/components/index.scss    |   77 +
 .../qualityAndSafety/components/myPictode.vue | 1392 +++++++++++++++++
 .../qualityAndSafety/components/myfabric.vue  |  615 ++++++++
 .../qualityAndSafety/ocrRecognitionArea.vue   |  860 ++++++++++
 .../qualityAndSafety/safetyRiskListSet.vue    |   49 +-
 .../safetyRiskListSetDetail.vue               |    2 +-
 12 files changed, 3064 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/images/riskRankingControl/fabric_icon6.png
 create mode 100644 src/assets/images/riskRankingControl/fabric_icon6_active.png
 create mode 100644 src/assets/images/riskRankingControl/fabric_icon7.png
 create mode 100644 src/assets/images/riskRankingControl/fabric_icon7_active.png
 create mode 100644 src/views/companyAdmin/qualityAndSafety/components/index.css
 create mode 100644 src/views/companyAdmin/qualityAndSafety/components/index.min.css
 create mode 100644 src/views/companyAdmin/qualityAndSafety/components/index.scss
 create mode 100644 src/views/companyAdmin/qualityAndSafety/components/myPictode.vue
 create mode 100644 src/views/companyAdmin/qualityAndSafety/components/myfabric.vue
 create mode 100644 src/views/companyAdmin/qualityAndSafety/ocrRecognitionArea.vue

diff --git a/src/assets/images/riskRankingControl/fabric_icon6.png b/src/assets/images/riskRankingControl/fabric_icon6.png
new file mode 100644
index 0000000000000000000000000000000000000000..341b38e206e5db5f586406e0a1532ab562788ebc
GIT binary patch
literal 444
zcmV;t0Ym<YP)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*00001b5ch_0Itp)
z=>Px$c1c7*RA@u(nO|zcKoG`fst2(zHV+1R1Pcawi|R?VC(+)b5TQ9jAwHzOG#Am4
zKn+FQxU<ZP$d~8&v)^yNojfeloqc>~dI*AUeWI8UCUj*2u-uh_tJ`%>C>c%0!n{;h
zjh9ff$a}R}7p@jgLCN#$Kz6&|cxMZ*%)Q=Y_5E3&tKbwg98KoTya;a_FO!L8Rhh3;
zf|4|w3ehdutv!E`peFk%&Ay0e9FKKS<>IHzU(|Q#n9wYSpteM`XMSU%=}CUkT<oBl
z{eJDbJI8ua|3kwxTb>FMqSdy{XF-BIk|4+fQX7H^X=piOVL1&%SWZI=mNTFQ%Nan#
zmeW9l<utUg<qT-Sat08w<unjsISnmrIRjd-oB>2^ISoWuPD2Y@&VUvyX8;jfP6P3*
z<wO?S%{uJ$!J~Q93H^Jc9kkCK9nXm#=e-ybRZ!FYPt;t9>IadJt_R<Xr}YSkF395y
mrXdhyiZennOeg|W(~<{O4)HaG%e>eC0000<MNUMnLSTX|Q@?}&

literal 0
HcmV?d00001

diff --git a/src/assets/images/riskRankingControl/fabric_icon6_active.png b/src/assets/images/riskRankingControl/fabric_icon6_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..be6e5f17c9d1f2f282dbbe38b0af2c0eb92892f3
GIT binary patch
literal 434
zcmV;j0ZsmiP)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*00001b5ch_0Itp)
z=>Px$Y)M2xRA@u(nay#+Fc5`zxj8gJI)M(H3IdH_K_id~q7LFt;wFf1-i(=XhA_xt
z#fo8==d<?befzXNi0R2belk4-L61IBOb8RYGXYrc&cM~>MkiFdcFrt2b=F(~OpSEB
z@vf*tC4z!V*Up&bJ6CVF<Q3sp?~3M9j<BH3p<-fpOW|Cx!o2e9Vy_dlZI>($WVe&<
zlLYngZ`+?Q5}M~Cos^fU{#?H-)OTnI=odp$;bTzu&dkey@l17pu@iGPp}RBW%laQG
z-C=hwNJRGDO;?G6qG1peMRali6VlKMoQ35y5MenDEm+Qg7A$7~5nE0J5th@?!j?0j
z1<M&g#Fo=Qgyl4}u;mPB!Ey!=vE?)nVL1&gY&ip3u$%!zY&i|Yi<TpCzM7`KK19oB
zp3vVL?QG~|>^U*o?G*>I3hL`0AD$;tNhb}_<YVl?_lka_N3siwc3^w}f{cNhr^AHI
cks2rb1<5BcL_$}vv;Y7A07*qoM6N<$f^LPr7ytkO

literal 0
HcmV?d00001

diff --git a/src/assets/images/riskRankingControl/fabric_icon7.png b/src/assets/images/riskRankingControl/fabric_icon7.png
new file mode 100644
index 0000000000000000000000000000000000000000..be56f3fd0af84839e89a00aefdc2835d021ee02c
GIT binary patch
literal 342
zcmeAS@N?(olHy`uVBq!ia0vp^CLqkg1|*MGNWTVBjKx9jP7LeL$-D%z1w36GLo%G-
z&N38ga^P_leyG#edgq|iImJ0HHk=iFI(wMK_|g-5oD&_DrI~kk&A0kpKk0wk?AFXg
zdHo!@Lk{=nX$Uzv%`-P}$lH5Yex~K;JIyEkTvmN6v)t>_#;lro(q+G?K;Tug(tq{L
zogN#z9&he!pUG#x>)nAfuKN1xI1K~q@?T{wo9DA>w#wO-6-OLAPOwb+ov3jAJ=gRm
zYr|(=3hYnL2)txzkeP5<FnJwYk;6HjiGB<x7%gQDpJm~Y)D^SrTC|#v&Hk#q?eZU)
zXWu>gW0$i1)8Yq47tZ->U*55&)@0r>r8QjtR5*A4FDzFv*|&IusE5Xzf5-3653XJ5
UVzpkN1Q<{Zp00i_>zopr0Ir&fBLDyZ

literal 0
HcmV?d00001

diff --git a/src/assets/images/riskRankingControl/fabric_icon7_active.png b/src/assets/images/riskRankingControl/fabric_icon7_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6bdf2335184d1259b39a40a87ccaf7126058a80
GIT binary patch
literal 335
zcmeAS@N?(olHy`uVBq!ia0vp^CLqkg1|*MGNWTVBjKx9jP7LeL$-D%zIXzt*Lo%G-
z&hiy%GT><yF6W#6iQ|sLjt&uhr@fB-50*-lAGs(go-^mzl(5&ybN5gGeo)OI^jkq{
z6-U#)yMY!g?MC?ttufZ;n1#z{rW<S(7LspEs}YUlF8X}rPjZt>O@Z(K`lgm66W{2m
z$!+s`_VmP&cY$$9vO>@7=6tJLJyWOj_UE<96FHk6OlVbh)tgYgFXxAb#tg$YCQF5M
z7mwL|Pa5V-lT5amz+B|kvgM@%--*nbhR2w(ORkH0lCf~LSi8>0`E!Cd@l0Fb`K4CF
zalMXe5{v96pGhlD-d<d|NY3^21OG{jUiWA4wJS{vF=62ojjeb2Y~2~E8QibxBM%HA
N22WQ%mvv4FO#r$ih0Xu~

literal 0
HcmV?d00001

diff --git a/src/views/companyAdmin/qualityAndSafety/components/index.css b/src/views/companyAdmin/qualityAndSafety/components/index.css
new file mode 100644
index 00000000..71cc0d52
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/components/index.css
@@ -0,0 +1,84 @@
+#myCanvas {
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+}
+
+#sketchpad-upload {
+  display: none;
+}
+
+.tool-box {
+  position: absolute;
+  z-index: 10;
+  background: #d0d0d0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tool-box.tool-box--left {
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 100%;
+  flex-direction: column;
+}
+
+.tool-box.tool-box--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  flex-direction: row;
+}
+
+.tool-box.tool-box--right {
+  top: 0;
+  right: 0;
+  width: 50px;
+  height: 100%;
+  flex-direction: column;
+}
+
+.tool-box.tool-box--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  flex-direction: row;
+}
+
+.tool-box .tool-con {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+}
+
+.tool-box .tool-con.active {
+  background: #333;
+  color: #fff;
+}
+
+.tool-box .tool-con label {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.board-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.board-box .btn {
+  width: 80px;
+  height: 30px;
+  background: #f0f0f0;
+  margin: 0 5px;
+}
diff --git a/src/views/companyAdmin/qualityAndSafety/components/index.min.css b/src/views/companyAdmin/qualityAndSafety/components/index.min.css
new file mode 100644
index 00000000..be7e03aa
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/components/index.min.css
@@ -0,0 +1 @@
+#myCanvas{width:100%;height:100%;background:#f6f6f6}#sketchpad-upload{display:none}.tool-box{position:absolute;z-index:10;background:#d0d0d0;display:flex;justify-content:space-between}.tool-box.tool-box--left{top:0;left:0;width:50px;height:100%;flex-direction:column}.tool-box.tool-box--top{top:0;left:0;width:100%;height:50px;flex-direction:row}.tool-box.tool-box--right{top:0;right:0;width:50px;height:100%;flex-direction:column}.tool-box.tool-box--bottom{bottom:0;left:0;width:100%;height:50px;flex-direction:row}.tool-box .tool-con{width:50px;height:50px;display:flex;justify-content:center;align-items:center;font-size:30px}.tool-box .tool-con.active{background:#333;color:#fff}.tool-box .tool-con label{width:50px;height:50px;display:flex;justify-content:center;align-items:center}.board-box{width:100%;height:100%;position:relative}.board-box .btn{width:80px;height:30px;background:#f0f0f0;margin:0 5px}
diff --git a/src/views/companyAdmin/qualityAndSafety/components/index.scss b/src/views/companyAdmin/qualityAndSafety/components/index.scss
new file mode 100644
index 00000000..4eda9df3
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/components/index.scss
@@ -0,0 +1,77 @@
+@import "~@/assets/font/iconfont.css";
+#myCanvas {
+    width: 100%;
+    height: 100%;
+    background: #f6f6f6;
+}
+
+#sketchpad-upload {
+    display: none;
+}
+
+.tool-box {
+    position: absolute;
+    z-index: 10;
+    background: #d0d0d0;
+    display: flex;
+    justify-content: space-between;
+    &.tool-box--left {
+        top: 0;
+        left: 0;
+        width: 50px;
+        height: 100%;
+        flex-direction: column;
+    }
+    &.tool-box--top {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        flex-direction: row;
+    }
+    &.tool-box--right {
+        top: 0;
+        right: 0;
+        width: 50px;
+        height: 100%;
+        flex-direction: column;
+    }
+    &.tool-box--bottom {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        flex-direction: row;
+    }
+    .tool-con {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px;
+        &.active {
+            background: #333;
+            color: #fff;
+        }
+        label {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.board-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .btn {
+        width: 80px;
+        height: 30px;
+        background: #f0f0f0;
+        margin: 0 5px;
+    }
+}
\ No newline at end of file
diff --git a/src/views/companyAdmin/qualityAndSafety/components/myPictode.vue b/src/views/companyAdmin/qualityAndSafety/components/myPictode.vue
new file mode 100644
index 00000000..2b952ac1
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/components/myPictode.vue
@@ -0,0 +1,1392 @@
+<template>
+  <div>
+    <div class="board-box">
+      <!-- 上传图片 -->
+      <!-- <input
+        type="file"
+        accept="image/*"
+        ref="sketchpadUpload"
+        @change="uploadImg"
+        style="display: none"
+      /> -->
+      <!-- 工具栏 -->
+      <!-- <ul class="tool-box" :class="`tool-box--${placement}`" v-if="showTools">
+        <li class="tool-con">
+          <el-color-picker
+            v-model="strokeColor"
+            :predefine="predefineColors"
+            size="mini"
+            show-alpha
+          />
+        </li>
+        <li
+          v-for="item in tools"
+          :key="item.type"
+          class="tool-con"
+          :class="{ active: toolType === item.type }"
+          @click="changeTool(item.type)"
+        >
+          <label v-if="item.type === 'upload'" @click.stop>
+            <i class="iconfont" :class="item.icon"></i>
+            <input
+              type="file"
+              accept="image/*"
+              ref="sketchpadUpload"
+              @change="uploadImg"
+              style="display: none"
+            />
+          </label>
+          <i v-else class="iconfont" :class="item.icon"></i>
+        </li>
+      </ul> -->
+      <!-- 画布 -->
+      <canvas ref="myCanvas"></canvas>
+      <!-- <div v-if="showCenterTip" :style="`left: ${riskColorInfo.left}px;top: ${riskColorInfo.top}px;`" class="center-tip">
+        <i @click="closeShowCenterTip" class="el-icon-close"></i>
+        <div>未定义</div>
+        <div>重大风险：0个</div>
+        <div>较大风险：0个</div>
+        <div>一般风险：0个</div>
+        <div>低风险：0个</div>
+      </div> -->
+    </div>
+    <div class="box5">
+      <div class="header_title">操作</div>
+      <el-radio-group
+        @change="onToolChange"
+        class="risktype_box1"
+        v-model="riskColorInfo.radio1"
+        size="medium"
+      >
+        <el-radio-button label="rubber"></el-radio-button>
+        <el-radio-button label="move"></el-radio-button>
+        <el-radio-button label="text"></el-radio-button>
+        <el-radio-button
+          @click.native.prevent="handleClick('undo')"
+          label="undo"
+        ></el-radio-button>
+        <el-radio-button label="rect"></el-radio-button>
+      </el-radio-group>
+    </div>
+    <!-- <el-drawer
+      direction="ltr"
+      :modal="false"
+      :with-header="false"
+      title="我是外面的 Drawer"
+      :visible.sync="drawer"
+      size="100%"
+    >
+      <div class="drawer_main">
+        <div class="drawer_main_header">
+          <el-button size="medium" type="primary"
+            >风险四色图设置<i class="el-icon-setting el-icon--right"></i
+          ></el-button>
+          <div></div>
+        </div>
+        <div class="drawer_main_container">
+          <div class="header_title">绘制</div>
+          <div class="box1">
+            <el-radio-group
+              @change="onToolChange"
+              class="risktype_box1"
+              v-model="riskColorInfo.radio1"
+            >
+              <el-radio-button label="polygon"></el-radio-button>
+              <el-radio-button label="cricle"></el-radio-button>
+              <el-radio-button label="rect"></el-radio-button>
+              <el-radio-button label="text"></el-radio-button>
+              <el-radio-button label="pencil"></el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="box2">
+            <div>
+              <div>填充</div>
+              <div>+</div>
+            </div>
+            <div>
+              <div>
+                <div>
+                  <el-color-picker
+                    v-model="riskColorInfo.fillColor"
+                    :predefine="predefineColors"
+                    size="mini"
+                    show-alpha
+                    ref="colorPickerRef"
+                    @change="fillSelectedObject"
+                  />
+                  <div>{{ riskColorInfo.fillHexStr }}</div>
+                </div>
+                <div>{{ riskColorInfo.fillPercentage }}<span>%</span></div>
+              </div>
+              <i @click="showColorPicker" class="el-icon-view"></i>
+              <div>-</div>
+            </div>
+          </div>
+          <div class="box2">
+            <div>
+              <div>描边</div>
+              <div>+</div>
+            </div>
+            <div>
+              <div>
+                <div>
+                  <el-color-picker
+                    v-model="riskColorInfo.strokeColors"
+                    :predefine="predefineColors"
+                    size="mini"
+                    show-alpha
+                    ref="colorPickerRef"
+                    @change="strokeSelectedObject"
+                  />
+                  <div>{{ riskColorInfo.strokeHexStr }}</div>
+                </div>
+                <div>{{ riskColorInfo.strokePercentage }}<span>%</span></div>
+              </div>
+              <i @click="showColorPicker" class="el-icon-view"></i>
+              <div>-</div>
+            </div>
+          </div>
+          <div class="box3">
+            <div>
+              <div>位置</div>
+              <el-select
+                v-model="riskColorInfo.position"
+                @change="alignSelectedObjects"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in positionList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              <div>字重</div>
+              <el-input
+                type="number"
+                placeholder="请输入"
+                prefix-icon="el-icon-bank-card"
+                v-model.number="riskColorInfo.fontSize"
+                @blur="setSelectedFontSize"
+                min="12"
+                step="1"
+              >
+              </el-input>
+            </div>
+          </div>
+          <div class="header_title">操作</div>
+          <div class="box4">
+            <el-radio-group
+              @change="onToolChange"
+              class="risktype_box1"
+              v-model="riskColorInfo.radio1"
+            >
+              <el-radio-button label="rubber"></el-radio-button>
+              <el-radio-button label="tip"></el-radio-button>
+              <el-radio-button label="move"></el-radio-button>
+              <el-radio-button
+                @click.native.prevent="handleClick('undo')"
+                label="undo"
+              ></el-radio-button>
+              <el-radio-button label="redo"></el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="drawer_main_footer">
+          <el-button class="cancleBtn" icon="el-icon-circle-close" size="medium"
+            >取消
+          </el-button>
+          <el-button type="primary" icon="el-icon-circle-check" size="medium"
+            >保存
+          </el-button>
+        </div>
+      </div>
+    </el-drawer> -->
+  </div>
+</template>
+
+<script>
+import { fabric } from "fabric";
+import "./index.scss";
+
+const TOOLS = [
+  { name: "铅笔", type: "pencil", icon: "icon-pan_icon" },
+  { name: "实线", type: "line", icon: "icon-xian" },
+  { name: "虚线", type: "dashedLine", icon: "icon-xian1" },
+  { name: "箭头", type: "arrow", icon: "icon-jiantou" },
+  { name: "文字", type: "text", icon: "icon-wenzi" },
+  { name: "矩形", type: "rect", icon: "icon-juxing" },
+  { name: "圆形", type: "cricle", icon: "icon-yuanxing" },
+  { name: "椭圆形", type: "ellipse", icon: "icon-tuoyuanxing" },
+  { name: "三角形", type: "equilateral", icon: "icon-sanjiaoxing" },
+  { name: "上传图片", type: "upload", icon: "icon-seiyw41" },
+  { name: "橡皮", type: "rubber", icon: "icon-xiangpi" },
+  { name: "回退", type: "undo", icon: "icon-undo" },
+  { name: "向前", type: "redo", icon: "icon-redo" },
+  { name: "移动", type: "move", icon: "icon-yidong" },
+  { name: "提示框", type: "tip", icon: "icon-tishi" },
+];
+
+export default {
+  name: "vue-fabric-sketchpad",
+  props: {
+    // canvasWidth: { type: Number, default: () => 0 },
+    // canvasHeight: { type: Number, default: () => 0 },
+    canvasBgColor: { type: String, default: "#f6f6f6" },
+    strokeColor: { type: String, default: "#f30" },
+    strokeWidth: { type: Number, default: 2 },
+    showTools: { type: Boolean, default: true },
+    placement: { type: String, default: "left" },
+    configJson: { type: String, default: () => "" },
+  },
+  data() {
+    return {
+      boardObj: null,
+      mouseFrom: {},
+      mouseTo: {},
+      toolType: "pencil",
+      isDrawing: false,
+      drawingObj: null,
+      history: [],
+      stage: 0,
+      textObj: null,
+      tools: TOOLS,
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585",
+        "rgba(255, 69, 0, 0.68)",
+        "rgb(255, 120, 0)",
+        "hsv(51, 100, 98)",
+        "hsva(120, 40, 94, 0.5)",
+        "hsl(181, 100%, 37%)",
+        "hsla(209, 100%, 56%, 0.73)",
+        "#c7158577",
+      ],
+      eventHandlers: [],
+      defaultBgUrl: "",
+      // http://192.168.34.133:8081/img/datacentre_icon2.d1e40835.png
+      drawer: true,
+      riskColorInfo: {
+        radio1: "rect",
+        position: "",
+        fontSize: "",
+
+        fillColor: "",
+        fillHexStr: "",
+        fillPercentage: 100,
+        strokeColors: "",
+        strokeHexStr: "",
+        strokePercentage: 100,
+        left: 0,
+        top: 0,
+      },
+      positionList: [
+        {
+          value: "left",
+          label: "左对齐",
+        },
+        {
+          value: "center",
+          label: "水平居中",
+        },
+        {
+          value: "right",
+          label: "右对齐",
+        },
+        {
+          value: "top",
+          label: "顶对齐",
+        },
+        {
+          value: "middle",
+          label: "垂直居中",
+        },
+        {
+          value: "bottom",
+          label: "底对齐",
+        },
+      ],
+      showCenterTip: false,
+      canvasWidth: 0,
+      canvasHeight: 0,
+    };
+  },
+  mounted() {
+    if (this.canvasWidth == 0 && this.canvasHeight == 0) {
+      this.canvasWidth = document.querySelector(".board-box").clientWidth;
+      this.canvasHeight = document.querySelector(".board-box").clientHeight;
+    }
+    this.initCanvas();
+    this.initEvent();
+  },
+  beforeDestroy() {
+    this.removeEvent();
+    if (this.boardObj) {
+      this.boardObj.dispose();
+      this.boardObj = null;
+    }
+  },
+  methods: {
+    showColorPicker() {
+      console.log(this.$refs.colorPickerRef);
+      this.$refs.colorPickerRef.showPicker = true;
+    },
+    handleChange(value, type) {
+      const reg = /[0-9]\d+/g;
+      const getArr = value.match(reg);
+      const hexStr =
+        "#" + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
+      const val = value.match(/(\d(\.\d+)?)+/g);
+      if (type == 1) {
+        this.riskColorInfo.fillHexStr = hexStr;
+        this.riskColorInfo.fillPercentage = val[val.length - 1] * 100;
+      } else if (type == 2) {
+        this.riskColorInfo.strokeHexStr = hexStr;
+        this.riskColorInfo.strokePercentage = val[val.length - 1] * 100;
+      }
+    },
+    onToolChange(e) {
+      console.log(e);
+      this.changeTool(e);
+    },
+    handleClick(e) {
+      this.changeTool(e);
+    },
+    // 描边
+    strokeSelectedObject(color) {
+      const activeObj = this.boardObj.getActiveObject();
+      if (
+        activeObj &&
+        [
+          "rect",
+          "circle",
+          "polygon",
+          "ellipse",
+          "triangle",
+          "textbox",
+          "path",
+        ].includes(activeObj.type)
+      ) {
+        this.handleChange(color, 2);
+        activeObj.set("stroke", color);
+        this.boardObj.renderAll();
+        this.addHistory && this.addHistory();
+      }
+    },
+    // 颜色填充
+    fillSelectedObject(color) {
+      const activeObj = this.boardObj.getActiveObject();
+      if (
+        activeObj &&
+        [
+          "rect",
+          "circle",
+          "polygon",
+          "ellipse",
+          "triangle",
+          "textbox",
+          "path",
+        ].includes(activeObj.type)
+      ) {
+        this.handleChange(color, 1);
+        activeObj.set("fill", color);
+        this.boardObj.renderAll();
+        this.addHistory && this.addHistory();
+      }
+    },
+    // 位置对齐
+    alignSelectedObjects(type) {
+      const canvas = this.boardObj;
+      let activeObject = canvas.getActiveObject();
+      if (!activeObject) return;
+
+      // 支持多选
+      let objects = [];
+      if (activeObject.type === "activeSelection") {
+        objects = activeObject._objects;
+      } else {
+        objects = [activeObject];
+      }
+
+      // 以第一个对象为基准
+      const baseObj = objects[0];
+      if (!baseObj) return;
+
+      objects.forEach((obj, idx) => {
+        if (obj === baseObj) return; // 基准对象不动
+        let newLeft = obj.left;
+        let newTop = obj.top;
+        switch (type) {
+          case "left":
+            newLeft = baseObj.left;
+            break;
+          case "center":
+            newLeft =
+              baseObj.left +
+              (baseObj.getScaledWidth() - obj.getScaledWidth()) / 2;
+            break;
+          case "right":
+            newLeft =
+              baseObj.left + baseObj.getScaledWidth() - obj.getScaledWidth();
+            break;
+          case "top":
+            newTop = baseObj.top;
+            break;
+          case "middle":
+            newTop =
+              baseObj.top +
+              (baseObj.getScaledHeight() - obj.getScaledHeight()) / 2;
+            break;
+          case "bottom":
+            newTop =
+              baseObj.top + baseObj.getScaledHeight() - obj.getScaledHeight();
+            break;
+          default:
+            break;
+        }
+        if (type === "left" || type === "center" || type === "right") {
+          obj.set("left", newLeft);
+        }
+        if (type === "top" || type === "middle" || type === "bottom") {
+          obj.set("top", newTop);
+        }
+        obj.setCoords();
+      });
+
+      canvas.requestRenderAll();
+      this.addHistory && this.addHistory();
+    },
+    // 设置文字大小
+    setSelectedFontSize() {
+      const fontSize = Number(this.riskColorInfo.fontSize);
+      if (!fontSize || isNaN(fontSize)) {
+        this.riskColorInfo.fontSize = "";
+        return;
+      }
+      const activeObj = this.boardObj.getActiveObject();
+      let objects = [];
+      if (activeObj && activeObj.type === "activeSelection") {
+        objects = activeObj._objects;
+      } else if (
+        activeObj &&
+        (activeObj.type === "textbox" || activeObj.type === "text")
+      ) {
+        objects = [activeObj];
+      }
+      objects.forEach((obj) => {
+        if (obj.type === "textbox" || obj.type === "text") {
+          obj.set("fontSize", fontSize);
+        }
+      });
+      this.boardObj.renderAll();
+      this.addHistory && this.addHistory();
+    },
+    initCanvas() {
+      this.boardObj = new fabric.Canvas(this.$refs.myCanvas, {
+        isDrawingMode: true,
+        selectable: true,
+        selection: true,
+        devicePixelRatio: true,
+        backgroundVpt: false,
+      });
+      this.boardObj.setWidth(this.canvasWidth);
+      this.boardObj.setHeight(this.canvasHeight);
+      this.boardObj.freeDrawingBrush.color = this.strokeColor;
+      this.boardObj.freeDrawingBrush.width = this.strokeWidth;
+      // 设置默认背景图
+      if (this.defaultBgUrl) {
+        fabric.Image.fromURL(this.defaultBgUrl, (img) => {
+          // 让背景图适应画布大小
+          img.set({
+            scaleX: this.canvasWidth / img.width,
+            scaleY: this.canvasHeight / img.height,
+            selectable: false,
+            evented: false,
+          });
+          this.boardObj.setBackgroundImage(
+            img,
+            this.boardObj.renderAll.bind(this.boardObj)
+          );
+        });
+      }
+      console.log(this.configJson, "configJson");
+      if (this.configJson) {
+        // 确保传入的是字符串
+        this.boardObj.loadFromJSON(
+          this.configJson,
+          () => {
+            this.boardObj.renderAll();
+            this.addHistory(); // 加载完成后添加到历史记录
+            console.log("JSON 数据加载完成，画布已渲染");
+          },
+          (error) => {
+            console.error("加载 JSON 数据时出错:", error);
+          }
+        );
+      }
+      this.changeTool("rect");
+    },
+    // 回显方法
+    updateFillAndStrokeEcho() {
+      const activeObj = this.boardObj.getActiveObject();
+      if (
+        activeObj &&
+        ["rect", "circle", "ellipse", "triangle", "textbox", "path"].includes(
+          activeObj.type
+        )
+      ) {
+        // 填充色
+        this.riskColorInfo.fillColor = activeObj.fill || "";
+        this.riskColorInfo.fillHexStr = activeObj.fill || "";
+        // 描边色
+        this.riskColorInfo.strokeColors = activeObj.stroke || "";
+        this.riskColorInfo.strokeHexStr = activeObj.stroke || "";
+        // 字体大小
+        if (activeObj.type === "textbox" || activeObj.type === "text") {
+          this.riskColorInfo.fontSize = activeObj.fontSize || "";
+        }
+      }
+    },
+    initEvent() {
+      // 事件绑定
+      this.eventHandlers = [
+        this.boardObj.on("mouse:down", this.onMouseDown),
+        this.boardObj.on("mouse:up", this.onMouseUp),
+        this.boardObj.on("mouse:move", this.onMouseMove),
+        this.boardObj.on("selection:created", this.onSelectionCreated),
+        this.boardObj.on("selection:updated", this.updateFillAndStrokeEcho),
+      ];
+      this.boardObj.on("mouse:dblclick", (e) => {
+        const target = e.target;
+        // 只在“移动”工具下，且文本被选中时允许编辑
+        if (
+          this.toolType === "move" &&
+          target &&
+          target.type === "textbox" &&
+          this.boardObj.getActiveObject() === target
+        ) {
+          target.enterEditing();
+          target.selectAll();
+          if (target.hiddenTextarea) {
+            target.hiddenTextarea.focus();
+          }
+        }
+      });
+      this.boardObj.on("selection:cleared", () => {
+        this.riskColorInfo.fillColor = "";
+        this.riskColorInfo.fillHexStr = "";
+        this.riskColorInfo.strokeColors = "";
+        this.riskColorInfo.strokeHexStr = "";
+        this.riskColorInfo.fontSize = "";
+        this.riskColorInfo.position = "";
+      });
+    },
+    removeEvent() {
+      // 事件解绑
+      if (this.boardObj && this.eventHandlers.length) {
+        this.boardObj.off("mouse:down", this.onMouseDown);
+        this.boardObj.off("mouse:up", this.onMouseUp);
+        this.boardObj.off("mouse:move", this.onMouseMove);
+        this.boardObj.off("selection:created", this.onSelectionCreated);
+        this.boardObj.off("selection:updated", this.updateFillAndStrokeEcho);
+      }
+    },
+    onMouseDown(e) {
+      const { x, y } = e.pointer;
+      this.mouseFrom = { x, y };
+      if (!this.boardObj.getActiveObject()) this.isDrawing = true;
+      if (this.toolType === "text") this.drawText();
+      console.log("onMouseDown", e, this.toolType === "tip", e.target);
+      if (this.toolType === "tip") {
+        this.showClickTip();
+      }
+    },
+    closeShowCenterTip() {
+      this.riskColorInfo.left = 0;
+      this.riskColorInfo.top = 0;
+      this.showCenterTip = false;
+    },
+    showClickTip() {
+      const activeObj = this.boardObj.getActiveObject();
+      console.log("1122", activeObj);
+      if (
+        activeObj &&
+        [
+          "tip",
+          "rect",
+          "circle",
+          "polygon",
+          "ellipse",
+          "triangle",
+          "textbox",
+          "path",
+        ].includes(activeObj.type)
+      ) {
+        // 新增：回显位置
+        this.riskColorInfo.left = activeObj.left || 0;
+        this.riskColorInfo.top = activeObj.top || 0;
+        console.log(
+          "this.riskColorInfo",
+          this.riskColorInfo.left,
+          this.riskColorInfo.top
+        );
+        this.showCenterTip = true;
+      }
+      // this.$message({
+      //   message: "这是一个提示框工具的提示内容！",
+      //   type: "info",
+      //   duration: 2000,
+      // });
+      // 或 this.$alert("这是一个提示框工具的提示内容", "提示");
+    },
+    onMouseUp(e) {
+      // this.setAssignText();
+      const { x, y } = e.pointer;
+      this.mouseTo = { x, y };
+      this.isDrawing = false;
+      this.drawingObj = null;
+      this.addHistory();
+      console.log("onMouseUp:释放", e);
+    },
+    onMouseMove(e) {
+      if (this.isDrawing) {
+        const { x, y } = e.pointer;
+        this.mouseTo = { x, y };
+        this.drawing();
+      }
+    },
+    // 矩形设置指定文字
+    setAssignText() {
+      const activeObj = this.boardObj.getActiveObject();
+      console.log("setAssignText", this.toolType);
+      if (this.toolType === "rect" && this.drawingObj) {
+        let { x, y } = this.mouseFrom;
+        console.log("rect1111", this.drawingObj, this.mouseFrom);
+        this.textObj = new fabric.Textbox("内容", {
+          left: x + this.drawingObj.width / 2.5,
+          top: y + this.drawingObj.height / 2.5,
+          fill: this.strokeColor,
+          hasControls: true,
+          fontSize: 16,
+        });
+        this.boardObj.add(this.textObj);
+        // this.textObj.enterEditing();
+        // this.textObj.selectAll();
+        // this.textObj.hiddenTextarea.focus();
+        // this.addHistory();
+      }
+    },
+    onSelectionCreated(e) {
+      const target = e.target;
+      if (this.toolType === "rubber") {
+        if (target._objects) {
+          target._objects.forEach((obj) => this.boardObj.remove(obj));
+        } else {
+          this.boardObj.remove(target);
+        }
+        this.boardObj.discardActiveObject();
+        this.addHistory();
+      }
+      // 不再自动进入编辑
+      this.updateFillAndStrokeEcho();
+    },
+    drawing() {
+      if (this.drawingObj) this.boardObj.remove(this.drawingObj);
+      this.boardObj.isDrawingMode = false;
+      this.boardObj.selectable = false;
+      this.boardObj.selection = false;
+      let drawObj = null;
+      switch (this.toolType) {
+        case "pencil":
+          this.boardObj.isDrawingMode = true;
+          break;
+        case "line":
+          drawObj = this.drawLine();
+          break;
+        case "dashedLine":
+          drawObj = this.drawDashedLine();
+          break;
+        case "arrow":
+          drawObj = this.drawArrow();
+          break;
+        case "rect":
+          drawObj = this.drawRect();
+          break;
+        case "cricle":
+          drawObj = this.drawCricle();
+          break;
+        case "ellipse":
+          drawObj = this.drawEllipse();
+          break;
+        case "equilateral":
+          drawObj = this.drawEquilateral();
+          break;
+        case "polygon":
+          // 你可以让 sides 通过 data 或 props 控制
+          drawObj = this.drawPolygon(this.polygonSides || 5);
+          break;
+        default:
+          this.boardObj.selection = true;
+          this.boardObj.skipTargetFind = false;
+          this.boardObj.selectable = true;
+      }
+      if (drawObj) {
+        this.boardObj.add(drawObj);
+        this.drawingObj = drawObj;
+      }
+    },
+    // 绘制多边形
+    drawPolygon(sides = 5) {
+      // 默认五边形，可传入 sides
+      const centerX = (this.mouseFrom.x + this.mouseTo.x) / 2;
+      const centerY = (this.mouseFrom.y + this.mouseTo.y) / 2;
+      const radius =
+        Math.sqrt(
+          Math.pow(this.mouseTo.x - this.mouseFrom.x, 2) +
+            Math.pow(this.mouseTo.y - this.mouseFrom.y, 2)
+        ) / 2;
+
+      const points = [];
+      for (let i = 0; i < sides; i++) {
+        const angle = (2 * Math.PI * i) / sides - Math.PI / 2;
+        points.push({
+          x: centerX + radius * Math.cos(angle),
+          y: centerY + radius * Math.sin(angle),
+        });
+      }
+
+      return new fabric.Polygon(points, {
+        stroke: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        fill: "rgba(255,255,255,0)",
+        selectable: true,
+        objectCaching: false,
+      });
+    },
+    changeTool(type) {
+      if (this.toolType === type) return;
+      this.boardObj.isDrawingMode = false;
+      this.resetDrawObj();
+      if (this.boardObj.getActiveObject()) {
+        this.boardObj.discardActiveObject();
+        this.boardObj.renderAll();
+      }
+      if (type === "clear") return this.boardObj.clear();
+      if (type === "upload") {
+        this.$refs.sketchpadUpload.click();
+        return;
+      }
+      if (type === "undo") return this.undo();
+      if (type === "redo") return this.redo();
+      if (type === "download") return this.composeImg();
+      this.toolType = type;
+      if (type === "pencil") this.boardObj.isDrawingMode = true;
+      if (type === "rubber" || type === "move") {
+        this.boardObj.selection = true;
+        this.boardObj.skipTargetFind = false;
+        this.boardObj.selectable = true;
+      }
+    },
+    resetDrawObj() {
+      this.boardObj.selectable = true;
+      this.boardObj.selection = true;
+      this.boardObj.skipTargetFind = false;
+      if (this.textObj) {
+        this.textObj.exitEditing();
+        this.textObj = null;
+      }
+    },
+    drawLine() {
+      return new fabric.Line(
+        [this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],
+        { stroke: this.strokeColor, strokeWidth: this.strokeWidth }
+      );
+    },
+    drawDashedLine() {
+      return new fabric.Line(
+        [this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],
+        {
+          stroke: this.strokeColor,
+          strokeWidth: this.strokeWidth,
+          strokeDashArray: [10, 3],
+        }
+      );
+    },
+    drawRect() {
+      return new fabric.Rect({
+        left: this.mouseFrom.x,
+        top: this.mouseFrom.y,
+        height: Math.abs(this.mouseTo.y - this.mouseFrom.y),
+        width: Math.abs(this.mouseTo.x - this.mouseFrom.x),
+        stroke: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        fill: "rgba(255, 255, 255, 0)",
+      });
+    },
+    drawCricle() {
+      let a = this.mouseTo.x - this.mouseFrom.x;
+      let b = this.mouseTo.y - this.mouseFrom.y;
+      let r = Math.sqrt(a * a + b * b) / 2;
+      return new fabric.Circle({
+        left: this.mouseFrom.x,
+        top: this.mouseFrom.y,
+        stroke: this.strokeColor,
+        fill: "rgba(255, 255, 255, 0)",
+        radius: r,
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    drawEllipse() {
+      let left = this.mouseFrom.x;
+      let top = this.mouseFrom.y;
+      return new fabric.Ellipse({
+        left,
+        top,
+        stroke: this.strokeColor,
+        fill: "rgba(255, 255, 255, 0)",
+        originX: "center",
+        originY: "center",
+        rx: Math.abs(left - this.mouseTo.x),
+        ry: Math.abs(top - this.mouseTo.y),
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    drawEquilateral() {
+      let height = this.mouseTo.y - this.mouseFrom.y;
+      return new fabric.Triangle({
+        top: this.mouseFrom.y,
+        left: this.mouseFrom.x,
+        width: Math.sqrt(height * height + (height / 2) * (height / 2)),
+        height,
+        stroke: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        fill: "rgba(255,255,255,0)",
+      });
+    },
+    drawArrow() {
+      let [sx, sy] = [this.mouseFrom.x, this.mouseFrom.y];
+      let [ex, ey] = [this.mouseTo.x, this.mouseTo.y];
+      let disY = sy - ey;
+      let disX = sx - ex;
+      let theta = 30;
+      let headlen = 30;
+      var angle = (Math.atan2(disY, disX) * 180) / Math.PI;
+      var angle1 = ((angle + theta) * Math.PI) / 180;
+      var angle2 = ((angle - theta) * Math.PI) / 180;
+      var topX = headlen * Math.cos(angle1);
+      var topY = headlen * Math.sin(angle1);
+      var botX = headlen * Math.cos(angle2);
+      var botY = headlen * Math.sin(angle2);
+      var arrowX = sx - topX;
+      var arrowY = sy - topY;
+      var path = " M " + sx + " " + sy;
+      path += " L " + ex + " " + ey;
+      arrowX = ex + topX;
+      arrowY = ey + topY;
+      path += " M " + arrowX + " " + arrowY;
+      path += " L " + ex + " " + ey;
+      arrowX = ex + botX;
+      arrowY = ey + botY;
+      path += " L " + arrowX + " " + arrowY;
+      return new fabric.Path(path, {
+        stroke: this.strokeColor,
+        fill: "rgba(255,255,255,0)",
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    drawText() {
+      let { x, y } = this.mouseFrom;
+      this.textObj = new fabric.Textbox("", {
+        left: x,
+        top: y,
+        fill: this.strokeColor,
+        hasControls: true,
+      });
+      this.boardObj.add(this.textObj);
+      this.textObj.enterEditing();
+      this.textObj.selectAll();
+      this.textObj.hiddenTextarea.focus();
+      this.addHistory();
+    },
+    addHistory() {
+      this.history.push(JSON.stringify(this.boardObj));
+      this.stage = 0;
+    },
+    undo() {
+      let stack = this.history;
+      if (stack.length - this.stage > 1) {
+        this.stage += 1;
+        this.boardObj.clear().renderAll();
+        this.boardObj.loadFromJSON(stack[stack.length - 1 - this.stage]);
+        this.boardObj.renderAll();
+      }
+    },
+    redo() {
+      let stack = this.history;
+      if (this.stage > 0) {
+        this.stage -= 1;
+        this.boardObj.clear().renderAll();
+        this.boardObj.loadFromJSON(stack[stack.length - 1 - this.stage]);
+        this.boardObj.renderAll();
+      }
+    },
+    composeImg() {
+      return this.boardObj.toDataURL({
+        format: "png",
+        width: this.boardObj.width,
+        height: this.boardObj.height,
+      });
+    },
+    uploadImg(e) {
+      let imgData = e.target.files[0];
+      if (!imgData) return;
+      let reader = new FileReader();
+      reader.onload = (res) => {
+        let dataUrl = res.target.result;
+        let imgObj = new window.Image();
+        imgObj.src = dataUrl;
+        imgObj.onload = () => {
+          var oImg = new fabric.Image(imgObj);
+          oImg.scale(0.5);
+          this.boardObj.centerObject(oImg).add(oImg).renderAll();
+          this.$refs.sketchpadUpload.value = "";
+        };
+      };
+      reader.readAsDataURL(imgData);
+    },
+    boardObjRef() {
+      return this.boardObj;
+    },
+  },
+  watch: {
+    strokeColor(newVal) {
+      if (this.boardObj) this.boardObj.freeDrawingBrush.color = newVal;
+    },
+    strokeWidth(newVal) {
+      if (this.boardObj) this.boardObj.freeDrawingBrush.width = newVal;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.box5 {
+  // padding: 13px 0;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  .header_title {
+    font-weight: 800;
+    font-size: 16px;
+    // color: #4d4d4d;
+    color: white;
+    margin-right: 16px;
+  }
+  :deep(.risktype_box1) {
+    .el-radio-button__inner {
+      background-color: transparent !important;
+      background-size: 52% 52% !important;
+      background-repeat: no-repeat !important;
+      background-position: center;
+      // width: 26px !important;
+      // height: 26px !important;
+      text-indent: -9999px;
+    }
+    .is-active {
+      // background-color: #5181f6;
+      border-color: #5181f6;
+    }
+
+    .el-radio-button__orig-radio:active + .el-radio-button__inner {
+      color: #5181f6;
+      background-color: transparent;
+      border-color: #d7dbe9;
+    }
+    .el-radio-button:nth-child(1).is-active .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon1_active.png");
+    }
+
+    .el-radio-button:nth-child(2).is-active .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon2_active.png");
+    }
+    .el-radio-button:nth-child(3).is-active .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon6_active.png");
+    }
+    .el-radio-button:nth-child(4).is-active .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon4_active.png");
+    }
+    .el-radio-button:nth-child(5).is-active .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon7_active.png");
+    }
+
+    .el-radio-button:nth-child(1) .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon1.png");
+    }
+
+    .el-radio-button:nth-child(2) .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon2.png");
+    }
+
+    .el-radio-button:nth-child(3) .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon6.png");
+    }
+    .el-radio-button:nth-child(4) .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon4.png");
+    }
+    .el-radio-button:nth-child(5) .el-radio-button__inner {
+      background-image: url("~@/assets/images/riskRankingControl/fabric_icon7.png");
+    }
+  }
+}
+.el-drawer__wrapper {
+  height: 100%;
+  width: 286px;
+  position: absolute;
+  .drawer_main {
+    padding: 20px;
+    height: 100%;
+    position: relative;
+    .drawer_main_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      > div:last-child {
+        width: 34px;
+        height: 34px;
+        background-size: 100% 100% !important;
+        background-repeat: no-repeat !important;
+        background-image: url("~@/assets/images/riskRankingControl/fabric_icon.png");
+      }
+    }
+    .drawer_main_container {
+      margin-top: 20px;
+      .box4 {
+        padding: 13px 0;
+        :deep(.risktype_box1) {
+          .el-radio-button__inner {
+            background-color: transparent !important;
+            background-size: 52% 52% !important;
+            background-repeat: no-repeat !important;
+            background-position: center;
+            // width: 26px !important;
+            // height: 26px !important;
+            text-indent: -9999px;
+          }
+          .is-active {
+            // background-color: #5181f6;
+            border-color: #5181f6;
+          }
+
+          .el-radio-button__orig-radio:active + .el-radio-button__inner {
+            color: #5181f6;
+            background-color: transparent;
+            border-color: #d7dbe9;
+          }
+          .el-radio-button:nth-child(1).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon1_active.png");
+          }
+
+          .el-radio-button:nth-child(2).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon2_active.png");
+          }
+          .el-radio-button:nth-child(3).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon3_active.png");
+          }
+          .el-radio-button:nth-child(4).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon4_active.png");
+          }
+          .el-radio-button:nth-child(5).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon5_active.png");
+          }
+
+          .el-radio-button:nth-child(1) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon1.png");
+          }
+
+          .el-radio-button:nth-child(2) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon2.png");
+          }
+
+          .el-radio-button:nth-child(3) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon3.png");
+          }
+          .el-radio-button:nth-child(4) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon4.png");
+          }
+          .el-radio-button:nth-child(5) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon5.png");
+          }
+        }
+      }
+      .box3 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 10px;
+        padding-bottom: 10px;
+        > div {
+          width: 118px;
+          .el-select,
+          .el-input,
+          /deep/ .el-input__inner {
+            width: 118px;
+            height: 22px;
+            font-size: 12px;
+          }
+          /deep/ .el-input__icon {
+            line-height: 22px;
+          }
+          > div:first-child {
+            font-weight: 500;
+            font-size: 11px;
+            color: #808080;
+            margin-bottom: 10px;
+          }
+        }
+      }
+      .box2 {
+        margin-top: 10px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #e6e6e6;
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-right: 18px;
+        }
+        > div:first-child {
+          font-size: 12px;
+          color: #272d45;
+          > div:last-child {
+            font-size: 16px;
+            color: #000000;
+            font-weight: 500;
+          }
+        }
+        > div:last-child {
+          margin-top: 10px;
+          > div:first-child {
+            width: 183px;
+            height: 22px;
+            background: #f5f5f5;
+            border-radius: 3px 3px 3px 3px;
+            border: 1px solid #e6e6e6;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 5px;
+            .el-icon-view {
+              font-size: 12px;
+            }
+            > div:first-child {
+              display: flex;
+              align-items: center;
+              .el-color-picker {
+                height: 20px;
+              }
+              /deep/ .el-color-picker__trigger {
+                width: 20px;
+                height: 20px;
+                padding: 0;
+              }
+              > div:last-child {
+                margin-left: 12px;
+                font-weight: 500;
+                font-size: 11px;
+                color: #000000;
+              }
+            }
+            > div:last-child {
+              font-weight: 500;
+              font-size: 11px;
+              color: #000000;
+              > span {
+                padding-left: 8px;
+                font-weight: 500;
+                font-size: 11px;
+                color: #b3b3b3;
+              }
+            }
+          }
+          > div:last-child {
+            font-size: 16px;
+            color: #000000;
+            font-weight: 500;
+          }
+        }
+      }
+      .box1 {
+        padding: 13px 0;
+        border-bottom: 1px solid #e6e6e6;
+        :deep(.risktype_box1) {
+          .el-radio-button__inner {
+            background-color: transparent !important;
+            background-size: 52% 52% !important;
+            background-repeat: no-repeat !important;
+            background-position: center;
+            // width: 26px !important;
+            // height: 26px !important;
+            text-indent: -9999px;
+          }
+          .is-active {
+            // background-color: #5181f6;
+            border-color: #5181f6;
+          }
+
+          .el-radio-button__orig-radio:active + .el-radio-button__inner {
+            color: #5181f6;
+            background-color: transparent;
+            border-color: #d7dbe9;
+          }
+          .el-radio-button:nth-child(1).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon1_active.png");
+          }
+
+          .el-radio-button:nth-child(2).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon2_active.png");
+          }
+          .el-radio-button:nth-child(3).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon3_active.png");
+          }
+          .el-radio-button:nth-child(4).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon4_active.png");
+          }
+          .el-radio-button:nth-child(5).is-active .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon5_active.png");
+          }
+
+          .el-radio-button:nth-child(1) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon1.png");
+          }
+
+          .el-radio-button:nth-child(2) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon2.png");
+          }
+
+          .el-radio-button:nth-child(3) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon3.png");
+          }
+          .el-radio-button:nth-child(4) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon4.png");
+          }
+          .el-radio-button:nth-child(5) .el-radio-button__inner {
+            background-image: url("~@/assets/images/riskRankingControl/fabric_icon5.png");
+          }
+        }
+      }
+      .el-radio-button {
+        width: 49px;
+        height: 50px;
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        /deep/ .el-radio-button__inner {
+          width: 49px;
+          height: 50px;
+          padding: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .header_title {
+        font-weight: 800;
+        font-size: 16px;
+        color: #4d4d4d;
+      }
+    }
+    .drawer_main_footer {
+      width: calc(100% - 40px);
+      border-top: 1px solid #e6e6e6;
+      text-align: center;
+      margin: 0 auto;
+      padding-top: 20px;
+      position: absolute;
+      bottom: 20px;
+    }
+  }
+}
+.board-box {
+  // position: relative;
+  background: white;
+  width: 567px;
+  height: calc(100% - 68px - 68px);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.tool-box {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  &--left {
+    left: 10px;
+    top: 10px;
+    flex-direction: column;
+  }
+  &--top {
+    left: 50%;
+    top: 10px;
+    transform: translateX(-50%);
+  }
+  &--right {
+    right: 10px;
+    top: 10px;
+    flex-direction: column;
+  }
+  &--bottom {
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+  }
+}
+.tool-con {
+  margin: 4px;
+  cursor: pointer;
+  &.active {
+    border: 1px solid #409eff;
+    border-radius: 4px;
+  }
+}
+canvas {
+  display: block;
+  background: #fff;
+}
+.center-tip {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  // transform: translate(-50%, -50%);
+  transform: translate(110%, 60%);
+  font-size: 14px;
+  color: #272d45;
+  z-index: 9999;
+  cursor: pointer;
+  // pointer-events: none;
+  padding: 10px 10px 20px;
+  background: #f3f3f3;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 5px 5px 5px 5px;
+  .el-icon-close {
+    width: 100%;
+    font-size: 15px;
+    text-align: right;
+    cursor: pointer;
+  }
+  > div:nth-child(n + 3) {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/companyAdmin/qualityAndSafety/components/myfabric.vue b/src/views/companyAdmin/qualityAndSafety/components/myfabric.vue
new file mode 100644
index 00000000..ef7cb5ee
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/components/myfabric.vue
@@ -0,0 +1,615 @@
+<template>
+  <div
+    class="board-box"
+    :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+  >
+    <!-- 上传图片 -->
+    <input
+      type="file"
+      accept="image/*"
+      id="sketchpad-upload"
+      ref="sketchpadUpload"
+      @change="uploadImg($event)"
+    />
+    <!-- 工具列表 -->
+    <ul
+      class="tool-box"
+      :class="{
+        'tool-box--left': placement === 'left',
+        'tool-box--top': placement === 'top',
+        'tool-box--right': placement === 'right',
+        'tool-box--bottom': placement === 'bottom',
+      }"
+    >
+      <li class="tool-con">
+        <el-color-picker
+          v-model="strokeColor"
+          :predefine="predefineColors"
+          size="mini"
+          show-alpha
+        >
+        </el-color-picker>
+      </li>
+      <li
+        v-for="item in tools"
+        :key="item.type"
+        class="tool-con"
+        :class="{ active: toolType === item.type }"
+        @click="changeTool(item.type)"
+      >
+        <label for="sketchpad-upload" v-if="item.type === 'upload'">
+          <i class="iconfont" :class="item.icon"></i>
+        </label>
+        <i class="iconfont" v-else :class="item.icon"></i>
+      </li>
+    </ul>
+    <!-- 画布 -->
+    <canvas id="myCanvas" ref="myCanvas"></canvas>
+  </div>
+</template>
+
+<script>
+import { fabric } from "fabric";
+// import FileSaver from 'file-saver'
+import "./index.scss";
+console.log("fabric", fabric);
+
+let defaultProps = {
+  canvasWidth: {
+    type: Number,
+    default: window.innerWidth,
+  },
+  canvasHeight: {
+    type: Number,
+    default: window.innerHeight,
+  },
+  canvasBgColor: {
+    type: String,
+    default: "#f6f6f6",
+  },
+  strokeColor: {
+    type: String,
+    default: "#f30",
+  },
+  strokeWidth: {
+    type: Number,
+    default: 2,
+  },
+  showTools: {
+    type: Boolean,
+    default: true,
+  },
+  placement: {
+    type: String,
+    default: "left",
+  },
+};
+console.log("defaultProps", defaultProps);
+
+const TOOLS = [
+  {
+    name: "铅笔",
+    type: "pencil",
+    icon: "icon-pan_icon",
+  },
+  {
+    name: "实线",
+    type: "line",
+    icon: "icon-xian",
+  },
+  {
+    name: "虚线",
+    type: "dashedLine",
+    icon: "icon-xian1",
+  },
+  {
+    name: "箭头",
+    type: "arrow",
+    icon: "icon-jiantou",
+  },
+  {
+    name: "文字",
+    type: "text",
+    icon: "icon-wenzi",
+  },
+  {
+    name: "矩形",
+    type: "rect",
+    icon: "icon-juxing",
+  },
+  {
+    name: "圆形",
+    type: "cricle",
+    icon: "icon-yuanxing",
+  },
+  {
+    name: "椭圆形",
+    type: "ellipse",
+    icon: "icon-tuoyuanxing",
+  },
+  {
+    name: "三角形",
+    type: "equilateral",
+    icon: "icon-sanjiaoxing",
+  },
+  {
+    name: "上传图片",
+    type: "upload",
+    icon: "icon-seiyw41",
+  },
+  {
+    name: "橡皮",
+    type: "rubber",
+    icon: "icon-xiangpi",
+  },
+  {
+    name: "回退",
+    type: "undo",
+    icon: "icon-undo",
+  },
+  {
+    name: "向前",
+    type: "redo",
+    icon: "icon-redo",
+  },
+  // {
+  //   name: '清除',
+  //   type: 'clear',
+  //   icon: 'icon-clear'
+  // },
+  {
+    name: "移动",
+    type: "move",
+    icon: "icon-yidong",
+  },
+  // {
+  //   name: '下载',
+  //   type: 'download',
+  //   icon: 'icon-xiazai'
+  // }
+];
+
+export default {
+  name: "vue-fabric-sketchpad",
+  data() {
+    return {
+      boardObj: null, // 存储当前画布对象
+      mouseFrom: {}, // 鼠标按下的位置
+      mouseTo: {}, // 鼠标抬起的位置
+      toolType: "pencil", // 当前工具类型
+      isDrawing: false, // 是否正在画 鼠标按下和抬起的开关控制
+      drawingObj: null, // 正在绘制的对象
+      history: [], // 存放历史记录
+      textObj: null, // 存储文字对象
+      stage: 0,
+      currImg: "",
+      tools: TOOLS,
+      predefineColors: [
+        "#ff4500",
+        "#ff8c00",
+        "#ffd700",
+        "#90ee90",
+        "#00ced1",
+        "#1e90ff",
+        "#c71585",
+        "rgba(255, 69, 0, 0.68)",
+        "rgb(255, 120, 0)",
+        "hsv(51, 100, 98)",
+        "hsva(120, 40, 94, 0.5)",
+        "hsl(181, 100%, 37%)",
+        "hsla(209, 100%, 56%, 0.73)",
+        "#c7158577",
+      ],
+    };
+  },
+  props: defaultProps,
+  mounted() {
+    this.boardObj = new fabric.Canvas("myCanvas", {
+      isDrawingMode: true, // 是否可以自由绘制
+      selectable: true, // 控件不能被选择
+      selection: true, // 画板中是否显示选中
+      devicePixelRatio: true,
+      backgroundVpt: false,
+    });
+    this.boardObj.freeDrawingBrush.color = this.strokeColor; // 设置自由画笔的颜色
+    this.boardObj.freeDrawingBrush.width = this.strokeWidth; // 自由画笔的宽度
+    this.boardObj.setWidth(this.canvasWidth);
+    this.boardObj.setHeight(this.canvasHeight);
+    this.initEvent();
+  },
+  methods: {
+    initEvent() {
+      this.boardObj.on({
+        "mouse:down": (e) => {
+          console.log("down", e);
+          let { x, y } = e.pointer;
+          this.mouseFrom = { x, y };
+          // 判断是否选中了对象
+          if (!this.boardObj.getActiveObject()) {
+            this.isDrawing = true;
+          }
+          if (this.toolType === "text") {
+            this.drawText();
+          }
+        },
+        "mouse:up": (e) => {
+          console.log("up", e);
+          let { x, y } = e.pointer;
+          this.mouseTo = { x, y };
+          this.isDrawing = false;
+          this.drawingObj = null;
+          this.addHistory();
+        },
+        "mouse:move": (e) => {
+          if (this.isDrawing) {
+            console.log("move", e);
+            let { x, y } = e.pointer;
+            this.mouseTo = { x, y };
+            this.drawing();
+          }
+        },
+        // 移动对象时触发该事件
+        "object:moving": (e) => {
+          console.log("移动", e);
+        },
+        // 放大或者缩小对象时触发该事件
+        "object:scaling": (e) => {
+          console.log("放大缩小", e);
+        },
+        // 旋转对象时触发该事件
+        "object:rotating": (e) => {
+          console.log("旋转", e);
+        },
+        "selection:created": (e) => {
+          console.log("选中了");
+          if (this.toolType === "rubber") {
+            console.log(e.target);
+            if (e.target._objects) {
+              // 多选删除
+              var etCount = e.target._objects.length;
+              for (var i = 0; i < etCount; i++) {
+                this.boardObj.remove(e.target._objects[i]);
+              }
+            } else {
+              // 单选删除
+              this.boardObj.remove(e.target);
+            }
+            this.boardObj.discardActiveObject(); // 清楚选中框
+          }
+          this.addHistory();
+        },
+      });
+    },
+    drawing() {
+      // 判断是否是同一次绘制 是的话先清楚保留最后一次
+      if (this.drawingObj) {
+        this.boardObj.remove(this.drawingObj);
+      }
+      this.boardObj.isDrawingMode = false;
+      this.boardObj.selectable = false;
+      this.boardObj.selection = false;
+      let drawObj = null;
+      switch (this.toolType) {
+        case "pencil":
+          this.boardObj.isDrawingMode = true;
+          break;
+        case "line":
+          drawObj = this.drawLine();
+          break;
+        case "dashedLine":
+          drawObj = this.drawDashedLine();
+          break;
+        case "arrow":
+          drawObj = this.drawArrow();
+          break;
+        case "rect":
+          drawObj = this.drawRect();
+          break;
+        case "cricle":
+          drawObj = this.drawCricle();
+          break;
+        case "ellipse":
+          drawObj = this.drawEllipse();
+          break;
+        case "equilateral":
+          drawObj = this.drawEquilateral();
+          break;
+        default:
+          drawObj = null;
+          this.boardObj.selection = true;
+          this.boardObj.skipTargetFind = false;
+          this.boardObj.selectable = true;
+          break;
+      }
+      if (drawObj) {
+        console.log(drawObj);
+        this.boardObj.add(drawObj);
+        this.drawingObj = drawObj;
+      }
+    },
+    // 选择工具
+    changeTool(type) {
+      this.boardObj.isDrawingMode = false;
+      this.resetDrawObj();
+      // 如果有选中的对象先清除选中
+      if (this.boardObj.getActiveObject()) {
+        this.boardObj.discardActiveObject();
+        this.boardObj.renderAll();
+      }
+      if (type === "clear") {
+        return this.boardObj.clear();
+      }
+      if (type === "upload") {
+        return;
+      }
+      if (type === "undo") {
+        return this.undo();
+      }
+      if (type === "redo") {
+        return this.redo();
+      }
+      if (type === "download") {
+        return this.composeImg();
+      }
+      this.toolType = type;
+      if (type === "pencil") {
+        this.boardObj.isDrawingMode = true;
+      }
+      if (type === "rubber" || type === "move") {
+        this.boardObj.selection = true;
+        this.boardObj.skipTargetFind = false;
+        this.boardObj.selectable = true;
+      }
+    },
+    resetDrawObj() {
+      this.boardObj.selectable = true;
+      this.boardObj.selection = true;
+      this.boardObj.skipTargetFind = false;
+      if (this.textObj) {
+        this.textObj.exitEditing();
+        this.textObj = null;
+      }
+    },
+    // 画实线
+    drawLine() {
+      return new fabric.Line(
+        [this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],
+        {
+          stroke: this.strokeColor,
+          strokeWidth: this.strokeWidth,
+        }
+      );
+    },
+    // 画虚线
+    drawDashedLine() {
+      return new fabric.Line(
+        [this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y],
+        {
+          stroke: this.strokeColor,
+          strokeWidth: this.strokeWidth,
+          strokeDashArray: [10, 3],
+        }
+      );
+    },
+    // 画矩形
+    drawRect() {
+      return new fabric.Rect({
+        left: this.mouseFrom.x,
+        top: this.mouseFrom.y,
+        height: Math.abs(this.mouseTo.y - this.mouseFrom.y),
+        width: Math.abs(this.mouseTo.x - this.mouseFrom.x),
+        stroke: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        fill: "rgba(255, 255, 255, 0)",
+      });
+    },
+    // 画圆形
+    drawCricle() {
+      // 计算半径 勾股定理  a^2 + b^2 = c^2
+      let a = this.mouseTo.x - this.mouseFrom.x;
+      let b = this.mouseTo.y - this.mouseFrom.y;
+      let r = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) / 2;
+      return new fabric.Circle({
+        left: this.mouseFrom.x,
+        top: this.mouseFrom.y,
+        stroke: this.strokeColor,
+        fill: "rgba(255, 255, 255, 0)",
+        radius: r,
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    // 画椭圆
+    drawEllipse() {
+      let left = this.mouseFrom.x;
+      let top = this.mouseFrom.y;
+      return new fabric.Ellipse({
+        left: left,
+        top: top,
+        stroke: this.strokeColor,
+        fill: "rgba(255, 255, 255, 0)",
+        originX: "center",
+        originY: "center",
+        rx: Math.abs(left - this.mouseTo.x),
+        ry: Math.abs(top - this.mouseTo.y),
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    // 画等边三角形
+    drawEquilateral() {
+      let height = this.mouseTo.y - this.mouseFrom.y;
+      return new fabric.Triangle({
+        top: this.mouseFrom.y,
+        left: this.mouseFrom.x,
+        width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2, 2)),
+        height: height,
+        stroke: this.strokeColor,
+        strokeWidth: this.strokeWidth,
+        fill: "rgba(255,255,255,0)",
+      });
+    },
+    // 画箭头
+    drawArrow() {
+      let [sx, sy] = [this.mouseFrom.x, this.mouseFrom.y];
+      let [ex, ey] = [this.mouseTo.x, this.mouseTo.y];
+      let disY = sy - ey;
+      let disX = sx - ex;
+      let theta = 30;
+      let headlen = 30;
+      var angle = (Math.atan2(disY, disX) * 180) / Math.PI;
+      var angle1 = ((angle + theta) * Math.PI) / 180;
+      var angle2 = ((angle - theta) * Math.PI) / 180;
+      var topX = headlen * Math.cos(angle1);
+      var topY = headlen * Math.sin(angle1);
+      var botX = headlen * Math.cos(angle2);
+      var botY = headlen * Math.sin(angle2);
+      var arrowX = sx - topX;
+      var arrowY = sy - topY;
+      var path = " M " + sx + " " + sy;
+      path += " L " + ex + " " + ey;
+      arrowX = ex + topX;
+      arrowY = ey + topY;
+      path += " M " + arrowX + " " + arrowY;
+      path += " L " + ex + " " + ey;
+      arrowX = ex + botX;
+      arrowY = ey + botY;
+      path += " L " + arrowX + " " + arrowY;
+      return new fabric.Path(path, {
+        stroke: this.strokeColor,
+        fill: "rgba(255,255,255,0)",
+        strokeWidth: this.strokeWidth,
+      });
+    },
+    drawText() {
+      let { x, y } = this.mouseFrom;
+      this.textObj = new fabric.Textbox("", {
+        left: x,
+        top: y,
+        width: "",
+        height: "",
+        fill: this.strokeColor,
+        hasControls: true,
+      });
+      this.boardObj.add(this.textObj);
+      this.textObj.enterEditing();
+      this.textObj.selectAll();
+      this.textObj.hiddenTextarea.focus();
+      this.addHistory();
+    },
+    // 增加历史记录
+    addHistory() {
+      this.history.push(JSON.stringify(this.boardObj));
+    },
+    // 撤消
+    undo() {
+      let stack = this.history;
+      if (this.stage < stack.length) {
+        this.boardObj.clear().renderAll();
+        this.boardObj.loadFromJSON(stack[stack.length - 1 - this.stage - 1]);
+        this.boardObj.renderAll();
+        this.stage += 1;
+      }
+    },
+    // 前进
+    redo() {
+      let stack = this.history;
+      if (this.stage > 0) {
+        this.boardObj.clear().renderAll();
+        this.boardObj.loadFromJSON(stack[stack.length - 1 - this.stage + 1]);
+        this.boardObj.renderAll();
+        this.stage -= 1;
+      }
+    },
+    // 合成图片并下载
+    composeImg() {
+      let base64Img = this.boardObj.toDataURL({
+        formart: "png",
+        width: this.boardObj.width,
+        height: this.boardObj.height,
+      });
+      // console.log(this.boardObj.getObjects())
+      // console.log(this.boardObj)
+      // console.log("base64Img", base64Img)
+      return base64Img;
+      // let bd = base64Img.split(',')
+      // let mime = bd[0].match(/:(.*?);/)[1]
+      // let bstr = atob(bd[1]); let l = bstr.length; let u8arr = new Uint8Array(l)
+      // while (l--) {
+      //   u8arr[l] = bstr.charCodeAt(l)
+      // }
+      // let blobData = new Blob([u8arr], { type: mime })
+      // console.log('blob', blobData)
+      // FileSaver.saveAs(blobData, 'sketchpad.png')
+    },
+    // 获取点位信息
+    getObjects() {
+      return this.boardObj.getObjects();
+    },
+    // 创建图片回显
+    createImage(myImage) {
+      console.log("myImage", myImage);
+
+      // const bgImage = fabric.Image.fromURL(myImage, (img) => {
+      //   img.set({
+      //     // 通过scale来设置图片大小，这里设置和画布一样大
+      //     scaleX: this.boardObj.width / img.width,
+      //     scaleY: this.boardObj.height / img.height,
+      //   })
+      //   this.boardObj.setBackgroundImage(img, this.boardObj.renderAll.bind(this.boardObj), {
+      //     backgroundVpt: true,
+      //   });
+      // });
+      let imgObj = new Image();
+      imgObj.src = myImage;
+      imgObj.hasControls = false;
+      let oImg = new fabric.Image(imgObj);
+      // oImg.scale(0.5)
+      console.log("oImg", this.boardObj);
+      this.boardObj.setBackgroundImage(oImg);
+      this.boardObj.renderAll();
+      // this.boardObj.setBackgroundImage(oImg, this.boardObj.renderAll.bind(this.boardObj), {
+      //   backgroundVpt: false,
+      // }).add(oImg).renderAll()
+      // new fabric.createImage(myImage, {
+      //   isDrawingMode: true,
+      //   width: this.canvasWidth,
+      //   height: this.canvasHeight,
+      //   left: 0,
+      //   top: 0,
+      //   // scaleX: 0.5,
+      //   // scaleY: 0.5,
+      //   // cornerStrokeColor: "#000000",
+      // })
+    },
+    uploadImg(e) {
+      let imgData = e.target.files[0];
+      let reader = new FileReader();
+      reader.onload = (res) => {
+        let dataUrl = res.target.result;
+        let imgObj = new Image();
+        imgObj.src = dataUrl;
+        imgObj.onload = () => {
+          console.log("imgObj", imgObj);
+          var oImg = new fabric.Image(imgObj);
+          oImg.scale(0.5);
+          this.boardObj.centerObject(oImg).add(oImg).renderAll();
+          // 为了连续两次选择同一张图片不触发onchange事件
+          this.$refs.sketchpadUpload.value = "";
+        };
+      };
+      reader.readAsDataURL(imgData);
+    },
+  },
+  watch: {
+    strokeColor: {
+      handler(newVal) {
+        this.boardObj.freeDrawingBrush.color = newVal; // 设置自由画笔的颜色
+      },
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.el-color-picker /deep/ .el-color-picker__trigger {
+  border: none !important;
+}
+</style>
diff --git a/src/views/companyAdmin/qualityAndSafety/ocrRecognitionArea.vue b/src/views/companyAdmin/qualityAndSafety/ocrRecognitionArea.vue
new file mode 100644
index 00000000..72800abe
--- /dev/null
+++ b/src/views/companyAdmin/qualityAndSafety/ocrRecognitionArea.vue
@@ -0,0 +1,860 @@
+<template>
+  <div class="container_main">
+    <div class="changeVideoTypeBox whiteBlock">
+      <div class="ocrType">
+        <el-button
+          @click="sendValue"
+          size="medium"
+          icon="el-icon-back"
+          type="primary"
+          plain
+          >返回</el-button
+        >
+        <p>OCR类型：</p>
+        <p
+          v-for="item in videoTypeList"
+          :key="item.id"
+          @click="beforeCut(item)"
+        >
+          <span>{{ item.title }}</span>
+          <img
+            v-show="ocrType != item.id"
+            src="@/assets/images/switch.png"
+            class="switch"
+          />
+          <img
+            v-show="ocrType == item.id"
+            src="@/assets/images/switch_active.png"
+            class="switch"
+          />
+        </p>
+      </div>
+      <div>
+        <p class="tips">
+          (以下OCR类型同时只可开启一种，如果当前有配置好的OCR环境，用户又重新开启其他环境配置时，当前配置不可用)
+        </p>
+        <el-button @click="dealAdd(1)" size="medium" type="primary"
+          >环境配置</el-button
+        >
+      </div>
+    </div>
+    <div class="content-main">
+      <div class="content-box">
+        <div class="content-box_header">
+          <div>识别位置</div>
+          <el-button @click="dealAdd(2)" size="medium" type="primary"
+            >新增</el-button
+          >
+        </div>
+        <ul
+          class="infinite-list"
+          v-infinite-scroll="ocrModulePlaceLoad"
+          :infinite-scroll-immediate="true"
+          :infinite-scroll-distance="20"
+          :infinite-scroll-delay="500"
+          style="overflow: auto"
+        >
+          <li
+            v-for="item in ocrModulePlaceList"
+            :key="item.id"
+            class="infinite-list-item"
+            :class="{ 'active-item': item.id == modulePlaceId }"
+            @click="selectModulePlace(item)"
+          >
+            <div>{{ item.placeName }}</div>
+            <div>
+              <img
+                @click="dealAdd(3, item)"
+                src="@/assets/images/icon-edit.png"
+              />
+              <img
+                @click="deleteBtn(item, 1)"
+                src="@/assets/images/icon-delete.png"
+              />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-box ml-20">
+        <div class="content-box_header">
+          <div>识别区域设置</div>
+          <el-button @click="dealAdd(4)" size="medium" type="primary"
+            >新增</el-button
+          >
+        </div>
+        <ul
+          class="infinite-list"
+          v-infinite-scroll="ocrZonePlaceLoad"
+          :infinite-scroll-immediate="true"
+          :infinite-scroll-distance="20"
+          :infinite-scroll-delay="500"
+          style="overflow: auto"
+        >
+          <li
+            v-for="item in ocrZonePlaceList"
+            :key="item.id"
+            class="infinite-list-item"
+            :class="{ 'active-item': item.id == zonePlaceInfo.id }"
+            @click="selectZonePlace(item)"
+          >
+            <div>{{ item.zoneName }}</div>
+            <div>
+              <img
+                @click="dealAdd(5, item)"
+                src="@/assets/images/icon-edit.png"
+              />
+              <img
+                @click="deleteBtn(item, 2)"
+                src="@/assets/images/icon-delete.png"
+              />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-box1">
+        <div class="content-box1-top">
+          <el-button size="medium" icon="el-icon-circle-close">取 消</el-button>
+          <el-button
+            @click="saveFabric"
+            type="primary"
+            size="medium"
+            icon="el-icon-circle-check"
+            >保 存</el-button
+          >
+        </div>
+        <MyPictode
+          class="mypictode"
+          ref="canvasfabric"
+          :canvasWidth="width"
+          :canvasHeight="height"
+          :configJson="zonePlaceInfo.configJson"
+        ></MyPictode>
+      </div>
+    </div>
+
+    <!--切换其它平台之前的提示-->
+    <el-dialog
+      :modal-append-to-body="false"
+      :title="$t('message.videoManage.switch_platforms.title')"
+      :visible.sync="Popup.platforms"
+      width="667px"
+    >
+      <div class="dialog_content">
+        <div class="platforms-title">确认更换OCR类型为"{{ Popup.name }}"？</div>
+        <div class="platforms-msg">
+          更换后，原有的OCR类型配置及设备信息将全部清零，请谨慎更换。
+        </div>
+        <div class="dialog-footer">
+          <el-button
+            class="zdy-btn"
+            @click="Popup.platforms = false"
+            size="medium"
+          >
+            <div>
+              <img src="../../../assets/images/cancel.png" alt="" />
+              <span>{{ $t("message.videoManage.btn_cancel") }}</span>
+            </div>
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-circle-check"
+            @click="cut"
+            size="medium"
+            >{{ $t("message.videoManage.btn_determine") }}
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 新增 -->
+    <el-dialog
+      :visible.sync="dealShow"
+      width="668px"
+      append-to-body
+      :title="dealTitle"
+    >
+      <el-form
+        ref="dealForm"
+        :model="dealForm"
+        :rules="dealFormRules"
+        size="medium"
+        label-width="210px"
+        class="dealForm"
+      >
+        <template v-if="dealType == 1">
+          <el-form-item label="ocr类型" prop="ocrType">
+            <el-select
+              v-model="dealForm.ocrType"
+              placeholder="请选择"
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in videoTypeList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="apiKey" prop="apiKey">
+            <el-input v-model="dealForm.apiKey" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item label="secretKey" prop="secretKey">
+            <el-input
+              v-model="dealForm.secretKey"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+        </template>
+        <template v-if="dealType == 2 || dealType == 3">
+          <el-form-item label="位置名称" prop="placeName">
+            <el-input
+              v-model="dealForm.placeName"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="位置编码" prop="placeCode">
+            <el-input
+              v-model="dealForm.placeCode"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="关联模块" prop="moduleId">
+            <el-select
+              v-model="dealForm.moduleId"
+              placeholder="请选择"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in videoTypeList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item> -->
+        </template>
+        <template v-if="dealType == 4 || dealType == 5">
+          <el-form-item label="区域名称" prop="zoneName">
+            <el-input
+              v-model="dealForm.zoneName"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="区域编码" prop="zoneCode">
+            <el-input
+              v-model="dealForm.zoneCode"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="关联模块" prop="moduleId">
+            <el-select
+              v-model="dealForm.moduleId"
+              placeholder="请选择"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in videoTypeList"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item> -->
+        </template>
+      </el-form>
+      <div slot="footer" style="text-align: center">
+        <el-button type="primary" @click="submitDealForm">确认</el-button>
+        <el-button @click="dealFormCancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  enableConfigOcrConfigApi,
+  getEnableConfigOcrConfigApi,
+  editOcrConfigApi,
+  getOcrModulePlacePageApi,
+  addOcrModulePlaceApi,
+  editOcrModulePlaceApi,
+  deleteOcrModulePlaceApi,
+  saveConfigOcrConfigApi,
+  getOcrZonePlacePageApi,
+  addOcrZonePlaceApi,
+  editOcrZonePlaceApi,
+  deleteOcrZonePlaceApi,
+} from "@/assets/js/api/equipmentCenter/cameraList";
+// import MyFabric from "./components/myfabric.vue";
+import MyPictode from "./components/myPictode.vue";
+import { isJSON } from '@/util/nowDate';
+export default {
+  components: {
+    // MyFabric,
+    MyPictode,
+  },
+  name: "ocrRecognitionArea",
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      projectSn: "",
+      videoTypeList: [
+        {
+          id: 1,
+          title: "百度智能云",
+        },
+      ],
+      ocrType: 1, //默认为1吗?
+      Popup: {
+        platforms: false,
+        name: "",
+        ocrType: "",
+      },
+      count: 10,
+      dealType: 2,
+      dealShow: false,
+      dealTitle: "",
+      enableConfig: {},
+      dealForm: {
+        hardwareId: "",
+        alarmType: "",
+        location: "",
+        createTime: "",
+      },
+      dealFormRules: {
+        ocrType: [
+          {
+            required: true,
+            message: "请选择ocr类型",
+            trigger: "change",
+          },
+        ],
+        apiKey: [
+          {
+            required: true,
+            message: "请输入apiKey",
+            trigger: "blur",
+          },
+        ],
+        secretKey: [
+          {
+            required: true,
+            message: "请输入secretKey",
+            trigger: "blur",
+          },
+        ],
+        placeCode: [
+          {
+            required: true,
+            message: "请输入位置编码",
+            trigger: "blur",
+          },
+        ],
+        placeName: [
+          {
+            required: true,
+            message: "请输入位置名称",
+            trigger: "blur",
+          },
+        ],
+        zoneName: [
+          {
+            required: true,
+            message: "请输入区域编码",
+            trigger: "blur",
+          },
+        ],
+        zoneCode: [
+          {
+            required: true,
+            message: "请输入区域位置",
+            trigger: "blur",
+          },
+        ],
+      },
+      ocrModulePlaceInfo: {
+        pageNo: 1,
+        pageSize: 20,
+        total: 0,
+      },
+      ocrModulePlaceList: [],
+      ocrZonePlaceInfo: {
+        pageNo: 1,
+        pageSize: 20,
+        total: 0,
+      },
+      ocrZonePlaceList: [],
+      modulePlaceId: "",
+      zonePlaceInfo: {
+        id: "",
+        configJson: "",
+      },
+    };
+  },
+  created() {
+    this.projectSn = this.$store.state.userInfo.sn;
+    this.getOcrModulePlacePage();
+    this.getEnableConfigOcrConfig();
+  },
+  mounted() {},
+  methods: {
+    saveFabric() {
+      const boardObjRef = this.$refs.canvasfabric.boardObjRef();
+       // 获取画布对象并转换为 JSON 格式
+      const configJson = boardObjRef.toJSON();
+      // 打印转换后的 JSON 数据，方便调试
+      console.log('画布内容转换后的 JSON 数据:', configJson);
+      let params = {
+        ...this.zonePlaceInfo,
+        configJson: JSON.stringify(configJson),
+      };
+      editOcrZonePlaceApi(params).then((result) => {
+        if (result.success) {
+          this.$message.success(result.message);
+          this.refreshOcrZonePlace();
+        }
+      });
+    },
+    selectZonePlace(row) {
+      this.zonePlaceInfo = {
+        ...row,
+      };
+    },
+    ocrZonePlaceLoad() {
+      if (this.ocrZonePlaceInfo.pageNo > 0 && this.ocrZonePlaceInfo.total == 0)
+        return;
+      if (
+        this.ocrZonePlaceInfo.pageNo * this.ocrZonePlaceInfo.pageSize >
+        this.ocrZonePlaceInfo.total
+      )
+        return; // this.$message.warning("没有更多数据了！");
+      this.ocrZonePlaceInfo.pageNo += 1;
+      this.getOcrZonePlacePage();
+    },
+    getOcrZonePlacePage() {
+      getOcrZonePlacePageApi({
+        projectSn: this.$store.state.projectSn,
+        pageNo: this.ocrZonePlaceInfo.pageNo,
+        pageSize: this.ocrZonePlaceInfo.pageSize,
+        modulePlaceId: this.modulePlaceId,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.ocrZonePlaceList = res.result.records;
+          this.ocrZonePlaceInfo.total = res.result.total;
+          if (!this.zonePlaceInfo.id && this.ocrZonePlaceList.length > 0) {
+            this.selectZonePlace(this.ocrZonePlaceList[0])
+          }
+        }
+      });
+    },
+    selectModulePlace(row) {
+      this.modulePlaceId = row.id;
+      this.refreshOcrZonePlace();
+    },
+    ocrModulePlaceLoad() {
+      if (
+        this.ocrModulePlaceInfo.pageNo > 0 &&
+        this.ocrModulePlaceInfo.total == 0
+      )
+        return;
+      if (
+        this.ocrModulePlaceInfo.pageNo * this.ocrModulePlaceInfo.pageSize >
+        this.ocrModulePlaceInfo.total
+      )
+        return; // this.$message.warning("没有更多数据了！");
+      this.ocrModulePlaceInfo.pageNo += 1;
+      this.getOcrModulePlacePage();
+    },
+    getOcrModulePlacePage() {
+      getOcrModulePlacePageApi({
+        projectSn: this.$store.state.projectSn,
+        pageNo: this.ocrModulePlaceInfo.pageNo,
+        pageSize: this.ocrModulePlaceInfo.pageSize,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.ocrModulePlaceList = res.result.records;
+          this.ocrModulePlaceInfo.total = res.result.total;
+          if (!this.modulePlaceId && this.ocrModulePlaceList.length > 0) {
+            this.modulePlaceId = this.ocrModulePlaceList[0].id;
+            this.getOcrZonePlacePage();
+          }
+        }
+      });
+    },
+    // 新增
+    dealAdd(type, row) {
+      this.dealType = type;
+      if (type == 1) {
+        this.dealTitle = "环境配置";
+        if (this.enableConfig && this.enableConfig.ocrType) {
+          this.dealForm = {
+            ...this.enableConfig,
+          };
+        } else {
+          this.initDealForm();
+        }
+      } else if (type == 2) {
+        this.dealTitle = "新增识别位置";
+        this.initDealForm();
+      } else if (type == 3) {
+        this.dealTitle = "编辑识别位置";
+        this.dealForm = {
+          ...row,
+        };
+      } else if (type == 4) {
+        this.dealTitle = "新增识别区域设置";
+        this.initDealForm();
+      } else if (type == 5) {
+        this.dealTitle = "编辑识别区域设置";
+        this.dealForm = {
+          ...row,
+        };
+      }
+
+      this.$nextTick(() => {
+        this.$refs["dealForm"].clearValidate();
+      });
+      this.dealShow = true;
+    },
+    initDealForm() {
+      if (this.dealType == 1) {
+        this.dealForm = {
+          ocrType: "",
+          apiKey: "",
+          secretKey: "",
+        };
+      } else if (this.dealType == 2) {
+        this.dealForm = {
+          placeName: "",
+          placeCode: "",
+          moduleId: "",
+          configId: this.enableConfig.id,
+        };
+      } else if (this.dealType == 4) {
+        this.dealForm = {
+          zoneName: "",
+          zoneCode: "",
+          configJson: "",
+          modulePlaceId: this.modulePlaceId,
+        };
+      }
+    },
+    submitDealForm() {
+      this.$refs["dealForm"].validate((valid) => {
+        if (valid) {
+          if (this.dealType == 1) {
+            saveConfigOcrConfigApi({
+              ...this.dealForm,
+              headquartersSn: this.$store.state.userInfo.sn,
+            }).then((res) => {
+              if (res.code == 200) {
+                this.$message.success("修改成功");
+                this.dealShow = false;
+                this.ocrType = res.result.ocrType;
+                this.enableConfig = res.result;
+                this.saveVideoConfigFn();
+              }
+            });
+          } else if (this.dealType == 2) {
+            let params = {
+              ...this.dealForm,
+              projectSn: this.projectSn,
+            };
+            addOcrModulePlaceApi(params).then((result) => {
+              if (result.success) {
+                this.$message.success(result.message);
+                this.refreshOcrModulePlace();
+                this.dealShow = false;
+              }
+            });
+          } else if (this.dealType == 3) {
+            let params = {
+              ...this.dealForm,
+              projectSn: this.projectSn,
+            };
+            editOcrModulePlaceApi(params).then((result) => {
+              if (result.success) {
+                this.$message.success(result.message);
+                this.refreshOcrModulePlace();
+                this.dealShow = false;
+              }
+            });
+          } else if (this.dealType == 4) {
+            let params = {
+              ...this.dealForm,
+              projectSn: this.projectSn,
+            };
+            addOcrZonePlaceApi(params).then((result) => {
+              if (result.success) {
+                this.$message.success(result.message);
+                this.refreshOcrZonePlace();
+                this.dealShow = false;
+              }
+            });
+          } else if (this.dealType == 5) {
+            let params = {
+              ...this.dealForm,
+              projectSn: this.projectSn,
+            };
+            editOcrZonePlaceApi(params).then((result) => {
+              if (result.success) {
+                this.$message.success(result.message);
+                this.refreshOcrZonePlace();
+                this.dealShow = false;
+              }
+            });
+          }
+        }
+      });
+    },
+    dealFormCancel() {
+      this.initDealForm();
+      this.$refs["dealForm"].clearValidate();
+      this.dealShow = false;
+    },
+    // 识别位置
+    refreshOcrModulePlace() {
+      this.ocrModulePlaceInfo.pageNo = 1;
+      this.getOcrModulePlacePage();
+    },
+    // 识别区域
+    refreshOcrZonePlace() {
+      this.ocrZonePlaceInfo.pageNo = 1;
+      this.getOcrZonePlacePage();
+    },
+    deleteBtn(val, type) {
+      this.$confirm("确认删除吗？, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          const obj = {
+            1: deleteOcrModulePlaceApi,
+            2: deleteOcrZonePlaceApi,
+          };
+          obj[type]({ id: val.id }).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              if (type == 1) {
+                this.modulePlaceId = "";
+                this.refreshOcrModulePlace();
+              } else if (type == 2) {
+                this.refreshOcrZonePlace();
+              }
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    beforeCut(item) {
+      if (item.id !== this.ocrType) {
+        this.Popup.platforms = true;
+        this.Popup.name = item.title;
+        this.Popup.ocrType = item.id;
+      }
+    },
+    cut() {
+      this.ocrType = this.Popup.ocrType;
+      this.Popup.platforms = false;
+      console.log("当前videoType", this.ocrType);
+      this.saveVideoConfigFn();
+    },
+    saveVideoConfigFn() {
+      enableConfigOcrConfigApi({
+        headquartersSn: this.$store.state.userInfo.sn,
+        ocrType: this.ocrType,
+      }).then((res) => {
+        if (res.code) {
+          this.configDialog = false;
+          this.getEnableConfigOcrConfig();
+        }
+      });
+    },
+    //查询项目各类型的视频配置信息
+    getEnableConfigOcrConfig() {
+      getEnableConfigOcrConfigApi({
+        headquartersSn: this.$store.state.userInfo.sn,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.ocrType = res.result && res.result.ocrType;
+          this.enableConfig = res.result;
+        }
+      });
+    },
+    sendValue() {
+      this.$emit("updateValue", 0);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.dealForm {
+  .el-input,
+  .el-select {
+    width: 320px;
+  }
+}
+.content-main {
+  display: flex;
+  height: calc(100% - 118px - 20px);
+  margin-top: 20px;
+  .content-box1 {
+    width: 1188px;
+    margin-left: 20px;
+    background: #000000;
+    position: relative;
+    .content-box1-top {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+  }
+  .ml-20 {
+    margin-left: 20px;
+  }
+  .content-box {
+    width: calc(326px - 26px);
+    height: calc(100% - 40px);
+    padding: 20px 13px;
+    background-color: white;
+    .infinite-list {
+      margin-top: 20px;
+      padding: 15px 0;
+      height: calc(100% - 30px - 20px - 34px);
+      background: #f7f7f7;
+      .infinite-list-item:hover {
+        background: rgba(81, 129, 246, 0.2);
+        color: #5181f6;
+      }
+      .infinite-list-item {
+        padding: 0 15px 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 30px;
+        color: #4d4d4d;
+        > div:last-child {
+          display: flex;
+          > img:not(:first-child) {
+            margin-left: 16px;
+          }
+          > img {
+            width: 15px;
+            height: 15px;
+          }
+        }
+        > div:first-child {
+          font-size: 14px;
+        }
+      }
+      .active-item {
+        background: rgba(81, 129, 246, 0.2);
+        color: #5181f6;
+      }
+    }
+
+    .content-box_header {
+      display: flex;
+      justify-content: space-between;
+      > div:first-child {
+        font-size: 16px;
+        color: #272d45;
+        position: relative;
+        padding-left: 20px;
+        height: 20px;
+      }
+      > div:first-child::before {
+        content: "";
+        position: absolute;
+        left: 7px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 15px;
+        background: #4181fe;
+      }
+    }
+  }
+}
+.zdy-btn {
+  div {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-right: 6px;
+    }
+  }
+}
+.platforms-title {
+  color: rgba(42, 46, 63, 1);
+  font-size: 17px;
+}
+
+.platforms-msg {
+  color: rgba(230, 69, 69, 1);
+  font-size: 14px;
+  margin-top: 16px;
+}
+.changeVideoTypeBox {
+  padding: 20px;
+  > div:last-child {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    > p {
+      font-size: 12px;
+      color: #b2b8c2;
+    }
+  }
+  .ocrType {
+    // margin-top: 5px;
+    font-size: 14px;
+    color: #1d1d1d;
+    display: flex;
+    align-items: center;
+    .el-button {
+      margin-right: 1rem /* 16/16 */;
+    }
+    > p > img {
+      cursor: pointer;
+    }
+    p {
+      display: flex;
+      align-items: center;
+      margin-right: 50px;
+
+      .switch {
+        margin-left: 15px;
+        // width: 65px;
+        // height: 32px;
+      }
+    }
+  }
+}
+.container_main {
+  width: calc(100%);
+  height: calc(100%);
+  //   padding: 15px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/companyAdmin/qualityAndSafety/safetyRiskListSet.vue b/src/views/companyAdmin/qualityAndSafety/safetyRiskListSet.vue
index 83ec3cf7..1e10290b 100644
--- a/src/views/companyAdmin/qualityAndSafety/safetyRiskListSet.vue
+++ b/src/views/companyAdmin/qualityAndSafety/safetyRiskListSet.vue
@@ -1,27 +1,45 @@
 <template>
   <div class="fullHeight">
-    <div class="rightPanel whiteBlock" v-if="!safetyRiskDetailShow">
-      <div class="sidebar_btn">
-        <p class="pageTitle">风险管控设置</p>
+    <div class="rightPanel whiteBlock" v-if="safetyRiskDetailShow == 0">
+      <div>
+        <div class="sidebar_btn">
+          <p class="pageTitle">风险管控设置</p>
+        </div>
+        <div class="tables-box">
+              <div class="table_box" @click="onDetail(1)">
+                  <div>安全风险评估计算</div>
+                  <i class="el-icon-arrow-right"></i>
+              </div>
+        </div>
       </div>
-      <div class="tables">
-            <div class="table_box" @click="onDetail">
-                <div>安全风险评估计算</div>
-                <i class="el-icon-arrow-right"></i>
-            </div>
+      <div>
+        <div class="sidebar_btn">
+          <p class="pageTitle">施工日志设置</p>
+        </div>
+        <div class="tables-box">
+              <div class="table_box" @click="onDetail(2)">
+                  <div>OCR识别区域模版</div>
+                  <i class="el-icon-arrow-right"></i>
+              </div>
+        </div>
       </div>
     </div>
-    <div class="whiteBlock fullHeight" v-else>
+    <div class="whiteBlock fullHeight" v-else-if="safetyRiskDetailShow == 1">
         <SafetyRiskListSetDetail @updateValue="handleValue"></SafetyRiskListSetDetail>
     </div>
+    <div class="fullHeight" v-else-if="safetyRiskDetailShow == 2">
+        <OcrRecognitionArea @updateValue="handleValue"></OcrRecognitionArea>
+    </div>
   </div>
 </template>
 <script>
 import { getDictionaryItemApi } from "@/assets/js/api/companyDiagram";
 import SafetyRiskListSetDetail from '@/views/companyAdmin/qualityAndSafety/safetyRiskListSetDetail.vue'
+import OcrRecognitionArea from '@/views/companyAdmin/qualityAndSafety/ocrRecognitionArea.vue'
 export default {
     components: {
       SafetyRiskListSetDetail,
+      OcrRecognitionArea,
     },
   data() {
     return {
@@ -47,7 +65,7 @@ export default {
       riskDialogFormRules: {
         nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
       },
-      safetyRiskDetailShow: false,
+      safetyRiskDetailShow: 2,
     };
   },
   created() {
@@ -59,8 +77,8 @@ export default {
     handleValue(val) {
         this.safetyRiskDetailShow = val;
     },
-    onDetail() {
-        this.safetyRiskDetailShow = true;
+    onDetail(type) {
+        this.safetyRiskDetailShow = type;
     },
     // 获取字典工程类别列表
     getDicProjectTypeList() {
@@ -87,7 +105,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.tables {
+.tables-box {
     .table_box:nth-child(odd) {
         background-color: #f5f7fa;
     }
@@ -127,6 +145,7 @@ export default {
   align-items: center;
   padding-bottom: 8px;
   padding-left: 15px;
+  padding-top: 20px;
   .el-button + .el-button {
     margin-left: 8px;
   }
@@ -310,8 +329,8 @@ export default {
 .rightPanel {
   float: left;
   width: calc(100%);
-  padding: 20px 0;
-  height: calc(100% - 40px);
+  padding: 0 0 20px;
+  height: calc(100% - 20px);
   .tabs-content {
     height: calc(100% - 95px);
     /deep/.el-tabs__content {
diff --git a/src/views/companyAdmin/qualityAndSafety/safetyRiskListSetDetail.vue b/src/views/companyAdmin/qualityAndSafety/safetyRiskListSetDetail.vue
index 89971c2e..0224da15 100644
--- a/src/views/companyAdmin/qualityAndSafety/safetyRiskListSetDetail.vue
+++ b/src/views/companyAdmin/qualityAndSafety/safetyRiskListSetDetail.vue
@@ -1047,7 +1047,7 @@ export default {
     },
     sendValue() {
     //   this.safetyRiskDetailShow = true;
-      this.$emit('updateValue', false);
+      this.$emit('updateValue', 0);
     },
     // 获取字典工程类别列表
     getDicProjectTypeList() {