Merge branch 'master' of https://e.coding.net/ctcdevteam/ehs/ehs_web

package.json

@@ -28,7 +28,7 @@
 		"dagre": "^0.8.5",
 		"dagre-d3": "^0.6.4",
 		"dhtmlx-gantt": "^8.0.6",
-		"echarts": "5.4.1",
+		"echarts": "^5.5.1",
 		"element-plus": "^2.7.4",
 		"file-saver": "^2.0.5",
 		"html2canvas": "^1.4.1",
@@ -42,6 +42,7 @@
 		"three": "^0.155.0",
 		"tinymce": "6.3.2",
 		"vue": "3.2.47",
+		"vue-echarts": "^7.0.3",
 		"vue-i18n": "9.2.2",
 		"vue-router": "4.1.6",
 		"vuedraggable": "4.0.3",

src/components/ehsSelect/xselect.vue

@@ -0,0 +1,105 @@
+<template>
+	<div>
+		<el-input
+			ref="inputRef0"
+			:value-on-clear="null"
+			style="display: none"
+			v-model="inputValue"
+		>
+		</el-input>
+		<el-input
+			:value-on-clear="null"
+			:readonly="true"
+			ref="inputRef"
+			suffix-icon="el-icon-search"
+			v-model="inputLabel"
+		>
+		</el-input>
+		<div v-if="edit">
+			<el-popover
+				v-model:visible="showPopover"
+				trigger="click"
+				virtual-triggering
+				:virtual-ref="inputRef"
+				:width="tableWidth"
+			>
+				<el-input
+					v-model="keyword"
+					placeholder="关键词查找"
+					@keyup.enter="handleQuery"
+				></el-input>
+				<div style="height: 2px"></div>
+				<scTable
+					ref="table"
+					:apiObj="apiObj"
+					:params="params"
+					:query="query"
+					:height="tableHeight"
+					row-key="id"
+					stripe
+					@row-click="rowClick"
+					:hidePagination="hidePagination"
+					paginationLayout="prev, pager, next"
+					hideDo
+				>
+					<slot></slot>
+				</scTable>
+			</el-popover>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed } from "vue";
+
+const props = defineProps({
+	edit: { type: Boolean, default: true },
+	hidePagination: { type: Boolean, default: false },
+	tableWidth: { type: Number, default: 600 },
+	tableHeight: { type: Number, default: 400 },
+	apiObj: { type: Object, default: () => {}, required: true },
+	params: { type: Object, default: () => {} },
+	label: { type: String, default: "" },
+	modelValue: { type: String, default: null },
+	labelField: { type: String, default: "name" },
+	valueField: { type: String, default: "id" },
+});
+
+const emit = defineEmits(["update:modelValue", "update:label"]);
+
+// 控制 popover 显示与隐藏的状态
+const showPopover = ref(false);
+const inputRef = ref();
+const inputRef0 = ref();
+const table = ref();
+const inputLabel = computed({
+	get() {
+		return props.label;
+	},
+	set(val) {
+		emit("update:label", val);
+	},
+});
+const inputValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(val) {
+		emit("update:modelValue", val);
+	},
+});
+
+const keyword = ref("");
+const query = ref({ search: "" });
+
+const handleQuery = () => {
+	query.value.search = keyword.value;
+	table.value.queryData(query.value);
+};
+
+const rowClick = (row) => {
+	inputLabel.value = row[props.labelField];
+	inputValue.value = row[props.valueField];
+	showPopover.value = false;
+};
+</script>

src/ehs.js

@@ -1,12 +1,12 @@
 import ehsUserSelect from './components/ehsSelect/userselect'
 import ehsEpSelect from './components/ehsSelect/epselect'
 import ehsSelect from './components/ehsSelect/select'
-import ehsTableSelect from './components/ehsSelect/tableSelect'
+import xSelect from './components/ehsSelect/xselect.vue'
 export default {
 	install(app) {
 		app.component('ehsUserSelect', ehsUserSelect);
 		app.component('ehsEpSelect', ehsEpSelect);
 		app.component('ehsSelect', ehsSelect);
-		app.component('ehsTableSelect', ehsTableSelect);
+		app.component('xSelect', xSelect);
 	}
 }

src/main.js

@@ -18,6 +18,9 @@ import htmlToPdf from "./utils/htmlToPdf";
 
 import * as Cesium from "cesium";
 
+import "echarts";
+import ECharts from 'vue-echarts';
+
 const app = createApp(App);
 
 app.use(store);
@@ -33,6 +36,7 @@ app.use(Xlsx);
 app.use(htmlToPdf);
 app.use(jsBarCode);
 app.use(DataVVue3);
+app.component('v-chart', ECharts);
 
 //挂载app
 app.mount("#app");

src/views/home/testx.vue

@@ -1,38 +1,111 @@
 <template>
-    <div>
+	<el-container>
-    <scQrCode text="xxxx"></scQrCode>
+        <el-aside width="200px">
-    </div>
+            <el-menu>
-    <div>
+                <el-menu-item index="1" @click="currentM='二维码'">二维码</el-menu-item>
-    <ehsSelect :apiObj="apiObj" v-model="x" :showName="x_name" placeholder="部门" clearable :params="{'search': '生产'}"></ehsSelect>
+                <el-menu-item index="2" @click="currentM='带默认的选择'">带默认的选择</el-menu-item>
-    </div>
+                <el-menu-item index="3" @click="currentM='图标选择'">图标选择</el-menu-item>
-    <div>
+                <el-menu-item index="4" @click="currentM='xselect'">xselect</el-menu-item>
-    <scIconSelect></scIconSelect>
+                <el-menu-item index="5" @click="currentM='vue-echarts'">vue-echarts</el-menu-item>
-    </div>
+            </el-menu>
-    <div>
+        </el-aside>
-    <ehsTableSelect :apiObj="apiObj2" v-model="x2">
+		<el-main>
-        <el-table-column label="姓名" prop="name"></el-table-column>
+			<div v-if="currentM=='二维码'">
-        <el-table-column label="账号" prop="username"></el-table-column>
+				<scQrCode text="xxxx"></scQrCode>
-    </ehsTableSelect>
+			</div>
-    </div>
+			<div v-if="currentM=='带默认的选择'">
+				<ehsSelect
+					:apiObj="apiObj"
+					v-model="x"
+					:showName="x_name"
+					placeholder="部门"
+					clearable
+					:params="{ search: '生产' }"
+				></ehsSelect>
+			</div>
+			<div v-if="currentM=='图标选择'">
+				<scIconSelect></scIconSelect>
+			</div>
+			<div v-if="currentM=='xselect'">
+				<xSelect :apiObj="apiObj" v-model="x2" v-model:label="x2_name" style="width: 200px">
+                    <el-table-column label="id" prop="id"></el-table-column>
+                    <el-table-column label="名称" prop="name"></el-table-column>
+                </xSelect>
+                <!-- <el-button @click="showx2"></el-button> -->
+			</div>
+            <div v-if="currentM=='vue-echarts'">
+                <v-chart :option="chartOption" autoresize  style="height: 400px; width: 400px"/>
+            </div>
+		</el-main>
+	</el-container>
 </template>
 <script>
 export default {
-    name: 'testx',
+	name: "testx",
-    components: {
+	components: {},
-    },
+	data() {
-    data() {
+		return {
-        return {
+            currentM: "",
-            apiObj: this.$API.system.dept.list,
+			apiObj: this.$API.system.dept.list,
-            x: '3607937377546706944',
+			x: "3607937377546706944",
-            x_name: '光芯科技',
+			x_name: "光芯科技",
-            // x:null,
+			// x:null,
-            apiObj2: this.$API.system.user.list,
+			apiObj2: this.$API.system.user.list,
-            x2: {}
+			x2: "3347207082608115712",
+            x2_name: "烧成车间",
+            chartOption: {
+              textStyle: {
+                fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+              },
+              title: {
+                text: 'Traffic Sources',
+                left: 'center',
+              },
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b} : {c} ({d}%)',
+              },
+              legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: [
+                  'Direct',
+                  'Email',
+                  'Ad Networks',
+                  'Video Ads',
+                  'Search Engines',
+                ],
+              },
+              series: [
+                {
+                  name: 'Traffic Sources',
+                  type: 'pie',
+                  radius: '55%',
+                  center: ['50%', '60%'],
+                  data: [
+                    { value: 335, name: 'Direct' },
+                    { value: 310, name: 'Email' },
+                    { value: 234, name: 'Ad Networks' },
+                    { value: 135, name: 'Video Ads' },
+                    { value: 1548, name: 'Search Engines' },
+                  ],
+                  emphasis: {
+                    itemStyle: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    },
+                  },
+                },
+              ],
+            },
+		};
+	},
+	mounted() {},
+	methods: {
+        showx2(){
+            // console.log(this.x2)
         }
     },
-    mounted() {
+};
-    },
+</script>
-    methods: {
-    }
-}
-</script>